如何解决在首张主题产品页面中添加视频文件
我正在研究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>
这里有人可以帮忙吗?告诉我如何在此处添加视频文件代码。这样我就可以添加所有格式的视频文件。谢谢
解决方法
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 %}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。