Question

我成功地使用模式和Shopify Liquid在Shopify中添加了新区块。我添加了一个架构，该架构可以调整图像的宽度，一个在左侧，一个在右侧。我非常接近，但是这里缺少一些东西。style="width:{{img_width}}vw"或图像宽度架构有问题吗？谢谢

两个图像宽度滑块与图像屏幕截图都没有区别。

{% elsif block.type == 'side_by_side' %}
      <div class="container">
        <div class="eight columns image_column">
         {% if block.settings.image-left %}
              <p>
                 {% assign image_left_width = block.settings.image_width %}
                 <img src="{{ block.settings.image-left | img_url: '300x', scale: 2}}" style="width:{{image_left_width}}vw" alt="{{block.settings.image-left.alt}}" class="lazyload transition-in"/>
              </p>    
            {% endif %}
        </div>

        <div class="eight columns image_column">
          {% if block.settings.image-right %}
        <p>
           {% assign image_rigth_width = block.settings.image_width %}            
         <img src =" {{ block.settings.image-right | img_url: '300x', scale: 2}}" style="width:{{image_right_width}}vw" alt="{{block.settings.image-right.alt}}" class="lazyload transition-in" >
        </p>    
        {% endif %}
        </div>
      </div>

图像块架构

{
      "type": "side_by_side",
      "name": "side_by_side",
      "settings": [
        {
          "type": "image_picker",
          "id": "image-left",
          "label": "Image-left"

        },
        {
          "type": "range",
          "id": "image_left_width",
          "label": "Image width",
          "min": 50,
          "max": 100,
          "step": 5,
          "default": 100,
          "unit": "vw"
        },
        {
          "type": "image_picker",
          "id": "image-right",
          "label": "Image-right"
        },
        {
          "type": "range",
          "id": "image_right_width",
          "label": "Image width",
          "min": 50,
          "max": 100,
          "step": 5,
          "default": 100,
          "unit": "vw"
        },
        {
          "type": "select",
          "id": "layout",
          "label": "Layout",
          "default": "left",
          "options": [
            {
              "value": "left",
              "label": "Image on left"
            },
            {
              "value": "right",
              "label": "Image on right"
            }
          ]
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Side by Side Engineering "
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "<p>Pair text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>"
        },
        {
          "type": "select",
          "id": "text_alignment",
          "label": "Text alignment",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "left"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    },

Answer 1

那是因为您要分配一个空值并使用该空值。

{% assign image_left_width = block.settings.**image_width** %}

请注意，在您的架构中，没有id = image_width的元素。您已经具有ID = image_left_width / image_right_width的元素。但是现在，您正在创建一个新的变量image_left_width，并为其分配一个空值。然后，您将图像宽度设置为null值。为什么不跳过“分配”代码呢？即删除该行。喜欢..

 <p>
  <img src="{{ block.settings.image-left | img_url: '300x', scale: 2}}" style="width:{{block.settings.image_left_width}}vw" alt="{{block.settings.image-left.alt}}" class="lazyload transition-in"/>
</p>

如果您仍然想先分配给新变量，请执行此操作。

{% assign image_left_width = block.settings.image_left_width %}

Shopify图像宽度滑块不起作用

1 个答案: