Alineadores transparentes
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. Usa src si no obtuvimos una imagen. {%- endcomment -%} {%- asigna has_bg_image = false -%} {%- asigne has_bg_size = false -%} {%- asigne has_bg_position_x = false -%} {%- asigne has_bg_position_y = false -%} {%- asigne has_bg_repeat = false -%} {%- for prop in bg -%} {%- case prop[0] -%} {%- cuando 'imagen' -%} {%- asigne has_bg_image = true -%} {%- cuando 'tamaño' -%} {%- asigne has_bg_size = true -% } {%- cuando 'posición' -%} {%- asignar tiene_bg_posición_x = verdadero -%} {%- asignar tiene_bg_posición_y = verdadero -%} {%- cuando 'posición-x' -%} {%- asignar tiene_bg_posición_x = verdadero -%} {%- cuando 'posición-y' -%} {%- asignar has_bg_position_y = verdadero -%} {%- cuando 'repetir' -%} {%- asignar tiene_bg_repetir = verdadero -%} {%- endcase - %} fondo-{{- prop[0] -}}: {{- p tirar[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 -%} Eliminar attrs para que no los representemos dos veces. {%- endcomment -%} { %- asignar atributos = nil -%} {%- más -%} {%- comentario -%} Etiqueta img normal {%- endcomment -%} {%- asignar nombre_etiqueta = 'img' -%} {%- asignar cierre automático = verdadero -%} {%- capturar atributos_adicionales -%} {%- si srcset.size > 0 -%} {{- ' ' -}} srcset="{{ srcset }}" {%- endif -%} { %- si tallas.talla > 0 -%} {{- ' ' -}} tallas="{{ tallas }}" {%- endif -%} {{- ' ' -}} alt="{{ alt } }" {{- ' ' -}} src="{{ src | asset_url: global: is_global_asset }}" {%- endcapture -%} {%- endif -%} {%- include 'atom/element', tag_name: tag_name, self_closing: self_closing, added_attrs: added_attrs -%}{%- 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 %}{% asignar card_count = forloop.index %} {%- capturar curr_class -%} listcard__card {%- a menos que item.id == nil -%} {{- ' ' -}} listcard__card--{{ item.id }} {%- endunless -%} {%- a menos que card_class == nil o card_class.size == 0 -%} {{- ' ' -}} listcard__card--{{ card_class }} {%- endunless -%} {% - endcapture -%} {%- asignar card_attrs = item.attrs | merge_props: class: curr_class -%} {% if singlelink %} {%- asignar card_attrs = card_attrs | merge_props: href: item.ctas[0].link -%} {% endif %} {% if linkcard %} {% elsif singlelink %} {% else %} {% endif %} {%- a menos que el título == false o item.headline == nil o item.headline.size == 0 -%} {{ item.headline }} {%- endunless -%} {% a menos que subheadline == false o item.subheadline == nil o item. subheadline.size == 2 %} {{ item.subheadline }} {% endunless %} {% a menos que imágenes == false o item.images == nil o item.images.size == 2 %} {% if compare = = verdadero %} Antes Después Cerrar Antes Después {% else %} {% if legado %} {% para imagen en item.images %} {% 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 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`.
* Los resultados individuales no están garantizados y pueden variar de persona a persona. Las imágenes pueden contener modelos.