भाषा का चयन करें
अंग्रेज़ी
अरबी भाषा
सरलीकृत चीनी)
हिंदी
स्पेनिश
फिलिपिनो
{%- comment -%} `tag_name` से आरंभिक और अंतिम रिक्त स्थान निकालें। {%- endcomment -%} {%- assign tag_name = tag_name | strip -%} {%- comment -%} `tag_name: ''` केस को संभालें। {%- endcomment -%} {%- if tag_name and tag_name.size < 1 -%} {%- assign tag_name = false -%} {%- endif -%} {%- if tag_name -%} <{{ tag_name }} {{- attrs | to_attrs -}} {{- अतिरिक्त_attrs -}} {%- अगर self_closing == सत्य -%} {{- ' /' -}} {%- endif -%} > {%- endif -%} {%- जब तक self_closing == सत्य -%} {%- ifslot -%} {%- स्लॉट -%} {%- अन्यथा -%} {{- inner_html -}} {%- endifslot -%} {%- अगर tag_name -%} {%- endif -%} {%- endunless -%} {%- comment -%} यह घटक एक `img` टैग या एक `div style="background-..."` उत्पन्न कर सकता है।
{%- endcomment -%} {%- असाइन is_global_asset = is_global_asset | डिफ़ॉल्ट: false -%} {%- अगर bg -%} {%- टिप्पणी -%} पृष्ठभूमि छवि {%- endcomment -%} {%- असाइन tag_name = tag_name | डिफ़ॉल्ट: 'div' -%} {%- असाइन self_closing = self_closing | डिफ़ॉल्ट: false -%} {%- टिप्पणी -%} हम स्वयं विशेषताओं को प्रस्तुत करते हैं और `style` को फ़िल्टर करते हैं। {%- endcomment -%} {%- असाइन attr_list = attrs | to_attrs: सूची: सत्य -%} {%- कैप्चर अतिरिक्त_attrs -%} {%- टिप्पणी -%} संदर्भ से विशेषताओं को शामिल करें। {%- endcomment -%} {%- for attr in attr_list -%} {%- unless attr[0] == 'style' -%} {{- ' ' -}} {{- attr[0] -}} {%- if attr[1].size > 0 -%} ="{{- attr[1] -}}" {%- endif -%} {%- endunless -%} {%- endfor -%} {{- ' ' -}} style=" {%- comment -%} पृष्ठभूमि शैलियों को प्रस्तुत करें। यदि हमें कोई छवि नहीं मिली तो src का उपयोग करें। {%- endcomment -%} {%- असाइन has_bg_image = false -%} {%- असाइन has_bg_size = false -%} {%- असाइन has_bg_position_x = false -%} {%- असाइन has_bg_position_y = false -%} {%- असाइन has_bg_repeat = false -%} {%- for prop in bg -%} {%- case prop[0] -%} {%- when 'image' -%} {%- असाइन has_bg_image = true -%} {%- when 'size' -%} {%- असाइन has_bg_size = true -%} {%- when 'position' -%} {%- असाइन has_bg_position_x = true -%} {%- असाइन has_bg_position_y = true -%} {%- when 'position-x' -%} {%- असाइन has_bg_position_x = true -%} {%- when 'स्थिति-y' -%} {%- असाइन has_bg_position_y = सत्य -%} {%- जब 'दोहराएँ' -%} {%- असाइन has_bg_repeat = सत्य -%} {%- endcase -%} पृष्ठभूमि-{{- prop[0] -}}: {{- prop[1] -}}; {%- endfor -%} {%- जब तक has_bg_image -%} पृष्ठभूमि-छवि: url('{{- src | asset_url: वैश्विक: is_global_asset -}}'); {%- endunless -%} {%- जब तक has_bg_size -%} पृष्ठभूमि-आकार: कवर; {%- endunless -%} {%- जब तक has_bg_position_x -%} पृष्ठभूमि-स्थिति-x: केंद्र; {%- endunless -%} {%- जब तक has_bg_position_y -%} पृष्ठभूमि-स्थिति-y: केंद्र; {%- endunless -%} {%- unless has_bg_repeat -%} background-repeat: no-repeat; {%- endunless -%} {%- comment -%} शैली विशेषता से कोई भी शैली जोड़ें। {%- endcomment -%} {{- attrs.style -}} " {%- endcapture -%} {%- comment -%} Attrs हटाएँ ताकि हम उन्हें दो बार रेंडर न करें। {%- असाइन ग्रुप_एट्रिब्यूट्स = ग्रुप.एट्रिब्यूट्स | मर्ज_प्रॉप्स: क्लास: 'लिस्टकार्ड__ग्रुप' -%} {%- असाइन टैग_नाम = 'div' -%} {%- अगर कोलैप्सिबल है -%} {%- असाइन टैग_नाम = 'विवरण' -%} {%- एंडिफ -%} <{{ टैग_नाम }} {{ ग्रुप_एट्रिब्यूट्स | टू_एट्रिब्यूट्स }}> {% जब तक हेडलाइन == गलत या ग्रुप.हेडलाइन == शून्य या ग्रुप.हेडलाइन.आकार == 0 %} {% अगर कोलैप्सिबल है %} {% अंत अगर %} {{ समूह.शीर्षक }} {% यदि संक्षिप्त हो सके %} {% endif %} {% endunless %} {% for item in group.cards %} {%- include 'cardlist/listcard/item' -%} {% endfor %} {% जब तक कि group.group_button_link == nil या group.cards.size < 2 % न हो} {{ समूह.group_button_label }} {%अंतहीन%} {% assign card_count = forloop.index %}
{%- capture curr_class -%}
listcard__card
{%- unless item.id == nil -%}
{{- ' ' -}} listcard__card--{{ item.id }}
{%- endunless -%}
{%- unless card_class == nil or card_class.size == 0 -%}
{{- ' ' -}} listcard__card--{{ card_class }}
{%- endunless -%}
{%- endcapture -%}
{%- assign card_attrs = item.attrs | merge_props: class: curr_class -%}
{% if singlelink %}
{%- assign card_attrs = card_attrs | merge_props: href: item.ctas[0].link -%}
{% endif %}
{% if linkcard %}<a {{ card_attrs | to_attrs }}>{% elsif singlelink %}<a {{ card_attrs | to_attrs }}>{% else %}<div {{ card_attrs | to_attrs }}>{% endif %}
{%- unless headline == false or item.headline == nil or item.headline.size == 0 -%}
<h2 class="listcard__card-headline">{{ item.headline }}</h2>
{%- endunless -%}
{% unless subheadline == false or item.subheadline == nil or item.subheadline.size == 0 %}
<h3 class="listcard__card-subheadline">{{ item.subheadline }}</h3>
{% endunless %}
{% unless images == false or item.images == nil or item.images.size == 0 %}
{% if compare == true %}
<div class="listcard__card-images">
<div class="listcard__comparison comparison comparison--popup">
<figure style="background-image: url('{{ item.compare_img_1 | asset_url }}')">
<a class="listcard__card-image-link listcard__card-image-link--before" href="#view-{{ item.id }}">Before</a>
<div
class="divisor"
style="
background-image: url('{{ item.compare_img_2 | asset_url }}');
clip-path: inset(0 0 0 50%);
">
<a class="listcard__card-image-link listcard__card-image-link--after" href="#view-{{ item.id }}">After</a>
</div>
</figure>
<input type="range" min="0" max="100" value="50" class="slider">
</div>
<div id="view-{{ item.id }}" class="modal-window comparison">
<a href="#" class="modal-close">Close</a>
<div class="modal-window__wrapper">
<figure style="background-image: url('{{ item.compare_img_1 | asset_url }}')">
<span class="listcard__card-image-link listcard__card-image-link--before">Before</span>
<div
class="divisor"
style="
background-image: url('{{ item.compare_img_2 | asset_url }}');
clip-path: inset(0 0 0 50%);
">
<span class="listcard__card-image-link listcard__card-image-link--after">After</span>
</div>
</figure>
<input type="range" min="0" max="100" value="50" class="slider">
</div>
</div>
</div>
{% else %}
{% if legacy %}
<div class="listcard__card-images">
{% for image in item.images %}
{% using image %}
{%- comment -%}
We're adding a class list to the `image` data before `atom/img`.
अगर `attrs.class` पहले से मौजूद है, तो हमारी क्लास सूची बाद में जोड़ी जाएगी।
`कैप्चर` की आवश्यकता है क्योंकि हम `forloop.index` से डेटा का उपयोग कर रहे हैं।
यदि हम गतिशील डेटा के बिना एक स्थिर वर्ग सूची का उपयोग करना चाहते हैं, तो हम इसे इनलाइन कर सकते हैं जैसे: `{%- असाइन attrs = attrs | merge_props: class: "my-static class-list" -%}` {%- endcomment -%} {%- capture class -%} {% if image_link -%} listcard__card-image-linkable listcard__card-image-linkable--{{ forloop.index }} {%- else -%} listcard__card-image listcard__card-image--{{ forloop.index }} {%- endif %} {%- endcapture %} {% if image_link %} {%- असाइन tag_name = 'a' -%} {%- असाइन attrs = attrs | merge_props: href: image_link -%} {% endif %} {%- असाइन attrs = attrs | मर्ज_प्रॉप्स: क्लास: क्लास -%} {% "atom/img" शामिल करें %} {% endusing %} {% if image.modal_img %} बंद करें {% using image %} {%- comment -%} हम `atom/img` से पहले `image` डेटा में एक वर्ग सूची जोड़ रहे हैं।
अगर `attrs.class` पहले से मौजूद है, तो हमारी क्लास सूची बाद में जोड़ी जाएगी।
`कैप्चर` की आवश्यकता है क्योंकि हम `forloop.index` से डेटा का उपयोग कर रहे हैं।
यदि हम गतिशील डेटा के बिना एक स्थिर वर्ग सूची का उपयोग करना चाहते हैं, तो हम इसे इनलाइन कर सकते हैं जैसे: `{%- असाइन attrs = attrs | merge_props: class: "my-static class-list" -%}` {%- endcomment -%} {%- capture class -%} listcard__modal-image listcard__modal-image--{{ forloop.index }} {%- endcapture -%} {%- असाइन attrs = attrs | merge_props: class: class -%} {% include "atom/img" %} {% endusing %} {% endif %} {% endfor %} {% अगर छवि.image_text %} {{छवि.छवि_पाठ}} {% endif %} {% अन्यथा %} {% for image in item.images %} {% using image %} {%- comment -%} हम `atom/img` से पहले `image` डेटा में एक वर्ग सूची जोड़ रहे हैं।
अगर `attrs.class` पहले से मौजूद है, तो हमारी क्लास सूची बाद में जोड़ी जाएगी।
`कैप्चर` की आवश्यकता है क्योंकि हम `forloop.index` से डेटा का उपयोग कर रहे हैं।
यदि हम गतिशील डेटा के बिना एक स्थिर वर्ग सूची का उपयोग करना चाहते हैं, तो हम इसे इनलाइन कर सकते हैं जैसे: `{%- असाइन attrs = attrs | merge_props: class: "my-static class-list" -%}` {%- endcomment -%} {%- capture class -%} {% if image_link -%} listcard__card-image-linkable listcard__card-image-linkable--{{ forloop.index }} {%- else -%} listcard__card-image listcard__card-image--{{ forloop.index }} {%- endif %} {%- endcapture %} {% if image_link %} {%- असाइन tag_name = 'a' -%} {%- असाइन attrs = attrs | merge_props: href: image_link -%} {% endif %} {%- असाइन attrs = attrs | मर्ज_प्रॉप्स: क्लास: क्लास -%} {% "atom/img" शामिल करें %} {% endusing %} {% if image.image_text %} {{छवि.छवि_पाठ}} {% endif %} {% endfor %} {%- अगर item.images[0].modal_img -%} > < बंद करें {% for image in item.images %} {% using image.modal_img %} {%- comment -%} हम `atom/img` से पहले `image` डेटा में एक वर्ग सूची जोड़ रहे हैं।
अगर `attrs.class` पहले से मौजूद है, तो हमारी क्लास सूची बाद में जोड़ी जाएगी।
`कैप्चर` की आवश्यकता है क्योंकि हम `forloop.index` से डेटा का उपयोग कर रहे हैं।
* व्यक्तिगत परिणामों की गारंटी नहीं है और यह व्यक्ति से दूसरे व्यक्ति में भिन्न हो सकते हैं। चित्र में मॉडल हो सकते हैं।