Solved

Debut Slideshow Image "zoomed" and cropped

monkee1202
New Member
5 0 0

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.

Accepted Solution (1)
ChoosiZon
Shopify Partner
416 66 111

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.

Donate
For faster response with a fee pls email to : choositech@outlook.com

View solution in original post

Replies 9 (9)

ChoosiZon
Shopify Partner
416 66 111

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

Donate
For faster response with a fee pls email to : choositech@outlook.com
monkee1202
New Member
5 0 0

Thank you for your response!

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

ChoosiZon
Shopify Partner
416 66 111

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

Donate
For faster response with a fee pls email to : choositech@outlook.com
monkee1202
New Member
5 0 0
{%- 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
Shopify Partner
416 66 111

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

 

Donate
For faster response with a fee pls email to : choositech@outlook.com
ChoosiZon
Shopify Partner
416 66 111

autumn_yellow.jpg

 

 

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.

Donate
For faster response with a fee pls email to : choositech@outlook.com
monkee1202
New Member
5 0 0

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
Shopify Partner
416 66 111

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.

Donate
For faster response with a fee pls email to : choositech@outlook.com
monkee1202
New Member
5 0 0

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!