Blurry product images in Dawn theme

Solved
rusinov
Tourist
14 0 3

Hey guys, I'm having issues where my product images are very blurry on the front end. They are fine when I preview them on the back end. Start happening after I've switched to the new Dawn theme. Images that I've uploaded are 1000px +, but site displaying them at half of that. Is there a way to fix that? Site: sapandbark.com

Thanks!

sapnadbark.com
Replies 35 (35)
rusinov
Tourist
14 0 3

Removing div's eliminates all product's images from the product page or featured product modules. Doesn't affect collection thumbnails.

sapnadbark.com
HamishDavisonIC
Explorer
52 6 42
    width="1100"
    height="{{ 1100 | divided_by: media.preview_image.aspect_ratio | ceil }}"
    data-media-id="{{ media.id }}"
    {% if variant_image %}class="product__media-item--variant"{% endif %}

Try playing with the numbers here

 

 

rusinov
Tourist
14 0 3

Not it.

sapnadbark.com
vccreative
New Member
5 0 0

Any reply back on this on Github?

HamishDavisonIC
Explorer
52 6 42

Just been trying to 30 minutes can't work it out - there seems to be two parts of the code which need to be changed though

rusinov
Tourist
14 0 3

@vccreative  Nothing on Git at all. Is there any way to bump it up in priority somehow? Pretty major issue I think, considering a lot of people may use dropship sites like Prihtful, so all of those generated images (1000x1000) will be blurry in the Dawn theme. I've tried everything I could but still cant understand why it's downsizing images that are already small. @HamishDavisonIC thank you for spending time on this!

sapnadbark.com
HamishDavisonIC
Explorer
52 6 42

 

@rusinov last night I did something where I reduced the image size so it wasn't blurry anymore, it was more of an accident and I'll have to find out how I actually did it but would this solve your problem? It is still bigger than the thumbnail image 

rusinov
Tourist
14 0 3

I dont 100% understand what you are saying bud. I've mentioned somewhere above that I was able to make thumbnails to look ok by deleting part of the code (it has a screenshot of what I've deleted), but when you click on the product image to view it larger (modal) it's hella blurry. Of course randomly deleting part of the code is not a solution either.

sapnadbark.com
HamishDavisonIC
Explorer
52 6 42

@rusinov Try swapping to the other Dawn option, seems to have solved it for me

 

HamishDavisonIC_0-1631910915750.png

 

rusinov
Tourist
14 0 3

So I was able to solve it by getting the updated theme and pulling a code from a few files:

rusinov_0-1631911041880.png

Not sure which one did the trick, but it's better now.

 

sapnadbark.com