Media & imagery​

Medias can be added to products by merchants, such as images, videos, and YouTube videos. In this tutorial, you will learn how to support product media in your theme.

Resources​

• The media attribute of the product object
• Media helper

Implementing Product Media​

Product media is usually shown on the product page. However, you might want to show product media in other parts of the theme, so it's helpful to build the media display in a snippet for reuse.

To show product media, you might loop through the media attribute of the product object and use the related media helper based on the media type.

Example​

If you want to display product media on the product page, and your product page content is hosted in a product.html section, you might do the following:

• Create a media.html snippet to host your media display.
• Render media.html in your product.html section.

<!-- sections/product.html -->
{{#for product.media as |media|}}
  {{ snippet 'media' media=media }}
{{/for}}

<!-- snippets/media.html -->
{{#case media.media_type}}
  {{#when 'image'}}
    <div style="padding-top: {{ times (divide 1 media.aspect_ratio) 100 }}%;" data-media-id="{{ media.id }}">
      {{ image_tag (image_url media width=2048 height=2048) }}
    </div>
  {{/when}}
  {{#when 'external_video'}}
    <div class="product-media-item"
      style="padding-top: {{ times (divide 1 media.aspect_ratio) 100 }}%;"
      data-media-id="{{ media.id }}"
    >
      {{ external_video_tag media }}
    </div>
  {{/when}}
  {{#when 'video'}}
    <div class="product-media-item" data-media-id="{{ media.id }}">
      {{ video_tag media controls="controls"}}
    </div>
  {{else}}
    <div class="product-media-item"
      style="padding-top: 100%;"
      data-media-id="{{ media.id }}"
    >
      {{ media_tag media }}
    </div>
  {{/when}}
{{/case}}

In the example above, each media type is wrapped in a <div> element with custom and data attributes.

Using Media Preview Images​

Each media type has a preview_image attribute. This can be useful in the following scenarios:

• Product Thumbnails

Product Thumbnails​

If your theme displays thumbnails for each media source on a product, you can use the preview_image attribute of the media object to show each media source's thumbnail.

For example:

{{#if product.media.length > 1 }}
  <div class="thumbnails-box">
    {{#for product.media as |media|}}
      <a data-thumbnail-id="{{ media.id }}">
        {{ image_tag (image_url media.preview_image width=110 height=110) }}
      </a>
    {{/for}}
  </div>
{{/if}}

Using Parameters to Control Video Features​

SHOPLINE-hosted videos can set all HTML5 video attributes when rendered with the Handlebars video_tag or media_tag helper. For example:

• controls - Allow users to control video playback.
• autoplay - Automatically play the video after loading.
• muted - Mute the video's audio.
• loop - Continuously loop the video.

Each parameter is not injected by default, but you can set them to take effect as shown below:

<!-- Autoplay video -->
{{ video_tag media autoplay=true }}
<!-- Loop video -->
{{ video_tag media autoplay=true loop=true }}
<!-- Mute and loop video -->
{{ video_tag media autoplay=true loop=true muted=true }}
<!-- Mute, loop video, and allow user control -->
{{ video_tag media autoplay=true loop=true muted=true controls=true }}