Resizing Images With Liquid on Debut Theme

Solved
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 %}
KetanKumar
Shopify Partner
20291 2103 7611

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

0 Likes
KetanKumar
Shopify Partner
20291 2103 7611

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

0 Likes
KetanKumar
Shopify Partner
20291 2103 7611

@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
20291 2103 7611

@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
20291 2103 7611

@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