-
Posts
-
HI
I created my shop and my images on the category and product pages are all different sizes, and I want them to all to be the same size, without cropping the picture. Even if that means some images have to shrink to fit in proscribed “box”, that is fine. Also, some of them it has cropped the picture in half, and on the rollover image, some do not fill the whole box.Here’s an example from my website: http://outtagear.com/product-category/all-gear/tools/ . Also the product pages have different size images like here: http://outtagear.com/product/klymit-inertia-xl-sleeping-pad/ and here: http://outtagear.com/product/teton-tracker-5o-f-sleeping-bag/ .
I know the original images I uploaded are different sizes, so that accounts for the different sizes on the website, but I would think with the global image sizes that I have set would resize them all to the same aspect ratio.
Here’s what I’ve tried to get the same aspect ration/size :
1. Re-sized the images in Settings<Media . Then “Regenerated Thumbnails”
2. “Regenerated All Thumbnails” in Tools<Regen. ThumbnailsHelp! Thanks
I am also having the same issue. I assume this is because the WooCommerce Product Image Sizes need to be adjusted for the theme’s CSS settings.
The defaults are as follows:
Catalog Images: 450 x 450
Single Product Images: 450 x 999
Product Thumbnails: 120 x 120Is there a recommended setting for the Enfold theme? Also I have read that they may need to be adjusted to account for Retina display.
Just ran across the following within config.php in themes/enfold/config-woocommerce:
global $avia_config;
//product thumbnails
$avia_config[‘imgSize’][‘shop_thumbnail’] = array(‘width’=>120, ‘height’=>120);
$avia_config[‘imgSize’][‘shop_catalog’] = array(‘width’=>450, ‘height’=>450);
$avia_config[‘imgSize’][‘shop_single’] = array(‘width’=>450, ‘height’=>999, ‘crop’ => false);
I set the WooCommerce product settings to match and I also made sure that my Images were 450 x 450 and that seems to have helped. Not sure yet if that will work for larger images, but will be testing shortly
Hi!
Thank you for using the theme. I hope you’re doing great.
Make sure that you’re uploading images with the same dimension and ratio to get a nice overall look for the shop page. You can change the thumbnail size on config.php and set the crop settings to false if necessary. Regenerate the thumbnails.
Best regards,
IsmaelThanks for your reply. So if I have to upload them already sized up, what is the point of the size boxes in the theme itself? What purpose do they have? I’m also a photographer and all the photo websites I’ve utilized resize the pictures according to what size/aspect ratio parameters you set. So, I guess I don’t understand how to use Enfold’s, or what their purpose is if I’m doing all the work of resizing myself?
And I don’t understand why I have to set the thumb size in the php file you mentioned if it has the thumbnail size box option in WYSIWYG view? Wouldn’t I just use that?
ThanksHi!
In order to have a uniform image size for the shop page, you need to at least resize the images with the same ratio and dimension. WP crops images on top, side or the bottom without regards on how you want it to look like. You’ll see that a very tall human images will have its head cut off or a part of the legs missing unless you tell wp to set the crop to false. If you set the crop parameter to false, you’ll have some images that are out of proportion. So, in order to have the right thumbnails, you need to at least give wp a resized images in order to have a uniform set of product images. To learn more about image thumbnails, you can refer to this link: http://codex.wordpress.org/Function_Reference/add_image_size
Best regards,
IsmaelHello!
I have the same problem. I’ve tried :
1. Re-sized the images in Settings<Media . Then “Regenerated Thumbnails”
2. “Regenerated All Thumbnails” in Tools<Regen. ThumbnailsAnd when I upload new image, woocommerce makes it the right size. Size is added to the file name, for example http://vkk-journal.ru/wp-content/uploads/bibliotechka-2012-3-301×4301-245×350.jpg. It was 301×430 and became 245×350. Ok. it’s what I need.
But in product page it resizes. For example
http://vkk-journal.ru/store/osnovnoe-o-zaloge-sudebnaya-praktika/
http://vkk-journal.ru/store/kassovyie-operatsii-v-kreditnom-kooperative-kassovaya-distsiplina/I look at The Chrome Developer Tools:
<span class=”image-overlay overlay-type-image” style=”opacity: 0; left: 5px; top: 5px; display: block; height: 426px; width: 298px;”>
<span class=”image-overlay-inside”>
</span>
</span>Why height: 426px; width: 298px;? Where did these dimensions?
Thank you!OK. I fixed the problem. We figured out what was important–its the ratio that is important, not the actual size of the image.
For example if you want all the pictures to be square you would size them all to 400×400, or 800×800 or 120×120, or whatever. If you want vertical rectangle pictures, then an aspect ratio of 600 (height) x 300 (width) or 800×500, etc. Or if you want it horizontal rectangle, then it would be just reversed 800 (height) x 500 (width), or 300×600, etc. It is the relationship of the height x width that matters, not what the actual size (the numbers) are, that is taken care of by the theme itself (Enfold in my case).
So what we wanted was a square ratio. So we set all our different image sizes (featured image, thumbnail, small, medium, large, post, portfolio, etc) in Enfold to the same “aspect ratio” which for us was square (e.g. 650×650, 700×700, 120×120 respectively) .
Then, we resized all our pictures in Photoshop to the maximum size we thought we would use–for us that was 800×800. So every picture was resized to 800×800 (for you PS people, we used an action, much faster :).
Next, we deleted all the images in our media library that we were replacing. Then we uploaded all the new 800×800 images we just created and attached them to the respective products on the product pages. The pictures were resized by the cart according to the use of the picture, so our thumbs were 120×120. The main product image was sized by the cart to 450×450, and the enlarged product image was 600×600.
Now, if we ever want to change those preferences, we can just change setting in Enfold, and then regenerate the images. As long as we’ve kept the same ratio, it will work seamlessly.
You can see how we’ve done on our website here: http://www.outtagear.com .I hope this helps others, Good Luck!
Hi!
@outtagear Thank you for sharing your solution! Let us know if you have any other questions or issuesCheers!
Yigit
- The topic ‘How get product images same size?’ is closed to new replies.