Shopify Media Filters & Tags का Complete Guide in Hindi

Post Views : 362

Introduction

हेलो दोस्तों, आज हम इस post में Shopify Media Filters and Tags के बारेमे जानेगे की हम Shopify theme में product images, collection image, article image या किसी schema settings में image field का इस्तेमाल किया हो तो उसे हम कैसे display करा सकते है Shopify में. Shopify में Media को display करने के लिए tag और Filter available है तो हम इसके बारेमे detail से example के साथ समझेंगे!.

Shopify Media Filters & Tags Complete Guide

Shopify themes में images, videos, और 3D models को handle करने के लिए Shopify ने कई सारे Liquid filters & tags दिए हैं। इनका use करके हम media को optimize, render और SEO friendly बना सकते हैं।
आप निचे दिए गए important filters/tags detail में dekh sakate हैं:

image_url

image_url filter Shopify में image का CDN URL return करता है! जैसे की product.feature_image, collection.feature_image, article.image या किसी भी image object के साथ यह काम करता है!. image_url की अक्सर CSS background या JS logic के लिए जरुरत होती है!.

हम product और collection के लिए कुछ इस तरह से लिख सकते है image url के लिए image_url filter के साथ आपको widht या height parameter specify करना होगा!. यदि दोनों में से कोय भी specified नहीं करते है तो एक error return करता है!.

Example:
Product image URL:

{% if product.featured_image %}
 {{ product.featured_image | image_url: width: 600 }}
{% endif %}

Collection image URL:

{% if collection.featured_image %}
  <div style="background-image: url('{{ collection.featured_image | image_url: width: 1200 }}');"></div>
{% endif %}

image_tag

image_tag filter हमें एक full image ( <img> ) tag generate करके देता है और उस image tag में automatically src, alt, width, height, loading=”lazy” और srcset जैसे attribute बी शामिल होते है!. image content हमारी website के लिए जरुरी और most importanta part होता है क्यों की image SEO accessibility और performance के लिए best practice है!.

Example:

{% if product.featured_image %}
  {{ product.featured_image | image_url: width: 800 | image_tag }}
{% endif %}

img_url

img_url filter image की CDN URL return करता है और उसे हमें article, collection,product, image जैसे object के साथ इस्तेमाल कर सकते है!.
img_url filter वह एक Deprecated है उसकी जगह अब image_url का इस्तेमाल कर सकते है!.

Example:

{{ product | img_url: '480x' }}

media_tag

यह automatically सही HTML tag देता है, depend करता है की media type कोनसा है. Media type जैसे की image के लिए <img> tag और Video के लिए <video> tag और Model के लिए <model-viewer> tag और External video के लिए <iframe> return करता है!. हम media के लिए एक ही filter से सारे media handle कर सकते है!. जिसके लिए अलग-अलग conditions लिखने की जरुरत नहीं है!.

Example:

{% for media in product.media %}
  {{ media | media_tag: class: 'product-media' }}
{% endfor %}

model_viewer_tag

यह filter <model-viewer> element generate करता है और यह सिर्फ 3D models के लिए है!. Customers directly product का 3D view देख सकते है और Engagement और sale बढ़ता है!.

Example:

{% for media in product.media %}
  {% if media.media_type == 'model' %}
    {{ media | model_viewer_tag: camera_controls: true, alt: media.alt }}
  {% endif %}
{% endfor %}

video_tag

यह filter <video> tag generate करता है और वह MP4 जैसे video formats को support करता है!. हम Shopify में hosted videos directly product pages या किसी बी page section use कर सकते है!. जिसमे हम Controls, autoplay, poster image, सब कुछ handle कर सकते है!.

Example:

{% for media in product.media %}
  {% if media.media_type == 'video' %}
    {{ media | video_tag: controls: true, autoplay: false, alt: media.alt }}
  {% endif %}
{% endfor %}