在首秀主題產品頁面添加視頻文件

Question

我正在研究 Shopify 的首個主題。 在這里我添加了產品圖片的自定義代碼。

 <div class="product-image-left single-itemim lightbox-pop Mobile"> {% if product.images.size > 0 %} {% for image in product.images %} {% capture wrapper_class %} {%- unless featured_image == image -%} hide {%- endunless -%} {% endcapture %} <div data-index="{{ forloop.index }}" id="ImageWrapper-{{ image.id }}" data-image-id="{{ image.id }}" class="responsive-image__wrapper" {{ wrapper_attributes }}> <a href="{{ image | img_url: '1000x' }}" class="image-popup-link"><img id="Image-{{ image.id }}" class="responsive-image__image lazyload {{ image_class }}" src="{{ image | img_url: '800x' }}" data-src="{{ img_url }}" data-widths="[{{ image_widths }}]" data-aspectratio="{{ image.aspect_ratio }}" data-sizes="auto" tabindex="-1" alt="{{ image.alt | escape }}" {{ image_attributes }} > </a> </div> {% endfor %} {%else%} <div class="responsive-image__wrapper "> {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }} </div> {%endif%} </div>

這里有人可以幫忙嗎？ 告訴我如何在這里添加視頻文件代碼。所以我可以添加所有格式的視頻文件。謝謝

Answer 1

Shopify 的頁面上已經有相關教程。

請參閱此處： https : //shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video

編輯：您應該將上面發布的整個代碼替換為

{% for media in product.media %}
  {% include 'media' %}
{% endfor %}

然后將您的代碼移動到media.liquid片段，如下所示：

{% case media.media_type %}
  {% when 'image' %}
    <div class="product-image-left single-itemim lightbox-pop Mobile">
        {% if product.images.size > 0 %}
            {% for image in product.images %}
            {% capture wrapper_class %}
            {%- unless featured_image == image -%}
            hide
            {%- endunless -%}
            {% endcapture %}
            <div data-index="{{ forloop.index }}" id="ImageWrapper-{{ image.id }}" data-image-id="{{ image.id }}" class="responsive-image__wrapper" {{ wrapper_attributes }}>
                <a href="{{ image | img_url: '1000x' }}" class="image-popup-link"><img id="Image-{{ image.id }}"
                                                                                       class="responsive-image__image lazyload {{ image_class }}"
                                                                                       src="{{ image | img_url: '800x' }}"
                                                                                       data-src="{{ img_url }}"
                                                                                       data-widths="[{{ image_widths }}]"
                                                                                       data-aspectratio="{{ image.aspect_ratio }}"
                                                                                       data-sizes="auto"
                                                                                       tabindex="-1"
                                                                                       alt="{{ image.alt | escape }}"
                                                                                       {{ image_attributes }}
                >
                </a>

            </div>

            {% endfor %}
            {% else %}
            <div class="responsive-image__wrapper ">
                {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            </div>
        {% endif %}
    </div>
    {% when 'external_video' %}
    <div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100}}%;" data-media-id="{{ media.id }}">
      {{ media | external_video_tag }}
    </div>
  {% when 'video' %}
    <div class="product-single__media" data-media-id="{{ media.id }}">
      {{ media | video_tag: controls: true }}
    </div>
  {% when 'model' %}
    <div class="product-single__media" style="padding-top: 100%" data-media-id="{{ media.id }}">
      {{ media | model_viewer_tag }}
    </div>
  {% else %}
    <div class="product-single__media" style="padding-top: 100%;" data-media-id="{{ media.id }}">
      {{ media | media_tag }}
    </div>
{% endcase %}