悩む人・Media filtersにはどんなのがあるの？
・Media filtersの種類と使い方が知りたい！
- Media filtersとは
- Media filtersの使い方
Shopifyにはテーマ開発をスムーズに進め、カスタマイズの幅を広げるために様々なフィルターが用意されています。
そのフィルターの一つ「Media filters」は商品画像や動画などを表示する際に使える便利なフィルターで、マスターすれば商品の魅力を最大限伝えられるようになります。
ということで今回はShopifyで使えるMedia filtersの種類と使い方について解説していきます。
本記事を参考にすれば、Media filtersの使い方がわかりより商品の魅力が伝わるテーマカスタマイズができるようになります。
本記事はShopifyの公式リファレンスを参照しています。
Media filtersとは
Media filtersとは、商品に設定している画像や動画などのメディアのURLを返却するフィルターのことです。
Media filtersの種類
Shopifyで使えるMedia filtersは以下の7つです。
以下でそれぞれの使い方を解説していきます。
Media filtersの使い方
Media filters7つの使い方を解説していきます。
①external_video_tag
external_video_tagは、YouTubeやVimeoを含んだiframeを生成します。
external_video_tagを使用する場合、ビデオメディアにaltテキストが設定されている場合は、iframeのタイトル要素として出力されます。
反対にaltテキストを設定していない場合は、タイトル要素に商品名が入ります。
external_video_tagの記述例と出力結果は以下の通りです。
{% if product.featured_media.media_type == "external_video" %}
{{ product.featured_media | external_video_tag }}
{% endif %}
//出力：
<iframe
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"
src="https://www.youtube.com/embed/neFK-pv2sKY?controls=1&enablejsapi=1&modestbranding=1&playsinline=1&rel=0"
>...</iframe>HTML要素も付与できる
external_video_tagを使う場合、オプションでHTML要素の指定しiframeに適用することができます。
例えば以下のように「class:XXX」と指定した場合はCSSで指定しているクラスのスタイルがiframe適用されます。
{% if product.featured_media.media_type == "external_video" %}
{{ product.featured_media | external_video_tag: class: "youtube_video" }}
{% endif %}
//出力：
<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&enablejsapi=1&modestbranding=1&playsinline=1&rel=0"
>...</iframe>②external_video_url
external_video_urlは、上記のexternal_video_tagで描写されるビデオプレーヤーにパラメータをセットする際に用います。
YouTubeを埋め込み時に使えるパラメータはこちらをご覧ください。
external_video_urlの記述例と出力結果は以下の通りです。
{% if product.featured_media.media_type == "external_video" %}
{{ product.featured_media | external_video_url: color: "white" | external_video_tag }}
{% endif %}
//出力：
<iframe
frameborder="0"
allow="accelerometer;
autoplay; encrypted-media;
gyroscope; picture-in-picture"
allowfullscreen="allowfullscreen"
src="https://www.youtube.com/embed/neFK-pv2sKY?color=white&controls=1&enablejsapi=1&modestbranding=1&playsinline=1&rel=0"
>
...
</iframe>
トマトソース上記の例であれば、「color: “white”」と指定しているためYouTubeプレーヤーの色が変化します。
③img_tag
img_tagは、modelやvideoオブジェクトと一緒に使うと、メディアのプレビュー画像タグを生成します。
modelオブジェクトについて詳しくは、こちらをご覧ください。
img_tagの記述例と出力結果は以下の通りです。
{% if product.featured_media.media_type == "model" %}
{{ product.featured_media | img_tag }}
{% endif %}
//出力：
<img src="//cdn.shopify.com/s/files/1/1425/8696/products/b15ddb43cbac45b1ae2685223fa3536d_small.jpg?v=1560284062">ちなみに、imageオブジェクトと一緒に使うと通常通りimageタグを生成します。
{% if product.featured_media.media_type == "image" %}
{{ product.featured_media | asset_url | img_tag }}
{% endif %}
//出力：
<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871" alt="" />④img_url
img_urlは、mediaオブジェクトに使うとプレビュー画像の画像URLを生成します。
img_urlにはサイズパラメータを渡して大きさの指定などもできるので、img_urlなど画像フィルターについて詳しくは以下の記事をご覧ください。
img_urlの記述例と出力結果は以下の通りです。
{% if product.featured_media.media_type == "video" %}
{{ product.featured_media | img_url: 500x500 }}
{{ product.featured_media | img_url }}
{% endif %}
//出力：
//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一つ注意なのは、img_urlは先ほどのimg_tagとは違いプレビュー画像URLを生成し返却していることです。
トマトソースimgタグは返却されないので注意です！
またimg_urlをimageオブジェクトに付与した場合は、画像のURLが返却されます。
⑤media_tag
media_tagは、メディアに適したタグを生成します。
media_tagの記述例と出力結果は以下の通りです。
