Media filters

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

external_video_tag

Generates an IFrame that contains a YouTube video player:

Input

{% if product.featured_media.media_type == "external_video" %}
  {{ product.featured_media | 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?controls=1&amp;enablejsapi=1&amp;modestbranding=1&amp;playsinline=1&amp;rel=0">
  ...
</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

<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 YouTube player rendered by external_video_tag.

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>

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>