Shopify Img Url Size In Custom Slider

Question

I have a shopify blog that uses a custom carousel/slider for each article. I have managed to make it dynamic so that it will pull all the img tags for the article into the slider with a popup thumbnail menu.

The issue I am now having is applying shopify's img_url filters to the slide and thumbnail so I can automatically adjust the sizes.

Here's what I have so far:

<!-- BEGIN SLIDER CODE -->
<div class="slider-pro">
  <div class="sp-slides">

    {% if article.content contains "<img" %}
     {% assign content-src = article.content | split: 'src="' %}
     {% assign content-size = content-src.size | minus:1 %}
     {% for i in (1..content-size) %}
         {% assign src = content-src[i] | split: '"' | first | replace: '//cdn', 'https://cdn';;; | replace: 'http:http://';;;, 'http://';;; | remove: 'https:' %}

         <!-- SLIDE # -->
         <div class="sp-slide">
           <!-- Slide image -->
           <img class="sp-image" src="{{src}}" />
           <!-- Thumbnail image -->
           <img class="sp-thumbnail" src="{{src}}" />
         </div>
         <!-- END SLIDE # -->

     {% endfor %}

     {% else %}

    {% endif %}
  </div>
 </div>
<!-- Slider Buttons (Don't edit!) -->
    Slider button code here....
<!-- End Slider Buttons -->
<!-- END SLIDER CODE --->

Am trying to do something with the {{src}} call so I can add an image size filter, something like:

src="{{ src | article_img_url: '1200x' }}"

for slides and

src="{{ src | article_img_url: '100x100' }}"

for thumbnails.

But it doesnt' seem to work. I need to refactor this, but have no idea how. I'm a newbie to shopify and liquid, so if anyone has any input it would be greatly appreciated!

Thanks so much!

drip drip · Accepted Answer · 2018-09-27T21:04:22

No way to test it at the moment, but you can do something like this:

{% assign thumb_size = '_300x.jpeg' %}
{% if article.content contains "<img" %}
    {% assign content_array = article.content | split: 'src="' %}
    {% for content_item in content_array offset: 1 %}
        {% assign src = content_item | split: '"' | first %}
        {% assign thumbnail = src | replace: '.jpeg', thumb_size %}
        <!-- SLIDE # -->
        <div class="sp-slide">
            <!-- Slide image -->
            <img class="sp-image" src="{{src}}" />
            <!-- Thumbnail image -->
            <img class="sp-thumbnail" src="{{thumbnail}}" />
        </div>
        <!-- END SLIDE # -->
    {% endfor %}
{% endif %}

Shopify Img Url Size In Custom Slider

1 Answers