Image Sizes

[Matt]

Hi Bill,

I just have some concerns regarding the image sizes in the Elite theme. I am little confused how to apply them properly.

I looked at the Elite theme instructions and noted the ones you had posted there (upper right), but I did see in another post that you specified 2000px wide on the Hero images as opposed to 2400px. I’m sure that just allows for those who have the hi-res monitors and such. That’s no big deal as I sized all my to 2400px and besides some cropping they are okay.

My question really deals with the Home Products Widget in conjunctions with WooCommerce Products and Featured Images for products/groups.

I read that you increased the size of your product images to 500×500 with some styling. I actually exported my images at 500×500 just in case I wanted to do the same thing instead of the 300×300. Since they remain square I should be ok. So here’s the kicker. Where do I set the image size for the home products widget? I see in your instructions they are spec’d at 360w x 480h (your demo site shows 360×320). Obviously, my product image of 500×500 is used and therefore crops it in a very odd way. I cannot find where to control (or upload) these independently, if possible. At least if I can get it more square.

Also I noticed the category/product images Woocommerce use for the 150×150 size is horrible. I’m not sure why if I use a higher quality image it looks blurry (like it downsamples it a lot). But when I click on the product or group and the 300×300 image shows it looks fine.

I also would like a good quality preview image when looking at the products. I am assuming trying to find a balance between cropped and a one size fits all image is pretty difficult. I’m pretty much trying to fit landscaped images in a cropped square placeholder and it’s not working out ideally unless I make the image too small or blow it up to fill the entire frame cropping it. Not the best case for artwork.

What’s your thoughts, suggestions, advice? Sorry for the long email. I hope it’s not too confusing. I probably just should have broken it down into several replies.

Thanks!
Matt

Attachments:

1. 

   Screen-Shot-2015-01-12-at-5.47.28-PM.png
   

[Bill Robbins]

Hello Matt,

WordPress image sizes can be a bit crazy. Say there is an image size that’s set in WordPress to be 400 pixels by 600 pixels. When you upload an image larger than that, WordPress will scale it down in size until it reaches either the set height or width. Then it will crop off the other dimension. That way you end up with an image that’s the specified dimensions.

If you upload an image that’s smaller than or equal to one of the dimensions, then it won’t scale it down further, but will crop at that point. If an image is smaller than both dimensions, then no scaling or cropping will occur.

Images are not scaled up in size as part of the upload process. They may be enlarged on the front end of the site as a result of CSS, but the actual image file isn’t blow up.

Those are the ground rules that WordPress is working with when you upload an image.

In Elite, there is an image size that is added for the home page products. It’s set to be 360 pixels wide by 480 pixels tall. So if you want your images to end up square, I would upload a square image that’s 360 pixels in size. That will make sure the entire image is visible and not cropped and also a square.

You can change the image size for the woocommerce images. Inside the WooCommerce settings, I believe it’s in the catalog tab there is a series of fields where you can set the image sizes. You’ll have to run the regenerate thumbnails plugin to affect any images you’ve already uploaded, but that’s where the actual image sizes are set.

Let me know if you have questions or troubles getting those right.

Take care,
Bill

[Matt]

Ok. So if I’ve uploaded all my products at 500×500 (b/c I want a larger preview image for the lightbox gallery) what can I do without having to re-upload all my images at say 360×360 to get them to show up in the home products correctly? Thats a little to small to see the details in the products. It seems like adjusting the home products widget size would be easier. I also tried changing the size of the Woocommerce images, and even used the Regenerate Thumbnails plug-in, but nothing seemed to happen. I don’ know if it take awhile or not, but I did it enough to be able to tell if there was an increase.

Also it there a way to add more padding to the product images in the Shop. There is enough vertical padding, but I have two rows and there isn’t any horizontal space. Sorry this is another question.

Attachments:

1. 

   Screen-Shot-2015-01-14-at-3.23.26-PM.png
   

[Bill Robbins]

Hello Matt,

If you need to change the image size of the home products you can.

1. Go to the Appearance section in your WordPress dashboard and choose Edit.
2. From the list of files on your right, choose images.php
3. Find this line:

   
   add_image_size('home-product', 360, 480, true);
   

   The 360 above is the width and the 480 is the height. You can set those to be what you need them to be.

4. Save your changes.
5. Run regenerate thumbnails again (there is a progress bar as it’s running to let you know where it is).

That will let you change the image size there.

---

You can add in more padding there.

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   .images div.thumbnails img {
   	margin-bottom: 10px;	
   }
   

3. Update your settings.

Bill

[Author]

Posts