Lahat ng Larawan ng Serbisyo
Pagkarga
{%- comment -%} Alisin ang nangunguna at sumusunod na whitespace mula sa `tag_name`. {%- endcomment -%} {%- assign tag_name = tag_name | strip -%} {%- comment -%} Pangasiwaan ang `tag_name: ''` case. {%- endcomment -%} {%- if tag_name at tag_name.size < 1 -%} {%- assign tag_name = false -%} {%- endif -%} {%- if tag_name -%} <{{ tag_name }} {{- attrs | to_attrs -}} {{- additional_attrs -}} {%- if self_closing == true -%} {{- ' /' -}} {%- endif -%} > {%- endif -%} {%- maliban kung self_closing == true -%} {%- ifslot -%} {%- slot -%} {%- else -%} {{- inner_html -}} {%- endifslot -%} {%- if tag_name -%} {%- endif -%} {%- endunless -%}{%- comment -%} Ang component na ito ay maaaring makabuo ng `img` tag o isang `div style="background-..."`.
{%- endcomment -%} {%- assign is_global_asset = is_global_asset | default: false -%} {%- if bg -%} {%- comment -%} Larawan sa background {%- endcomment -%} {%- assign tag_name = tag_name | default: 'div' -%} {%- assign self_closing = self_closing | default: false -%} {%- comment -%} Kami mismo ang nagre-render ng mga attr at sinasala ang `style`. {%- endcomment -%} {%- assign attr_list = attrs | to_attrs: list: true -%} {%- capture additional_attrs -%} {%- comment -%} Isama ang mga attribute mula sa konteksto. {%- endcomment -%} {%- para sa attr sa attr_list -%} {%- maliban kung attr[0] == 'style' -%} {{- ' ' -}} {{- attr[0] -}} {%- kung attr[1].size > 0 -%} ="{{- attr[1] -}}" {%- endif -%} {%- endless -%} {%- endfor -%} {{- ' ' -}} style=" {%- comment -%} I-render ang mga estilo ng bg. Gamitin ang src kung wala tayong nakuhang imahe. {%- endcomment -%} {%- magtalaga ng has_bg_image = false -%} {%- magtalaga ng has_bg_size = false -%} {%- magtalaga ng has_bg_position_x = false -%} {%- magtalaga ng has_bg_position_y = false -%} {%- magtalaga ng has_bg_repeat = false -%} {%- para sa prop sa bg -%} {%- case prop[0] -%} {%- kapag 'imahe' -%} {%- magtalaga ng has_bg_image = true -%} {%- kapag 'size' -%} {%- magtalaga ng has_bg_size = true -%} {%- kapag 'position' -%} {%- magtalaga ng has_bg_position_x = true -%} {%- kapag 'position-y' -%} {%- magtalaga ng has_bg_position_y = totoo -%} {%- kapag 'ulitin' -%} {%- magtalaga ng has_bg_repeat = totoo -%} {%- endcase -%} background-{{- prop[0] -}}: {{- prop[1] -}}; {%- endfor -%} {%- maliban kung has_bg_image -%} background-image: url('{{- src | asset_url: global: is_global_asset -}}'); {%- endless -%} {%- maliban kung has_bg_size -%} background-size: cover; {%- endless -%} {%- maliban kung has_bg_position_x -%} background-position-x: center; {%- endless -%} {%- maliban kung has_bg_position_y -%} background-position-y: center; {%- endundless -%} {%- unless has_bg_repeat -%} background-repeat: no-repeat; {%- endundless -%} {%- comment -%} Magdagdag ng anumang mga estilo mula sa katangian ng estilo. {%- endcomment -%} {{- attrs.style -}} " {%- endcapture -%} {%- comment -%} Alisin ang mga attrs para hindi natin ito ma-render nang dalawang beses. {%- endcomment -%} {%- magtalaga ng mga attrs = nil -%} {%- else -%} {%- komento -%} Normal na tag ng img {%- endcomment -%} {%- magtalaga ng tag_name = 'img' -%} {%- magtalaga ng self_closing = true -%} {%- kumuha ng additional_attrs -%} {%- kung srcset.size > 0 -%} {{- ' ' -}} srcset="{{ srcset }}" {%- endif -%} {%- kung sizes.size > 0 -%} {{- ' ' -}} sizes="{{ sizes }}" {%- endif -%} {{- ' ' -}} alt="{{ alt }}" {{- ' ' -}} src="{{ src | asset_url: global: is_global_asset }}" {%- endcapture -%} {%- endif -%} {%- isama ang 'atom/elemento', tag_name: tag_name, self_closing: self_closing, additional_attrs: additional_attrs -%}{%- assign group_attrs = group.attrs | merge_props: class: 'listcard__group' -%} {%- assign tag_name = 'div' -%} {%- if collapsible -%} {%- assign tag_name = 'details' -%} {%- endif -%} < {{ tag_name }} {{ group_attrs | to_attrs }}> {% maliban kung headline == false o group.headline == nil o group.headline.size == 0 %} {% if collapsible %} {% endif %} {{ group.headline }} {% kung na-collapsible %} {% endif %} {% endunless %} {% para sa item sa group.cards %} {%- isama ang 'cardlist/listcard/item' -%} {% endfor %} {% maliban kung group.group_button_link == nil o group.cards.size < 2 %} {{ group.group_button_label }} {% endunless %}{% 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`.
Kung umiiral na ang `attrs.class`, idaragdag ang aming listahan ng klase pagkatapos.
Kailangan ang `capture` dahil gumagamit kami ng data mula sa `forloop.index`.
Kung gusto nating gumamit ng constant class list na walang dynamic data, magagawa natin ito nang inline tulad ng: `{%- assign 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 %} {%- assign tag_name = 'a' -%} {%- assign attrs = attrs | merge_props: href: image_link -%} {% endif %} {%- assign attrs = attrs | merge_props: class: class -%} {% isama ang "atom/img" %} {% na nagtatapos sa %} {% kung image.modal_img %} Isara {% gamit ang image %} {%- comment -%} Nagdaragdag kami ng listahan ng klase sa datos ng `image` bago ang `atom/img`.
Kung umiiral na ang `attrs.class`, idaragdag ang aming listahan ng klase pagkatapos.
Kailangan ang `capture` dahil gumagamit kami ng data mula sa `forloop.index`.
Kung gusto nating gumamit ng constant class list na walang dynamic data, magagawa natin ito nang inline tulad ng: `{%- assign attrs = attrs | merge_props: class: "my-static class-list" -%}` {%- endcomment -%} {%- capture class -%} listcard__modal-image listcard__modal-image--{{ forloop.index }} {%- endcapture -%} {%- assign attrs = attrs | merge_props: class: class -%} {% include "atom/img" %} {% endusing %} {% endif %} {% endfor %} {% kung ang imahe.image_text %} {{image.image_text}} {% endif %} {% else %} {% para sa imahe sa item.images %} {% gamit ang imahe %} {%- komento -%} Nagdaragdag kami ng listahan ng klase sa datos ng `image` bago ang `atom/img`.
Kung umiiral na ang `attrs.class`, idaragdag ang aming listahan ng klase pagkatapos.
Kailangan ang `capture` dahil gumagamit kami ng data mula sa `forloop.index`.
Kung gusto nating gumamit ng constant class list na walang dynamic data, magagawa natin ito nang inline tulad ng: `{%- assign 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 %} {%- assign tag_name = 'a' -%} {%- assign attrs = attrs | merge_props: href: image_link -%} {% endif %} {%- assign attrs = attrs | merge_props: class: class -%} {% isama ang "atom/img" %} {% nagtatapos sa %} {% kung image.image_text %} {{image.image_text}} {% endif %} {% endfor %} {%- kung item.images[0].modal_img -%} > < Isara {% para sa imahe sa item.images %} {% gamit ang image.modal_img %} {%- comment -%} Nagdaragdag kami ng listahan ng klase sa datos ng `image` bago ang `atom/img`.
Kung umiiral na ang `attrs.class`, idaragdag ang aming listahan ng klase pagkatapos.
Kailangan ang `capture` dahil gumagamit kami ng data mula sa `forloop.index`.
Kung gusto nating gumamit ng constant class list na walang dynamic data, magagawa natin ito nang inline tulad ng: `{%- assign attrs = attrs | merge_props: class: "my-static class-list" -%}` {%- endcomment -%} {%- capture class -%} listcard__modal-image listcard__modal-image--{{ forloop.index }} {%- endcapture -%} {%- assign attrs = attrs | merge_props: class: class -%} {% include "atom/img" %} {% endusing %} {% endfor %} {%- endif -%} {% endif %} {% endif %} {% endundless %} {% maliban kung teksto == mali o item.text == nil o item.text.size == 0 %} {{item.text}} {% endless %} {% maliban kung ang mga detalye == mali o item.details == nil o item.details.size == 0 %} {% para sa detalye sa item.details %} {{ detalye.label }} {%- kung detalye.link -%} {{ detalye.text }} {%- kung hindi -%} {{ detalye.teksto }} {%- endif -%} {% katapusan para sa %} {% endless %} {% maliban kung ctas == false o item.ctas == nil o item.ctas.size == 0 o linkcard o singlelink%} {% para sa cta sa item.ctas %} {{cta.label}} {% endfor %} {% endless %} {% kung singlelink %} {% para sa cta sa item.ctas %} {{cta.label}} {% katapusan para sa %} {% endif %} {% kung singlelink %} {% elsif linkcard %} {% else %} {% endif %}
* Hindi ginagarantiyahan ang mga indibidwal na mga resulta at maaaring mag-iba mula sa bawat tao. Ang mga imahe ay maaaring maglaman ng mga modelo.