Galerías
1 para Carillas de preparación mínima - No revelado
carga
{%- comment -%} Elimina los espacios en blanco iniciales y finales de `tag_name`. {%- comentario final -%} {%- asignar nombre_etiqueta = nombre_etiqueta | strip -%} {%- comment -%} Maneja el caso `tag_name: ''`. {%- endcomment -%} {%- if nombre_etiqueta y nombre_etiqueta.tamaño < 1 -%} {%- asignar nombre_etiqueta = false -%} {%- endif -%} {%- if nombre_etiqueta -%} <{{ nombre_etiqueta }} {{- atributos | to_attrs -}} {{- added_attrs -}} {%- if self_closing == true -%} {{- ' /' -}} {%- endif -%} > {%- endif -%} {%- a menos que self_closing == true -%} {%- ifslot -%} {%- slot -%} {%- else -%} {{- inner_html -}} {%- endifslot -%} {%- if tag_name -%} {%- endif -%} {%- endunless -%}{%- comment -%} Este componente puede generar una etiqueta `img` o `div style="background-..."`.
{%- comentario final -%} {%- asignar is_global_asset = is_global_asset | predeterminado: falso -%} {%- if bg -%} {%- comentario -%} Imagen de fondo {%- endcomment -%} {%- asignar nombre_etiqueta = nombre_etiqueta | predeterminado: 'div' -%} {%- asignar cierre_automático = cierre_automático | predeterminado: falso -%} {%- comentario -%} Representamos los atributos nosotros mismos y filtramos `estilo`. {%- endcomment -%} {%- asignar attr_list = attrs | to_attrs: lista: verdadero -%} {%- capturar atributos_adicionales -%} {%- comentario -%} Incluir atributos del contexto. {%- comentario final -%} {%- para atributo en lista_atributo -%} {%- a menos que atributo[0] == 'estilo' -%} {{- ' ' -}} {{- atributo[0] -} } {%- if attr[1].size > 0 -%} ="{{- attr[1] -}}" {%- endif -%} {%- endunless -%} {%- endfor -%} {{- ' ' -}} style=" {%- comment -%} Representa estilos bg. Use src si no obtuvimos una imagen. {%- endcomment -%} {%- asigna has_bg_image = false -%} {%- asigna has_bg_size = false -%} {%- asigna has_bg_position_x = false -%} {%- asigna has_bg_position_y = false -%} {%- asigne has_bg_repeat = false -%} {%- para prop en bg -%} {%- case prop[0] -%} {%- when 'image' -%} {%- asigne has_bg_image = true -%} {% - cuando 'tamaño' -%} {%- asigne has_bg_size = true -%} {%- cuando 'posición' -%} {%- asigne has_bg_position_x = true -%} {%- asigne has_bg_position_y = true -%} {% - cuando 'posición-x' -%} {%- asignar has_bg_position_x = verdadero -%} {%- cuando 'posición-y' -%} {%- asignar tiene_bg_posición_y = verdadero -%} {%- cuando 'repetir' - %} {%- asignar has_bg_repeat = true -%} {%- endcase -%} background-{{- prop[0] -}}: {{- prop[1] -}}; {%- endfor -%} {%- a menos que haya_bg_image -%} background-image: url('{{- src | asset_url: global: is_global_asset -}}'); {%- endunless -%} {%- a menos que has_bg_size -%} tamaño de fondo: portada; {%- endunless -%} {%- a menos que has_bg_position_x -%} background-position-x: center; {%- endunless -%} {%- a menos que has_bg_position_y -%} background-position-y: center; {%- endunless -%} {%- a menos que has_bg_repeat -%} background-repeat: no-repeat; {%- endunless -%} {%- comment -%} Agregue cualquier estilo del atributo de estilo. {%- endcomment -%} {{- attrs.style -}} " {%- endcapture -%} {%- comment -%} Elimina los atributos para que no los representemos dos veces. {%- asignar atributos_de_grupo = atributos_de_grupo | merge_props: class: 'listcard__group' -%} {%- asignar nombre de etiqueta = 'div' -%} {%- si es plegable -%} {%- asignar nombre de etiqueta = 'detalles' -%} {%- endif -%} < {{ tag_name }} {{ group_attrs | to_attrs }}> {% a menos que el título == falso o grupo.título == nil o grupo.título.tamaño == 0 %} {% si es plegable %} {% terminara si %} {{ grupo.título }} {% si es plegable %} {% endif %} {% endunless %} {% para elemento en grupo.tarjetas %} {%- incluye 'lista de tarjetas/tarjeta de lista/elemento' -%} {% endfor %} {% a menos que group.group_button_link == nil o group.cards.size < 2 %} {{ grupo.group_button_label }} {% sin fin %}{% 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`.
Si `attrs.class` ya existe, nuestra lista de clases se agregará después.
Se necesita `capture` porque estamos usando datos de `forloop.index`.
Si quisiéramos usar una lista de clases constante sin datos dinámicos, podríamos hacerlo en línea como: `{%- asignar atributos = atributos | merge_props: clase: "mi-lista de clases estática" -%}` {%- endcomment -%} {%- clase de captura -%} {% 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 %} {%- asignar tag_name = 'a' -%} {%- asignar atributos = atributos | merge_props: href: image_link -%} {% endif %} {%- asignar atributos = atributos | merge_props: class: class -%} {% include "atom/img" %} {% endusing %} {% if image.modal_img %} Cerrar {% usando imagen %} {%- comentario -%} Estamos agregando una lista de clases a los datos de `image` antes de `atom/img`.
Si `attrs.class` ya existe, nuestra lista de clases se agregará después.
Se necesita `capture` porque estamos usando datos de `forloop.index`.
Si quisiéramos usar una lista de clases constantes sin datos dinámicos, podríamos hacerlo en línea como: `{%-assign attrs = attrs | merge_props: class: "my-static class-list" -%}` {%- endcomment -%} {%- capture class -%} listcard__modal-image listcard__modal-image--{{ forloop.index }} {%- endcapture -%} {%- asignar atributos = atributos | merge_props: clase: clase -%} {% incluye "átomo/img" %} {% uso final %} {% endif %} {% endfor %} {% si imagen.imagen_texto%} {{imagen.imagen_texto}} {% endif %} {% más %} {% for image in item.images %} {% using image %} {%- comment -%} Estamos agregando una lista de clases a los datos de `image` antes de `atom/img`.
Si `attrs.class` ya existe, nuestra lista de clases se agregará después.
Se necesita `capture` porque estamos usando datos de `forloop.index`.
Si quisiéramos usar una lista de clases constante sin datos dinámicos, podríamos hacerlo en línea como: `{%- asignar atributos = atributos | merge_props: clase: "mi-lista de clases estática" -%}` {%- endcomment -%} {%- clase de captura -%} {% 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 %} {%- asignar tag_name = 'a' -%} {%- asignar atributos = atributos | merge_props: href: image_link -%} {% endif %} {%- asignar atributos = atributos | merge_props: class: class -%} {% include "atom/img" %} {% endusing %} {% if image.image_text %} {{imagen.image_text}} {% endif %} {% endfor %} {%- if item.images[0].modal_img -%} > < Cerrar {% para imagen en item.images %} {% usando image.modal_img %} {%- comentario -%} Estamos agregando una lista de clases a los datos de `image` antes de `atom/img`.
Si `attrs.class` ya existe, nuestra lista de clases se agregará después.
Se necesita `capture` porque estamos usando datos de `forloop.index`.