Product Photos and Updating

Where are you seeing blurry photos?

Just fyi 600× 600px is larger then most of your images. for example: https://www.sleeneys.com/wp-content/uploads/2015/08/DSC_1182.jpg

Kadence Themes

Hi! Thanks so much for responding!
The product gallery photos are so blurry on some of my products.
For example:
https://www.sleeneys.com/product/vendome-earrings/
And another:
https://www.sleeneys.com/product/rhinestone-wing-earrings/

And again, the products are going off of the page. I think it is my (one month old Mac) laptop, though. I am having to clear the Safari history EVERY SINGLE TIME I log onto the internet to NOT get the products going off the page/to get the correct size/layout. That must be a setting or something in my laptop. I have never in my life had to clear the history this often just to get the correct-looking page.

So, what sizes do my product images need to be? What does Virtue recommend? I don’t really care, as long as they are clear and look good. I will make them whatever size you recommend. You know much more than I do! ??
Thank you so much!!!!!

Hey,
You are adding this css:

.single-product a img.attachment-shop_thumbnail {
    padding: 3px;
    object-fit: cover;
    width: 200px;
    height: 250px;
}

That is a totally different size then your images. You should remove that.

Thank you! I took that code out. I also spoke with Mac and they told me how to fix the safari issues.
So, what sizes do you recommend I make my product photos, the main one and the smaller ones? 300, 600, and 150 are all too big, aren’t they?
Thank you!
PS- Is there a way that I can change the layout of these product gallery pics? Maybe two/row…??? https://www.sleeneys.com/product/vendome-earrings/

150 is large for thumbnails. I personally like there to be about 4 under my product image but thats all preference you do what you like. If you want larger then do that.

You can add this css if you want two columns:

div.product .product_thumbnails > a {
    width: 50%;
    float: left;
    display: block;
    margin-bottom: 5px;
    text-align: center;
}

Kadence Themes

I agree with you. I like 4, also. Most of my products don’t have more than 5 photos, so that is good.
Thank you SO much! I will add this code above now. THANK YOU!
Is there a way to change this code to decrease the blank space between the columns? I tried 30 and 40 instead of 50, but those didn’t work. The spacing is a little off…

That code sets two columns if your images are large enough they would site right next to each other. If you would like to make it four columns change the width to 25. The css doesn’t set the space between your image sizes do.

Kadence Themes

Thank you so much! Is there any way that I can add CSS to make my product pages look like this, or similar?:
https://www.urbanoutfitters.com/urban/catalog/productdetail.jsp?id=36871622&category=W_APP_DRESSES
OR
https://www.francescas.com/product/greta-paisley-maxi-dress.do?sortby=ourPicks&refType=&from=fn&ecList=7&ecCategory=106127
I looked at several shops and several have small pics next to the main photo. The main thing that I would like is for them to all be evenly distributed and aligned with a little space between them.
For instance, if I have the main pic and 5 smaller pics, I would like 2 of the smaller pics on the top row (under the main pic) and 3 on the second row (under the main pic). Or all 5 to the side. Or wherever, just as long as they have a little space between them and are all equally sized and aligned.
THANK YOU!!

If you want your images to all be the same size like that you have to hardcrop them in your woocommerce settings you have that turned off so they are all random different sizes. That would be your first step: fix your image size for the thumbnails and hardcrop.

Kadence Themes

Thank you! I have these crops on, now. This is my screen after, though. It is still a bad screen. I have cleared my history and am still getting this screen. It makes it difficult to edit when I can’t see what I’m actually doing….

/Users/salinapeek/Desktop/Screen Shot 2015-09-05.png

/Users/salinapeek/Desktop/Screen Shot2 2015-09-05.png

Thank you for your help!

Hey,
Those are urls to images that are on your computer. You are the only one that can see that.

Please use site like this to post a screen shot: https://tinygrab.com/

Kadence Themes

I’m sorry! I think I’ve done this TinyGrab correctly. The link to these screen shots is:
https://tinygrab.com/panel/#
I don’t know why, but for some reason, I get this “wrong” product page where the images are huge and everything is going off the page. This is where there are menu titles at the bottom that should not be there at all. This only happens when I’m signed in. For instance, if you signed in to my account, you would see these bad pages. When I clear my history, they go away, back to the correct screen. But I should not have to clear my history every single time I log in.
Any ideas? I’ve spoken with Mac and my host at length about this…
Thank you!

Hey,
That is a link to tinygrab you would need to link to the photos through there share option.

Kadence Themes

Ok, I think I have it now.
https://grab.by/KdKe Good, what it should look like.

https://grab.by/KdK6 Good.

https://grab.by/KdK4 Bad.

https://grab.by/KdK0 Bad.

https://grab.by/KdJW Bad.

I hope this works. Thanks for helping me!!