Shopify themes, liquid, logos, and UX
Hi everyone,
Recently i adjusted some features of my store, the slideshow being one of them.
The problem i faced is that the pictures used for it are kinda zoomed and cropped and also blurry, even though they're quite big in size (+4000px x +3000 px).
In the demo version inside the Customize page looks perfect, but on the web page looks different and screwed up.
Store link:
Thank you.
Solved! Go to the solution
This is an accepted solution.
@monkee1202 wrote:Why is that image the master and not the first one? It's just for my personal knowledge lol
Could you please tell me the sizes of the image needed for the slideshow?
According to Inspect Element the image is that small, so you could have made a mistake.
Generally this image should be 2000px wide. But 4000px wide is ok.
On you Customize console if you set the Slide height to 'Adapt to first image'. it won't be cropped.
Thank you for your response!
Anyway, tried that out, nothing changed, images still look blurry and "zoomed"
@monkee1202 wrote:Thank you for your response!
Anyway, tried that out, nothing changed, images still look blurry and "zoomed"
Can you copy your bgset.liquid file under snippets here?
The issue could be there.
{%- if image != blank -%}
{% if image.width > 180 %}{{ image | img_url: '180x' }} 180w {{ 180 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 360 %}{{ image | img_url: '360x' }} 360w {{ 360 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 540 %}{{ image | img_url: '540x' }} 540w {{ 540 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 720 %}{{ image | img_url: '720x' }} 720w {{ 720 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 900 %}{{ image | img_url: '900x' }} 900w {{ 900 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 1080 %}{{ image | img_url: '1080x' }} 1080w {{ 1080 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 1296 %}{{ image | img_url: '1296x' }} 1296w {{ 1296 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 1512 %}{{ image | img_url: '1512x' }} 1512w {{ 1512 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 1728 %}{{ image | img_url: '1728x' }} 1728w {{ 1728 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 1950 %}{{ image | img_url: '1950x' }} 1950w {{ 1950 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 2100 %}{{ image | img_url: '2100x' }} 2100w {{ 2100 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 2260 %}{{ image | img_url: '2260x' }} 2260w {{ 2260 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 2450 %}{{ image | img_url: '2450x' }} 2450w {{ 2450 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 2700 %}{{ image | img_url: '2700x' }} 2700w {{ 2700 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 3000 %}{{ image | img_url: '3000x' }} 3000w {{ 3000 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 3350 %}{{ image | img_url: '3350x' }} 3350w {{ 3350 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 3750 %}{{ image | img_url: '3750x' }} 3750w {{ 3750 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 4100 %}{{ image | img_url: '4100x' }} 4100w {{ 4100 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{{ image | img_url: 'master' }} {{ image.width }}w {{ image.height }}h
{%- endif -%}
Thanks. This is to confirm the file is not edited.
This is the master image you put in the slider.
As you can see the image is quite small.
So when it is resized to bigger when you put into slider, it becomes a little blurry. Imagine the same dots need to fill in larger space.
So the solution is get a larger image. Best the originals, not resize from this image.
Why is that image the master and not the first one? It's just for my personal knowledge lol
Could you please tell me the sizes of the image needed for the slideshow? Because the size of that image are actually quite big, i think it's more than 4000px x 3000px, so i don't get why it's not big enough for the slideshow.
Thanks for your support anyway!
This is an accepted solution.
@monkee1202 wrote:Why is that image the master and not the first one? It's just for my personal knowledge lol
Could you please tell me the sizes of the image needed for the slideshow?
According to Inspect Element the image is that small, so you could have made a mistake.
Generally this image should be 2000px wide. But 4000px wide is ok.
Solved: the problem was that for no defiend reason the images i downloaded, even being 4000px, got downloaded in smaller sizes.
Thank you for the support!
User | RANK |
---|---|
133 | |
91 | |
76 | |
64 | |
53 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022