Media filters

Media filters let you get URLs for a product's media.

external_video_tag

Generates an iframe that contains a Vimeo or YouTube video player.

If alt text is set on the video, then the alt text appears in the title attribute of the iframe. If no alt text is set, then the product title appears in the title attribute.

Input

{% if product.featured_media.media_type == "external_video" %}
  {{ product.featured_media | external_video_tag }}
{% endif %}

Output (YouTube)

<iframe 
  frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" 
  src="https://www.youtube.com/embed/neFK-pv2sKY?controls=1&amp;enablejsapi=1&amp;modestbranding=1&amp;playsinline=1&amp;rel=0"
>...</iframe>

Output (Vimeo)

<iframe
  frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen="allowfullscreen"
  src="https://player.vimeo.com/video/506225278?byline=0&amp;controls=1&amp;playsinline=1&amp;title=0"
  title="Alt Text Here"
></iframe>

You can pass HTML attributes as options to add them to the IFrame:

Input

{% if product.featured_media.media_type == "external_video" %}
  {{ product.featured_media | external_video_tag: class: "youtube_video" }}
{% endif %}

Output (YouTube)

<iframe 
  frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" class="youtube_video" 
  src="https://www.youtube.com/embed/neFK-pv2sKY?controls=1&amp;enablejsapi=1&amp;modestbranding=1&amp;playsinline=1&amp;rel=0"
>...</iframe>

external_video_url

Used to set parameters for the external video player rendered by external_video_tag.

Available parameters for YouTube videos

Available parameters for Vimeo videos

The following example changes the color of the YouTube player:

Input

{% if product.featured_media.media_type == "external_video" %}
  {{ product.featured_media | external_video_url: color: "white" |  external_video_tag }}
{% endif %}

Output

<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/neFK-pv2sKY?color=white&amp;controls=1&amp;enablejsapi=1&amp;modestbranding=1&amp;playsinline=1&amp;rel=0">
  ...
</iframe>

The following example plays a Vimeo video muted and on a loop:

Input

{% if product.featured_media.media_type == "external_video" %}
  {{ product.featured_media | external_video_url: loop: "1", muted: "1" |  external_video_tag }}
{% endif %}

Output

<iframe
  frameborder="0"allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen="allowfullscreen"
  src="https://player.vimeo.com/video/506225278?byline=0&amp;controls=1&amp;playsinline=1&amp;title=0&amp;loop=1&amp;muted=1"
  title="Alt Text Here"
></iframe>

img_tag

When used with a model or a video object, the img_tag filter generates an image tag for the media's preview image:

Input

{% if product.featured_media.media_type == "model" %}
  {{ product.featured_media | img_tag }}
{% endif %}

Output

<img src="//cdn.shopify.com/s/files/1/1425/8696/products/b15ddb43cbac45b1ae2685223fa3536d_small.jpg?v=1560284062">

When used with an image object, the filter generates an image tag for the image:

Input

{% if product.featured_media.media_type == "image" %}
  {{ product.featured_media | asset_url | img_tag }}
{% endif %}

Output

<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871" alt="" />

img_url

When used with a media object, the img_url filter generates an image URL for the media's preview image.

The img_url filter should be followed by the image size that you want to use. If you request a size smaller than your original image's dimensions, Shopify will scale the image for you. If you don't include an image size, then the filter returns a small (100x100) image.

Input

{% if product.featured_media.media_type == "video" %}
  {{ product.featured_media | img_url: 500x500 }}
  {{ product.featured_media | img_url }}
{% endif %}

Output

//cdn.shopify.com/s/files/1/1425/8696/products/b15ddb43cbac45b1ae2685223fa3536d_500x500.jpg?v=1560284062
//cdn.shopify.com/s/files/1/1425/8696/products/b15ddb43cbac45b1ae2685223fa3536d_small.jpg?v=1560284062

When used with an image object, the img_url filter returns the URL of the image:

Input

{% if product.featured_media.media_type == "image" %}
  {{ product.featured_media | img_url: 500x500 }}
  {{ product.featured_media | img_url }}
{% endif %}

Output

https://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_500x500.jpeg?v=1459175177
https://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_small.jpeg?v=1459175177

media_tag

Generates an appropriate tag for the media:

Input

{% if product.featured_media.media_type == "model" %}
  {{ product.featured_media | media_tag }}
{% endif %}

