Archived topic
Featured image in sticky post big, others small
12 replies · Started by Elio Martinez on April 7, 2017
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.
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
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 :)