Images for sticky posts

时间:2015-12-15 作者:victor

我有一个粘性贴子,它从背景URL获取图像,但不会调整图像大小并离开my blog 重的代码如下:

// is sticky 
if ( ( is_home() || is_front_page() ) ) {
    $sticky = get_option( \'sticky_posts\' );
    $query = new WP_Query( \'p=\' . $sticky[0] );;
    $args = array(
        \'posts_per_page\' => 1, //get all post
        \'post__in\' => get_option( \'sticky_posts\' ), //are they sticky post
        \'ignore_sticky_posts\'=> 1
    );

    // The Query
    $the_query = new WP_Query( $args );

    // The Loop 
    // We are only getting a list of the title as a li, see the loop docs for details 
    //     on the loop, or copy this from index.php (or posts.php)
    while ( $the_query->have_posts() ) {
        $the_query->the_post();

        $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), \'slide-home\' ); ?>       
        <div class="post post-big"  style="background:url(<?php echo $image[0]; ?>) no-repeat center; background-size: cover">
            <a href="<?php echo get_permalink(); ?>">
                <div class="info info-big">
                    <div class="overlay"></div>
                    <h2 class="title-post centered">
                        <div>
                            <?php
                            foreach( ( get_the_category() ) as $category ) {
                                if ( $category->category_parent == 0 ) {
                                    echo \'<i class="icon icon-ico-categoria-\' . 
                                        $category->cat_ID . \'"></i>\';
                                }
                            }
                            ?>
                        </div>
                        <?php the_title(); ?>
                    </h2>
                </div>
            </a>
        </div>
        <?php
    }
    wp_reset_query();
}
?></div>
如何重新生成图像,使站点变亮?

2 个回复
SO网友:jgraup

您需要在WP 4.4中使用响应图像。虽然还没有太多文档,但请参阅这篇WP核心文章Responsive Images in WordPress 4.4.

下面是他们给出的例子。

<?php
$img_src = wp_get_attachment_image_url( $attachment_id, \'medium\' );
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, \'medium\' );
?>
<img src="<?php echo esc_url( $img_src ); ?>"
     srcset="<?php echo esc_attr( $img_srcset ); ?>"
     sizes="(max-width: 50em) 87vw, 680px" alt="A rad wolf">
如果您选择延迟加载路线,请查看lazySizes - bgset plugin / DEMO. 这将使您的代码减少到:

<?php
    $img_srcset = wp_get_attachment_image_srcset( $attachment_id, \'medium\' );
    ?>
<div class="lazyload" data-bgset="<?php echo $img_srcset; ?>" data-sizes="auto">
这种方法可以确保较小的屏幕大小不需要完整的图像,从而减少页面负载和网站速度。

SO网友:victor

我已经解决了这个问题。抱歉用葡萄牙语发布。我在CSS方面遇到了一些问题,因为我需要在图像中添加一些渐变,但现在可以了。

        <?php 
        //is sticky 
        if((is_home() || is_front_page()) ){

        $sticky = get_option( \'sticky_posts\' );
        $query = new WP_Query( \'p=\' . $sticky[0] );;
        $args = array(
            \'posts_per_page\' => 1, //get all post
            \'post__in\' => get_option( \'sticky_posts\' ), //are they sticky post
            \'ignore_sticky_posts\'=> 1
        );

        // The Query
        $the_query = new WP_Query( $args );

        // The Loop //we are only getting a list of the title as a li see the loop docs for details on the loop or copy this from index.php (or posts.php)

        while ( $the_query->have_posts() ) {
            $the_query->the_post();

            ?> 
            <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), \'slide-home\' ); ?>     
            <div class="post post-big">

                <a href="<?php echo get_permalink(); ?>">
                    <div class="info info-big">
                    <div class="behind"></div>
                        <div class="overlay"></div>
                        <div class="ahead">
                        <?php if( has_post_thumbnail() ) {
                            if( is_sticky() ) the_post_thumbnail( \'sticky-post-thumbnail\' );
                            else the_post_thumbnail();
                        }?>
                        </div>
                        <h2 class="title-post centered">
                            <div>
                                <?php
                                    foreach((get_the_category()) as $category) {
                                        if ($category->category_parent == 0) {
                                            echo \'<i class="icon icon-ico-categoria-\' . $category->cat_ID . \'"></i>\';
                                        }
                                    }
                                ?>
                            </div>
                            <?php the_title(); ?>
                        </h2>


                    </div>
                </a>

                </div>
            <?php
            }
            wp_reset_query();
            }
        ?>
    </div>

相关推荐