Output

<model-viewer src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.usdz" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_small.jpg?v=1560284071" camera-controls="true">
  ...
</model-viewer>

You can also change the size of the media tag's poster image with the image_size option:

Input

{% if product.featured_media.media_type == "model" %}
  {{ product.featured_media | media_tag: image_size: "1024x" }}
{% endif %}

Output

<model-viewer src="https://model3d.shopifycdn.com/models/o/af141f14d08f8d30/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/7874b0738a5c6c3f/stroller.usdz" camera-controls="true" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_1024x.jpg?v=1560875434"></model-viewer>

model_viewer_tag

Generates a Google model viewer component tag for the given 3D model:

Input

{% if product.featured_media.media_type == "model" %}
  {{ product.featured_media | model_viewer_tag }}
{% endif %}

Output

<model-viewer src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.usdz" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_small.jpg?v=1560284071" camera-controls="true">
  ...
</model-viewer>

The model viewer component's attributes can be set by adding options to the filter. By default, the component's alt attribute is set to the media's alt text, the component's poster attribute is set to the media's preview image, and the component's camera_controls attribute is enabled.

The following example sets a new background color for the model viewer component:

Input

{% if product.featured_media.media_type == "model" %}
  {{ product.featured_media | model_viewer_tag: background-color: "#455A64" }}
{% endif %}

Output

<model-viewer background-color="#455A64" src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.usdz" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_small.jpg?v=1560284071" camera-controls="true">
  ...
</model-viewer>

You can also change the size of the model viewer's poster image with the image_size option:

Input

{% if product.featured_media.media_type == "model" %}
  {{ product.featured_media | model_viewer_tag: image_size: "1024x" }}
{% endif %}

Output

<model-viewer src="https://model3d.shopifycdn.com/models/o/af141f14d08f8d30/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/7874b0738a5c6c3f/stroller.usdz" camera-controls="true" ar="true" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_1024x.jpg?v=1560875434"></model-viewer>

video_tag

Generates a video tag:

Input

{% if product.featured_media.media_type == "video" %}
  {{ product.featured_media | video_tag }}
{% endif %}

Output

<video playsinline="true" controls="">
    <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/master.m3u8?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=BIQQpuyEVnyt9HUw4o9QOmQ1z2c=" type="application/x-mpegURL">
    <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/SD-360p.mp4?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=1kEi8GmNIssxVvjyzy7AOuGP-E0=" type="video/mp4">
    <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/SD-480p.mp4?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=8Lt74XmFWP6hOF1WRdqNkDWRm2U=" type="video/mp4">
    <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/HD-720p.mp4?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=vlNXWpvgRT2bghrWovJPrN8w3mc=" type="video/mp4"><p>Sorry html5 video is not supported in this browser</p>
</video>

You can change the size of the video's poster image with the image_size option:

Input

{% if product.featured_media.media_type == "video" %}
  {{ product.featured_media | video_tag: image_size: "1024x" }}
{% endif %}

Output

<video playsinline="true" poster="//cdn.shopify.com/s/files/1/1425/8696/products/dc6b2518bec04c42a7a5239f563d8cb4_1024x.jpg?v=1560875163">
  <source src="https://videos.shopifycdn.com/c/vp/80025272edd14aa1960e61881a1e7d7e/master.m3u8?Expires=1561048057&amp;KeyName=core-signing-key-1&amp;Signature=JXwC7nPWBmTyTjI5_0i-HQCM9Ec=" type="application/x-mpegURL">
  <source src="https://videos.shopifycdn.com/c/vp/80025272edd14aa1960e61881a1e7d7e/HD-720p.mp4?Expires=1561048057&amp;KeyName=core-signing-key-1&amp;Signature=UmSvwHVNWqsb9lX8-eOOK-3x4-g=" type="video/mp4">
  <source src="https://videos.shopifycdn.com/c/vp/80025272edd14aa1960e61881a1e7d7e/SD-480p.mp4?Expires=1561048057&amp;KeyName=core-signing-key-1&amp;Signature=TCJ-rhKIFEwPt1lMXTIm8m-E8NE=" type="video/mp4">
  <img src="//cdn.shopify.com/s/files/1/1425/8696/products/dc6b2518bec04c42a7a5239f563d8cb4_1024x.jpg?v=1560875163">
</video>