Question

我试图通过alt文本为产品页面上的图像插入视频，但仍然卡住了。我使用的是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: '&amp;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">&#xe601;</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">&#xe600;</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 %}

Answer 1

{% for image in product.images %}
    {% if image.alt contains 'youtube' %}
        <iframe width="560" height="315" src="{{ image.alt }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    {% else %}
        {% comment %} display image or whatever {% endcomment %}
    {% endif %}
{% endfor %}

此代码可在默认的Shopify主题首次亮相上正常工作。

我看过您的网页，它确实包含有效的iframe代码。因此，您正在使用的代码可以正常工作，但是视频在滑块内部呈现，您看不到。因此，只需更改代码中输出IFRAME代码的位置并调整所需的CSS。

是否可以在Shopify产品页面上使用替代文字添加视频

1 个答案: