Shopify Img Url Размер в пользовательском слайдере - PullRequest
Новая
       9

Shopify Img Url Размер в пользовательском слайдере

0 голосов
/ 27 сентября 2018

У меня есть блог shopify, в котором для каждой статьи используется настраиваемая карусель / слайдер.Мне удалось сделать его динамичным, чтобы он перетягивал все теги img для статьи в ползунок с всплывающим миниатюрным меню .

Проблема, с которой я сейчас сталкиваюсь, заключается в применении фильтров img_url shopify к слайду и миниатюре, чтобы я мог автоматически настраивать размеры.

Вот что у меня есть на данный момент: 

<!-- 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 --->

Я пытаюсь что-то сделать с помощью вызова {{src}}, чтобы я мог добавить фильтр размера изображения, например:

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

для слайдов и

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

для миниатюр.

Но это, похоже, не работает.Мне нужно провести рефакторинг, но я понятия не имею, как.Я новичок в шоппинге и ликвиде, так что если у кого-то есть какие-либо отзывы, это будет с благодарностью!

Большое спасибо!

1 Ответ

0 голосов
/ 28 сентября 2018

На данный момент нет способа проверить это, но вы можете сделать что-то вроде этого: 

{% 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 %}
...