Debut Slideshow Image "zoomed" and cropped

[monkee1202]

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:

https://canovawear.com/

Thank you.

[ChoosiZon]

On you Customize console if you set the Slide height to 'Adapt to first image'. it won't be cropped.

[monkee1202]

Thank you for your response!

Anyway, tried that out, nothing changed, images still look blurry and "zoomed"

[ChoosiZon]

---

@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.

[monkee1202]

{%- 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 -%}

[ChoosiZon]

Thanks. This is to confirm the file is not edited.

[ChoosiZon]

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.

[monkee1202]

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!

[ChoosiZon · 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.

[monkee1202]

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!