Img

A pasta Img abriga os arquivos de imagem que serão utilizados no site.

📘

Nota

A pasta Img possui uma estratégia de otimização que permite alcançar uma melhor performance no site. Para isso, recomendamos que sejam utilizadas as extensões .jpg ou .jpeg nas imagens para ter acesso a esse recurso.
Isso ocorre, pois imagens desse tipo são convertidas para WebP, garantindo melhor performance em seu carregamento.

Como utilizar

As imagens armazenadas na pasta Img podem ser obtidas através de um link estático, que segue a seguinte estrutura:

"https://" + "nome da loja" + ".fbitsstatic.net/sf/img/" + caminho da imagem + "?theme=" + tema atual + &v= + data e hora do último commit

Exemplo:

https://lojaexemplo.fbitsstatic.net/sf/img/example-image.jpg?theme=main&v=202301011259

Existem duas formas de utilizar o recurso de imagens de maneira mais simplificada:

Forma direta

Via variáveis injetadas automaticamente nas páginas:

{{~ capture source ~}}
{{- store.urls.static_img}}example-image.jpg?theme={{store.theme -}}&v={{store.last_modified}}
{{~ end ~}}

O link da imagem é atribuído à variável source.
A query string v funciona como versionamento, garantindo que a versão mais recente da imagem seja chamada.

Componente image_asset

O componente image_asset retorna a tag HTML img completa. Para isso, basta informar os parâmetros:

Atributo	Tipo	Obrigatório	Descrição
path	string	sim	Caminho da imagem dentro da pasta Img
alt	string	sim	Texto alternativo da imagem
sizes	object array	sim	Um array de objetos que contém as propriedades w para largura e h para altura da imagem

Exemplo:

{{ image_asset path: "example-image.jpg" alt: "example" sizes: [{ w: 1000, h: 1000 }] }}