0

I have a sticky post that gets the image from background URL, but doesn't resize the image and leaves my blog heavy. Here is the code:

// 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>

How can I get the images regenerated, to set the site lighter?

  • Your code is pulling the size you specified, whatever that is. It isn't clear exactly what you are asking. – s_ha_dum Dec 15 '15 at 15:05
  • All your images are HUGE! Use s Chrome extension Perfmap - chrome.google.com/webstore/detail/perfmap/… - which will show you even your smaller images take about 1 second to load. – jgraup Dec 15 '15 at 19:16
0

You're going to want to use responsive images in WP 4.4. Not a heck of a lot of documentation out yet but refer to this WP Core article Responsive Images in WordPress 4.4.

Here is the example they give.

<?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">

If you go the lazy loading route check out lazySizes - bgset plugin / DEMO. That would reduce your code to:

<?php
    $img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
    ?>
<div class="lazyload" data-bgset="<?php echo $img_srcset; ?>" data-sizes="auto">

This method ensures a smaller screen size won't require a full image, thus reducing your page load and site speed.

-1

I've already fixed the problem. Sorry for posting in portuguese. I've had some problems with CSS because i needed to put some gradient in the image, but its ok now.

        <?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>
  • 1
    Please, write in English. Else we will delete this answer. Thank you. – kaiser Dec 15 '15 at 19:01
  • The stack language is English. Answers should be in English. – s_ha_dum Dec 15 '15 at 19:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.