Я пытался вставить видео через альтернативный текст для изображений на странице продукта, но все еще застрял. Я использую Grid Theme и поигрался с шаблоном. Вот пример видео, которое я хочу добавить через альтернативный текст.
https://www.beardbrand.com/collections/utility-balm/products/tree-ranger-utility-beard-balm
Я пробовал разные бесплатные темы на shopify, но все равно не работал. Это код, в котором я пытался протестировать текущую тему.
{% if image.alt contains 'youtube' %}
<iframe width="500px" height="500px" src="{{image.alt}}
autoplay=1&showinfo=0&controls=0&rel=0" frameborder="0" allowfullscreen>
</iframe>
{% else %}
<a href="{{ image.src | img_url: product_image_size, scale:
product_image_scale }}" class="text-link product-single__thumbnail
product-single__thumbnail--{{ section.id }}"
{% if enable_zoom %}data-zoom="{{ image.src | img_url:
product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<img class="product-single__thumbnail-image" src="{{ image.src |
img_url: product_thumb_size, scale: product_image_scale }}" alt="{{
image.alt | escape }}">
</a>
{% endif %}
Я также пытался использовать этот код ниже:
<div id="product-flexslider" class="flexslider product_gallery
product-{{product.id }}-gallery
{% if product-images == blank %}product_slider
{% endif %}
{% if settings.product_thumbs == false %}animated fadeInUp {% endif %}">
<ul class="slides">
{% for image in product.images %}
<li data-thumb="{{ image | product_img_url: '1024x1024' }}"
data-title="{% if image.alt contains 'youtube' or image.alt
contains 'vimeo' %}{{ product.title }}
{% else %}
{{ image.alt | escape }}{% endif %}">
{% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}
{% assign src = image.alt | split: 'src="' %}
{% assign src = src[1] | split: '"' | first %}
{% if src contains '?' %}
{% assign src = src | append: '&autoplay=1' %}
{% else %}
{% assign src = src | append: '?autoplay=1' %}
{% endif %}
<div class="video-container {% if image.alt contains 'vimeo' %}
vimeo{% else %}
youtube{% endif %}">
<div>
<a href="{{ src }}" title="{{ product.title | escape }}">
{{ image.alt }}
</a>
</div>
</div>
{% else %}
<a href="{{ image | product_img_url: 'master' }}"
title="{{ image.alt | escape }}">
<img src="{{ image | product_img_url: '1024x1024' }}"
alt="{{ image.alt | escape }}"/>
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
Вот код жидкости для начала изображения продукта.
<div class="product-images
{% if images_layout == 'masonry' %}
product-images-masonry
product-images-masonry-{{ product.images.size }}
{% endif %}"
{% if images_layout == 'masonry' and product.images.size > 1 %}
data-masonry-gallery
{% endif %}>
{% if images_layout == 'masonry' and product.images.size > 1 %}
<div class="product-image-masonry-sizer" data-masonry-image-sizer>
</div>
{% endif %}
{% if images_layout == 'slideshow' %}
<div class="product-main-image">
{% assign main_image = variant.image |
default: product.featured_image %}
{% assign main_image_alt = product.title %}
{% if main_image.alt != blank %}
{% assign main_image_alt = main_image.alt %}
{% endif %}
{% if main_image != blank %}
{% capture attr %}
data-image-id="{{ main_image.id }}"
data-product-main-image
{% endcapture %}
{%
include 'rimg',
img: main_image,
attr: 'data-product-main-image',
lazy: lazy,
size: '1400x',
attr: attr
%}
{% else %}
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if enable_zoom %}
<div class="product-zoom"></div>
{% endif %}
</div>
{% if product.images.size > 1 %}
<div class="product-thumbnails-outer-wrapper">
{% if product.images.size > 4 %}
<span class="product-thumbnails-navigation-previous"></span>
{% endif %}
<div class="product-thumbnails-wrapper">
<div class="product-thumbnails
{% if product.images.size > 4 %}has-side-scroll{% endif %}">
{% for image in product.images %}
<div class="product-thumbnail
{% if mainImage == image %}active{% endif %}">
{% capture attr %}
data-image-id="{{ image.id }}"
{% endcapture %}
{%
include 'rimg',
img: image,
size: '115x',
attr: attr,
lazy: lazy
%}
</div>
{% endfor %}
</div>
</div>
{% if product.images.size > 4 %}
<span class="product-thumbnails-navigation-next"></span>
{% endif %}
</div>
{% endif %}
{% else %}
{%- for image in product.images -%}
{% assign use_large_image = false %}
{% if product.images.size == 2 %}
{% assign use_large_image = true %}
{% elsif forloop.first and use_masonry %}
{% assign use_large_image = true %}
{% endif %}
{% assign image_alt = product.title %}
{% if image.alt != blank %}
{% assign image_alt = image.alt %}
{% endif %}
<div class="product-image {% if use_large_image %}product-image-wide{% endif %}">
{%
include 'rimg',
img: image,
size: '575x',
lazy: lazy,
data-image-id: image.id
%}
</div>
{%- else -%}
<div class="product-image {% if use_large_image %}product-image-wide{% endif %}">
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endfor -%}
{% endif %}