featured image size

Hello @bougidruche

First in your functions.php file you should have add_theme_support( ‘post-thumbnails’ );
To change the size off image(s), you have to use/change in your functions.php file after the above code

add_image_size( 'yourThemeName-featured-image', widthYouWant, heightyouWant, cropMode );

Please take a look at add_image_size function to understand how to do it.

After that, you’ll have to regenerate your thumbnails, use Force Regenerate Thumbnails plugin for that.

SYA ??

@lebcit thanks for helping out ??

@bougidruche could you share a link to the site? That will help me with a solution.

Hi Ben,

Sure thing. The site is in developpement.

You will find an image here :

https://technobeau.fr/microsoft-wireless-display-adapter-v2/

Thanks,

Great thanks for the link!

I have a few ideas in mind. First, you can try resizing the image with CSS like this:

.featured-image {
  width: 50%;
  padding-bottom: 25%;
  margin: 0 auto;
}

The CSS can be copied and pasted into the Custom CSS section in the Customizer. It will make the image much smaller, but I’m not sure if this will cause one of the smaller image files to be loaded. It gets confusing between WP responsive images and the plugins 8)

You can also use a PHP function I’ll post below to make the featured image get the “large” version of the image instead of the “full” version. This won’t make it display smaller on the site, but should change the file that is fetched.

This can be added to a functions.php file in a child theme.

function ct_chosen_featured_image() {

		global $post;
		$featured_image = '';

		if ( has_post_thumbnail( $post->ID ) ) {

			if ( is_singular() ) {
				$featured_image = '<div class="featured-image">' . get_the_post_thumbnail( $post->ID, 'large' ) . '</div>';
			} else {
				$featured_image = '<div class="featured-image"><a href="' . esc_url( get_permalink() ) . '">' . esc_html( get_the_title() ) . get_the_post_thumbnail( $post->ID, 'large' ) . '</a></div>';
			}
		}

		$featured_image = apply_filters( 'ct_chosen_featured_image', $featured_image );

		if ( $featured_image ) {
			echo $featured_image;
		}
	}

If you’re not sure how to implement that I can help you with a child theme.

Hi Ben,
Thanks for your response.
I stopped using WP retina 2X because it uses the attribute w : so it basically does the same thing than letting WP deal with responsive images via srcset list…

I think it is not about choosing the large version for the featured image instead full size. This should be directly done by the sizes attribute of srcset. On homepage, I have actually the same problem with all featured images that appear : It loads the big 2500px because I guess my viewport is 2880px. Thing is these image are half the size of the viewport (maybe less) so the browser should use a smaller one in the srcset. What do you think ?

Thanks,

Hmm this could be due to the way the Featured Images are styled in Chosen. To maintain the aspect ratio across all screen sizes, the images are absolutely positioned and the parent element uses “padding-bottom” for the height. The images have a width and height of 100% and WP might be using this info somehow instead of the actual display size of the image.

Try explicitly setting the width of the image for screens over 1500px wide like this:

@media all and (min-width: 1500px) {

  .featured-image img {
    width: 1400px;
  }
}

With the width set for the img element, WP might choose a smaller version of the image.