Default Image sizes

As far as I know when you upload a new photo, WordPress automatically creates all available sizes for that photo, no matter it’s a product image or a post image. But it seems this is not the case on your demo, namely, if you upload an image for a post featured image, it doesn’t create other sizes including those you’ve registered for shop. Actually that’s a good thing, because you don’t create unnecessary photos. How can I have that on my website?

Thanks

See this page as an example:

https://woodmart.xtemos.com/blog/2016/07/23/a-companion-for-extra-sleeping/

There are a bunch of sizes for the featured image like this one: https://wood.r.worldssl.net/wp-content/uploads/2016/07/blog-12-860×386.jpg which is 860px wide and this size is not among those you listed above.

I’m quite familiar with srcset attribute; As far as I know it doesn’t generate additional sizes, it just includes the available sizes of an image (those with the same aspect ratio) and then browsers will choose the more appropriate ones. On your demo, we see some sizes that have been created specifically for the featured image, just check this image and you’ll see it’s not available in most of the sizes you listed above.

https://wood.r.worldssl.net/wp-content/uploads/2016/07/blog-12-860×386.jpg

Regards

But it doesn’t say that 🙂

By including the available sizes of an image into a srcset attribute,

Regards

That’s exactly what I’m saying. So you have to define those new sizes first in function.php file or in the admin panel, right? Therefore you have a different set of sizes for woodmart in addition to the ones you listed above?

How has this image been generated then?

https://wood.r.worldssl.net/wp-content/uploads/2016/07/blog-12-860×386.jpg

Regards

In order to see the difference, I changed all the image sizes to the ones you listed above and then uploaded the very same photo of your blog on my website and as you can see it has NOT generated those images for me.

http://tennisfa.com/shop/2017/06/16/the-big-design-wall-likes-pictures/

https://woodmart.xtemos.com/blog/2016/07/23/a-companion-for-extra-sleeping/

That’s reasonable. Thanks for your help.

Hi again 🙂

It looks, on a category page like this: https://woodmart.xtemos.com/blog/category/design-trends/page/2/ the most appropriate image is not chosen by the browser. Actually the browser always chooses the biggest image, which is not necessary and makes loading slower. And that happens even on desktop and when there are three columns and the display is not retina.

It seems “sizes” attribute should be better configured.

Could you please look into it?

Thanks

Hi there,

I think the “sizes” attribute is not correctly configured for blog masonry grids, whereas for shop grid view you’re using the right one.

You use the following for blog grids: sizes=”(max-width: 1024px) 100vw, 1024px”
While for shop grids you use this one: sizes=”(max-width: 430px) 100vw, 430px”

And that’s why on blog grids the biggest image is always called. It needs to be configured to match the theme breakpoints, otherwise it always uses the biggest image which is not efficient.

And one more thing: why don’t you enable hard cropping for theme photos to make grid view look tidy and uniform? On your demos, you have used photos with the same size so the grid is always uniform and pretty, but what if we upload images with different sizes? Soft cropping creates images with different heights and the result is not very good. I think that would be a good idea to enable hard cropping for images that are going to be used somewhere in the theme.

Regards

Hi,

I’m afraid the “sizes” attribute for blog grids should be modified to something like this:

sizes=”(max-width: 480px (or whatever media breakpoint is used for phones) 100vw, 1024px”

As for hard cropping, I was referring to blog images, and that can be achieved by registering new sizes in function.php. Please find the attached file to see what it looks like when hard cropping is not used.

Regards

Hi there,

Another thing that, I think, is worth having a look at:

In content.php:

					<?php elseif ( ! is_single() ): ?>

						<div class="post-img-wrapp">
							<a href="<?php echo esc_url( get_permalink() ); ?>">
								<?php echo woodmart_get_post_thumbnail( 'large' ); ?>
							</a>
						</div>
						<div class="post-image-mask">
							<span></span>
						</div>
						
					<?php else: ?>
						<?php the_post_thumbnail(); ?>
					<?php endif ?>

You have not defined any size for <?php the_post_thumbnail(); ?> which means it uses the full size (uploaded image). That means if you upload a 20000 px wide photo, that photo is loaded when you visit a single post. Why not using ‘large’ size?

Regards

I think I sort of solved the problem. I modified a few lines in content.php and used the 768 breakpoint as a base, of course we need more media conditions to have a more elegant approach, but I think this one also works and stops big images from loading in grid view (on desktop). I also register a custom size (largesoft) to stop ultra big images from being called directly in single page view and since it uses soft crop, the full image size is always present to to be used in ultra large screen if needed.
I also changed ‘medium’ and ‘large’ sizes crop type to hard crop to have a uniform grid.

And this is what I used in content.php

					<?php elseif ( ! is_single() ): ?>

						<div class="post-img-wrapp moegrid">
							<a href="<?php echo esc_url( get_permalink() ); ?>">
								<?php the_post_thumbnail('medium', ['sizes' => '(max-width: 768px) 100vw, 640px']); ?>
							</a>
						</div>
						<div class="post-image-mask">
							<span></span>
						</div>
						
					<?php else: ?>
							<?php the_post_thumbnail('largesoft', ['sizes' => '(min-width: 768px) 100vw, 768px']); ?>
					<?php endif ?>

Thanks a lot, guys. Keep up the good job.