Adding video to product images

Highlighted
New Member
8 0 0

Hi, 

I'm using Boost theme and trying to add video. I've followed https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video but I've got a nested loop and I can't figure out how to fix it. Right now, if I include for loop in media and product-template  each product image is repeating 5 times (e.g. for five total images ) before the video shows up as the last image. If I remove the for loop from the media.liquid snippet (for image in products.image), I only get the video and no images. I'm including the media.liquid  as well as the loop currently on the product-template. 

{% case media.media_type %}
{% when 'image' %}
<div class="product-detail__images">
    {% for image in product.images %}
    <div>
        <a href="{{ image.src | img_url: 'master' }}" 
data-product-single-thumbnail
data-image-w="{{ image.width }}" data-image-h="{{ image.height }}"
data-image-index="{{ forloop.index0 }}"
class="global-border-radius"> {% include 'responsive-image', image: image %} </a> </div> {% endfor %} </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 %}
<div class="grid__item five-twelfths large-down--one-half small-down--one-whole">
         	
          		{% for media in product.media %}
          		{% include 'media' %}
    			{% endfor %}
 </div>

Really appreciate any help!

Best,

Sharon

0 Likes