Site logo

Archived topic

Featured image in sticky post big, others small

12 replies · Started by Elio Martinez on April 7, 2017

Viewing posts 1–13 of 13

Hi,

I want that all the featured images of my posts stay with a width of 200px in Masonry option, but I need that the most recent post selected as "Sticky" has a bigger width. It is possible that with some css or code?

Thanks.

Hi Elio,

Are you able to provide a link to your site? I'll see if I can come up with something.

Let me know.

My site is nbamaniacs.com

I want only one column with a sidebar, not two or three columns plus a sidebar.

If you want only one column then try disabling both Columns and Masonry in Customizer > Blog.

Let me know if this is what you wanted.

p.s. Dubs all the way :)

Leo,

The thing is that I want all the featured images in the home with a 200px width BUT the images in the sticky post much bigger.

Try this CSS for sticky post featured image size:

.sticky .post-image {
    max-width: 500px;
}

Let me know.

Which is best? css for not sticky images (don't know the exact css code) or the function that Tom wrote?

I would say using the function would be the best way. Try this code below and adjust the width and height to what you want on sticky post:

add_filter( 'generate_blog_image_attributes','tu_variable_image_sizes' );
function tu_variable_image_sizes( $atts )
{
    // Set up our conditional
    if ( is_sticky() ) :
        $atts[ 'width' ] = 300;
        $atts[ 'height' ] = 300;
        $atts[ 'crop' ] = true;
    endif;

    // Return our options
    return $atts;
}

Adding PHP: https://docs.generatepress.com/article/adding-php/

Hi,

I have solved this but now I have a problem: if I select three posts as sticky, the three of them have a big photo. It is possible to make a function so only the most recent sticky has the big image and the older stickys the same photo size as the non-sticky?

You could try this instead:

add_filter( 'generate_blog_image_attributes','tu_variable_image_sizes' );
function tu_variable_image_sizes( $atts ) {
    global $wp_query;
    // Set up our conditional
    if ( 0 == $wp_query->current_post ) {
        $atts[ 'width' ] = 300;
        $atts[ 'height' ] = 300;
        $atts[ 'crop' ] = true;
    }

    // Return our options
    return $atts;
}

Solved! :D

Awesome :)

This archived topic is closed to new replies.