Todas as imagens de serviço
Tratamento de hiperpigmentação
Remoção de tatuagem a laser
Carregando
{%- comment -%} Remove espaços em branco iniciais e finais de `tag_name`. {%- endcomment -%} {%- assign tag_name = tag_name | strip -%} {%- comment -%} Manipula o caso `tag_name: ''`. {%- endcomment -%} {%- if tag_name and tag_name.size < 1 -%} {%- assign tag_name = false -%} {%- endif -%} {%- if tag_name -%} <{{ tag_name }} {{- attrs | to_attrs -}} {{- additional_attrs -}} {%- se autofechamento == verdadeiro -%} {{- ' /' -}} {%- fimse -%} > {%- fimse -%} {%- a menos que autofechamento == verdadeiro -%} {%- ifslot -%} {%- slot -%} {%- senão -%} {{- inner_html -}} {%- fimseslot -%} {%- se nome_da_tag -%} {%- fimse -%} {%- fima menos -%}{%- comment -%} Este componente pode gerar uma tag `img` ou um `div style="background-..."`.
{%- endcomment -%} {%- assign is_global_asset = is_global_asset | default: false -%} {%- if bg -%} {%- comment -%} Imagem de fundo {%- endcomment -%} {%- assign tag_name = tag_name | default: 'div' -%} {%- assign self_closing = self_closing | default: false -%} {%- comment -%} Nós mesmos renderizamos os atributos e filtramos o `style`. {%- endcomment -%} {%- assign attr_list = attrs | to_attrs: list: true -%} {%- capture additional_attrs -%} {%- comment -%} Incluir atributos do contexto. {%- endcomment -%} {%- for attr in attr_list -%} {%- unless attr[0] == 'style' -%} {{- ' ' -}} {{- attr[0] -}} {%- if attr[1].size > 0 -%} ="{{- attr[1] -}}" {%- endif -%} {%- endunless -%} {%- endfor -%} {{- ' ' -}} style=" {%- comment -%} Renderizar estilos de fundo. Use src se não obtivermos uma imagem. {%- fim do comentário -%} {%- atribuir has_bg_image = false -%} {%- atribuir has_bg_size = false -%} {%- atribuir has_bg_position_x = false -%} {%- atribuir has_bg_position_y = false -%} {%- atribuir has_bg_repeat = false -%} {%- para prop em bg -%} {%- caso prop[0] -%} {%- quando 'imagem' -%} {%- atribuir has_bg_image = true -%} {%- quando 'tamanho' -%} {%- atribuir has_bg_size = true -%} {%- quando 'posição' -%} {%- atribuir has_bg_position_x = true -%} {%- atribuir has_bg_position_y = true -%} {%- quando 'posição-x' -%} {%- atribuir has_bg_position_x = true -%} {%- quando 'position-y' -%} {%- atribuir has_bg_position_y = true -%} {%- quando 'repetir' -%} {%- atribuir has_bg_repeat = true -%} {%- fim de caixa -%} plano de fundo-{{- prop[0] -}}: {{- prop[1] -}}; {%- fim para -%} {%- a menos que tenha_imagem_de_bg -%} imagem-de-fundo: url('{{- src | url_do_ativo: global: é_ativo_global -}}'); {%- fim a menos que tenha_tamanho_de_bg -%} tamanho-de-fundo: capa; {%- fim a menos que tenha_posição_de_bg_x -%} posição-de-fundo-x: centro; {%- fim a menos que tenha_posição_de_bg_y -%} posição-de-fundo-y: centro; {%- endunless -%} {%- unless has_bg_repeat -%} background-repeat: no-repeat; {%- endunless -%} {%- comment -%} Adicione quaisquer estilos do atributo style. {%- endcomment -%} {{- attrs.style -}} " {%- endcapture -%} {%- comment -%} Remova os atributos para que não os renderizemos duas vezes. {%- atribuir group_attrs = group.attrs | merge_props: class: 'listcard__group' -%} {%- atribuir tag_name = 'div' -%} {%- se recolhível -%} {%- atribuir tag_name = 'detalhes' -%} {%- fim se -%} <{{ tag_name }} {{ group_attrs | to_attrs }}> {% a menos que headline == false ou group.headline == nil ou group.headline.size == 0 %} {% se recolhível %} {% fim se %} {{ grupo.título }} {% se recolhível %} {% fim se %} {% sem fim %} {% para item em grupo.cards %} {%- incluir 'lista de cartões/lista de cartões/item' -%} {% fim para %} {% a menos que group.group_button_link == nulo ou group.cards.size < 2 %} {{ grupo.grupo_button_label }} {% sem fim %}{% 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`.
Se `attrs.class` já existir, nossa lista de classes será adicionada depois.
`capture` é necessário porque estamos usando dados de `forloop.index`.
Se quiséssemos usar uma lista de classes constante sem dados dinâmicos, poderíamos fazer isso em linha como: `{%- 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: classe: classe -%} {% incluir "atom/img" %} {% uso final %} {% se imagem.modal_img %} Fechar {% usando imagem %} {%- comentário -%} Estamos adicionando uma lista de classes aos dados `image` antes de `atom/img`.
Se `attrs.class` já existir, nossa lista de classes será adicionada depois.
`capture` é necessário porque estamos usando dados de `forloop.index`.
Se quiséssemos usar uma lista de classes constante sem dados dinâmicos, poderíamos fazê-lo em linha como: `{%- 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 %} {% fim se %} {% fim para %} {% se imagem.image_text %} {{imagem.imagem_texto}} {% fim se %} {% senão %} {% for image in item.images %} {% using image %} {%- comment -%} Estamos adicionando uma lista de classes aos dados `image` antes de `atom/img`.
Se `attrs.class` já existir, nossa lista de classes será adicionada depois.
`capture` é necessário porque estamos usando dados de `forloop.index`.
Se quiséssemos usar uma lista de classes constante sem dados dinâmicos, poderíamos fazer isso em linha como: `{%- 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: classe: classe -%} {% incluir "atom/img" %} {% endusing %} {% se imagem.image_text %} {{imagem.imagem_texto}} {% endif %} {% endfor %} {%- se item.images[0].modal_img -%} > < Fechar {% for image in item.images %} {% using image.modal_img %} {%- comment -%} Estamos adicionando uma lista de classes aos dados `image` antes de `atom/img`.
Se `attrs.class` já existir, nossa lista de classes será adicionada depois.
`capture` é necessário porque estamos usando dados de `forloop.index`.
* Os resultados individuais não são garantidos e podem variar de pessoa para pessoa. As imagens podem conter modelos.