Ad

Shopify Img Url Size In Custom Slider

- 1 answer

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!

Ad

Answer

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 %}
Ad
source: stackoverflow.com
Ad