Question

我有一个shopify博客，每篇文章都使用自定义轮播/滑块。我设法使其动态化，以便它将文章的所有img标签拉入slider with a popup thumbnail menu中。

我现在遇到的问题是将shopify's img_url filters应用于幻灯片和缩略图，以便我可以自动调整大小。

这是我到目前为止所拥有的：

<!-- 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' }}"

用于缩略图。

但是它似乎不起作用。我需要重构它，但不知道如何。我是购物和流动的新手，所以如果有人有任何意见，将不胜感激！

非常感谢！

Answer 1

目前无法对其进行测试，但是您可以执行以下操作：

{% 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网址大小

1 个答案: