{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/themes/sidebars.yaml"},"props":{"codeGuideFiles":[],"dynamicMarkdocComponents":[],"metadata":{"type":"markdown"},"seo":{"title":"Media Tag","description":"Fluid is the open e-commerce platform built for direct-sales."},"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"media-tag"},"children":["Media Tag"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["media_tag"]}," filter turns an image or video into a complete, responsive HTML element. Instead of hand-writing an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<img>"]}," with a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["srcset"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sizes"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loading"]},", or a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<video>"]}," with a poster and playback flags, you pipe the media through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["media_tag"]}," and get correct markup with sensible defaults."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"{{ section.settings.image | media_tag }}\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"text","header":{"controls":{"copy":{}}},"source":"<img\n  src=\"https://cdn.example.com/tr:w-1600,f-auto,q-80/banner.jpg\"\n  srcset=\"https://cdn.example.com/tr:w-400,f-auto,q-80/banner.jpg 400w,\n          https://cdn.example.com/tr:w-800,f-auto,q-80/banner.jpg 800w,\n          https://cdn.example.com/tr:w-1200,f-auto,q-80/banner.jpg 1200w,\n          https://cdn.example.com/tr:w-1600,f-auto,q-80/banner.jpg 1600w\"\n  sizes=\"100vw\"\n  alt=\"\"\n  loading=\"lazy\"\n  decoding=\"async\">\n","lang":"text"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["It builds on the same ImageKit pipeline as ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/themes/image-transformations"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["image_url"]}]}," — every transformation that filter understands is available here too."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"input"},"children":["Input"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["media_tag"]}," accepts the same inputs as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["image_url"]},": an image or video object (such as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["section.settings.image"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["section.settings.bg_video"]},", or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["product.image"]},"), a hash with a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["url"]},"/",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["src"]}," key, or a plain URL string. Image-picker and video-picker settings both resolve to plain URL strings."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The filter decides whether to render an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<img>"]}," or a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<video>"]}," from the media itself:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["A media object whose type is video, ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["or"]}," a URL whose path ends in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".mp4"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".mov"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".webm"]},", or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".m4v"]}," → ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<video>"]}]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Anything else → ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<img>"]}]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"images"},"children":["Images"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"options"},"children":["Options"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Every option is optional. Any option not listed below is emitted verbatim as an HTML attribute (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["class"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-*"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fetchpriority"]},", …), so you can attach whatever the markup needs."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Option"},"children":["Option"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Effect"},"children":["Effect"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sizes"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["100vw"]}," (or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{width}px"]}," if ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]}," set)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sizes"]}," attribute — tell the browser the rendered size."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["widths"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["400,800,1200,1600"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Comma-separated widths used to build the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["srcset"]}," ladder."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["—"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A fixed display width: builds a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["[width, width×2]"]}," retina ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["srcset"]},", sets the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]}," attribute, and defaults ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sizes"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{width}px"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["height"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["—"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["height"]}," attribute (for layout stability)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["quality"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["80"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Image quality, 1–100 (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["q-"]},")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["format"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["auto"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Output format (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["f-"]},"); ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["auto"]}," lets ImageKit negotiate WebP/AVIF."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["crop"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["—"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Focus point: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["top"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bottom"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["left"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["right"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["center"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fo-"]},")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transform"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["—"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A raw ImageKit transform string applied to every variant (see below)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loading"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lazy"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loading"]}," attribute — set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["eager"]}," for above-the-fold images."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alt"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["the image's alt text, else ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alt"]}," attribute."]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["decoding=\"async\""]}," is always emitted."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"fluid-width-default"},"children":["Fluid width (default)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["With no ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["media_tag"]}," emits a width-based ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["srcset"]}," from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["widths"]}," ladder and lets ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sizes"]}," tell the browser which to pick. Set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sizes"]}," to match your layout:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"{{ product.image | media_tag: sizes: '(max-width: 768px) 100vw, 600px', alt: product.title }}\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"fixed-width"},"children":["Fixed width"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]}," when the image renders at a known size. The ladder collapses to that width plus its 2× retina variant, and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sizes"]}," defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{width}px"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"{{ section.settings.logo | media_tag: width: 240, alt: 'Logo' }}\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"text","header":{"controls":{"copy":{}}},"source":"<img\n  src=\"https://cdn.example.com/tr:w-480,f-auto,q-80/logo.png\"\n  srcset=\"https://cdn.example.com/tr:w-240,f-auto,q-80/logo.png 240w,\n          https://cdn.example.com/tr:w-480,f-auto,q-80/logo.png 480w\"\n  sizes=\"240px\" width=\"240\" alt=\"Logo\" loading=\"lazy\" decoding=\"async\">\n","lang":"text"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-widths-and-transforms"},"children":["Custom widths and transforms"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"{{ product.image | media_tag: widths: '300,600,900', quality: 90, crop: 'center', class: 'product__img' }}\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["height"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["quality"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["format"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["crop"]}," map to ImageKit exactly as they do for ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/themes/image-transformations"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["image_url"]}]},". Anything outside those named parameters — crop modes, effects, named presets — goes through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transform"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"{{ product.image | media_tag: transform: 'c-at_max,e-grayscale' }}\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Don't put a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["w-"]}," token in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transform"]}," — width is owned by the filter (it drives the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["srcset"]},"). Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]},"/",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["widths"]}," instead."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"videos"},"children":["Videos"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A video URL renders a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<video>"]},". The source is transcoded to MP4 for broad compatibility and a poster frame is generated automatically from the video's first frame."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"{{ section.settings.bg_video | media_tag: autoplay: true, loop: true, muted: true }}\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"text","header":{"controls":{"copy":{}}},"source":"<video\n  src=\"https://cdn.example.com/clip.mp4?tr=f-mp4\"\n  poster=\"https://cdn.example.com/clip.mp4/ik-thumbnail.jpg\"\n  autoplay loop muted playsinline></video>\n","lang":"text"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"options-1"},"children":["Options"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Option"},"children":["Option"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Effect"},"children":["Effect"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["autoplay"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["off"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Adds the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["autoplay"]}," flag."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loop"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["off"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Adds the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loop"]}," flag."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["muted"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["off"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Adds the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["muted"]}," flag."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["controls"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["off"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Shows the native player controls."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["poster"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["auto (ImageKit thumbnail)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A poster image URL; pass your own to override the generated thumbnail."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["format"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mp4"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["ImageKit video format."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["quality"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["—"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["ImageKit video quality."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transform"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["—"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A raw ImageKit video transform string."]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["playsinline"]}," is added automatically whenever ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["muted"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["autoplay"]}," is set, so autoplaying background videos work on mobile. As with images, any other option (such as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["class"]},") is emitted as an HTML attribute."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"{{ section.settings.promo | media_tag: controls: true, poster: section.settings.promo_poster, class: 'promo__video' }}\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"behavior"},"children":["Behavior"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Only ImageKit media is transformed."]}," If the URL points to a third-party host, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["media_tag"]}," emits a plain ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<img>"]},"/",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<video>"]}," with the original ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["src"]}," and no transform, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["srcset"]},", or generated poster."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Image objects fill in width, height, and alt."]}," When the input carries them (for example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["product.image"]},"), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["media_tag"]}," adds ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]},"/",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["height"]}," for layout stability and uses the image's alt text. The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["srcset"]}," ladder is also capped to the source's intrinsic width, so the filter never requests an upscaled rendition."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Picker settings are plain strings."]}," Image- and video-picker settings have no width/height/alt, so pass ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]},"/",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["height"]},"/",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alt"]}," yourself if you need them."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Output is escaped."]}," All attribute values are HTML-escaped, and event-handler attribute names (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onerror"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onload"]},", and the like) are dropped — a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["media_tag"]}," can never inject script."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Blank input renders nothing."]}," If the media is empty, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["media_tag"]}," returns an empty string."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples"},"children":["Examples"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Above-the-fold hero image (skip lazy loading, hint high priority):"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"{{ section.settings.hero | media_tag: loading: 'eager', fetchpriority: 'high', sizes: '100vw', class: 'hero__img' }}\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Product card thumbnail at a fixed size:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"{{ product.image | media_tag: width: 400, alt: product.title, class: 'card__img' }}\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Autoplaying background video:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"{{ section.settings.bg_video | media_tag: autoplay: true, loop: true, muted: true, class: 'section__bg' }}\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"see-also"},"children":["See also"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/themes/image-transformations"},"children":["Image Transformations"]}," — the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["image_url"]},"/",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["img_url"]}," filters and the full ImageKit transform vocabulary"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/themes/developer-guide"},"children":["Build Fluid Themes"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/themes/theme-variables"},"children":["Template Variables"]}]}]}]},"headings":[{"value":"Media Tag","id":"media-tag","depth":1},{"value":"Input","id":"input","depth":2},{"value":"Images","id":"images","depth":2},{"value":"Options","id":"options","depth":3},{"value":"Fluid width (default)","id":"fluid-width-default","depth":3},{"value":"Fixed width","id":"fixed-width","depth":3},{"value":"Custom widths and transforms","id":"custom-widths-and-transforms","depth":3},{"value":"Videos","id":"videos","depth":2},{"value":"Options","id":"options-1","depth":3},{"value":"Behavior","id":"behavior","depth":2},{"value":"Examples","id":"examples","depth":2},{"value":"See also","id":"see-also","depth":2}],"frontmatter":{"seo":{"title":"Media Tag"}},"lastModified":"2026-06-30T22:06:34.000Z"},"slug":"/docs/themes/media-tag","userData":{"isAuthenticated":false,"teams":["anonymous"]}}