[Resolved] Featured image in sticky post big, others small

[Elio Martinez]

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.

GeneratePress 1.3.46

GP Premium 1.2.96

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Elio Martinez]

My site is nbamaniacs.com

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

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Elio Martinez]

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.

[Leo]

Try this CSS for sticky post featured image size:

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

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

Might be best to set the image dimensions for the large image, then use CSS to make them smaller on the smaller posts.

Otherwise you can use a function like this: https://docs.generatepress.com/article/adjusting-the-featured-images/#changing-the-featured-image-sizes-using-a-filter

Using a conditional like this: https://codex.wordpress.org/Function_Reference/is_sticky

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Elio Martinez]

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

[Leo]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Elio Martinez]

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?

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Elio Martinez]

Solved! 😀

[Tom]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts