Solved

Resizing Images With Liquid on Debut Theme

greevesh
Excursionist
15 0 6

I know Shopify has their own documentation on this but I'm still unable to resize my article images into the aspect ratios I want to.

 

In my blog.template.liquid file, I have this line of code -

 

{%- assign img_url = article.image | img_url: '400x400' | replace: '_1x1.''_{width}x.' -%}
 
So, shouldn't it resize all images I bring into 400x400?
 
This is the chunk of code where all the magic should be happening. I think something in there is overriding what I want to achieve -
 
{% if article.image %}
              {% capture img_id %}ArticleImage-{{ article.image.id }}{% endcapture %}
              {% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{% endcapture %}
              {%- assign img_url = article.image | img_url: '400x400' | replace: '_1x1.''_{width}x.' -%}

              
              <div id="{{ img_wrapper_id }}" class="article__grid-image-wrapper js">
                <div class="article__grid-image-container" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;" data-image-loading-animation>
                  <img id="{{ img_id }}"
                      class="article__grid-image lazyload"
                      data-src="{{ img_url }}"
                      data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                     
                      data-sizes="auto"
                      alt="">
                </div>
              </div>
              <noscript>
                <div class="article__grid-image-wrapper">
                  {{ article | img_url: '345x345'scale: 2 | img_tag: article.title'article__grid-image' }}
                </div>
              </noscript>
            {% endif %}
Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@greevesh 

great thanks for proper URL

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

 

.article__grid-image-container {
    padding-top: 100% !important;
}
.article__grid-image-container img {
    height: 100%;
    object-fit: cover;
}

After this code view

KetanKumar_0-1623816481478.png

 

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 19 (19)

KetanKumar
Shopify Partner
36839 3635 11972

@greevesh 

sorry for any issue please img url master tag

https://shopify.dev/docs/themes/liquid/reference/filters/url-filters

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
greevesh
Excursionist
15 0 6

Sorry. What do you mean by this?

 

Can you provide a code example?

KetanKumar
Shopify Partner
36839 3635 11972

@greevesh 

can you please update this 

{%- assign img_url = article.image | img_url: 'master' | replace: '_1x1.', '_{width}x.' -%}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
greevesh
Excursionist
15 0 6

I changed that snippet import to 'master' but nothing changed.

KetanKumar
Shopify Partner
36839 3635 11972

@greevesh 

if possible to share store url and issue images?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
greevesh
Excursionist
15 0 6

The site's not live yet. 

 

It's basically just three images that are different sizes. I want them all to be the same.

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@greevesh 

oh sorry, give me store preview url so i will check and give your proper code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
greevesh
Excursionist
15 0 6
KetanKumar
Shopify Partner
36839 3635 11972

@greevesh 

thanks for it 

bt your store password protect.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
greevesh
Excursionist
15 0 6

Password - rubrao

KetanKumar
Shopify Partner
36839 3635 11972

@greevesh 

great thanks can you please mark issue part so i will give you proper code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
greevesh
Excursionist
15 0 6

What do you mean?

KetanKumar
Shopify Partner
36839 3635 11972

@greevesh 

oh sorry for that i mean can you please share issue image so i will give you proper code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
greevesh
Excursionist
15 0 6

The issue is that the images aren't the same size. I want them to be the same size. 

 

Can you look at my code, please?Capture.PNG

KetanKumar
Shopify Partner
36839 3635 11972

@greevesh 

thanks for clear bt sorry i can't see that look i have see this 

KetanKumar_0-1623815806506.png

 

can you please show me gird view 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@greevesh 

great thanks for proper URL

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

 

.article__grid-image-container {
    padding-top: 100% !important;
}
.article__grid-image-container img {
    height: 100%;
    object-fit: cover;
}

After this code view

KetanKumar_0-1623816481478.png

 

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
greevesh
Excursionist
15 0 6

Thank you! 🙂

KetanKumar
Shopify Partner
36839 3635 11972

@greevesh 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing