@luego/nunjucks-luego-image-extension NPM

Luego Image {% img %}

É um auxílio para criar <img>, a partir de uma imagem de origem, é possível convertê-la em qualidade, tamanho, proporção e formato.

Instalação

Caso esteja usando um boilerplate mais antigo, é possível adicionar essa funcionalidade usando o comando: \ PS: Na versão mais atual já consta essa funcionalidade

# NPM
npm i nunjucks-luego-image-extension

# Yarn
yarn add nunjucks-luego-image-extension

Como usar

PS: A pasta root das imagens continua sendo /assets/images/ *

# Versão abreviada
{% img 'imagem.jpg' %}

# Versão completa
{% img src='imagem.jpg' %}

Resultado

<picture class="wrap-img-imagem-G4352">
    <img
      src="assets/images/exported/placeholder/imagem-G4352.svg"
      alt=""
      class="img-imagem-G4352"
      data-src="assets/images/exported/imagem-G4352.webp"
      loading="lazy"
      height="1280"
      width="1920"
      style="">
</picture>

Observações importantes

Imagens acima de 1920px de largura serão exportadas para 1920px caso queira uma imagem maior, informe com o atributo width.
Recomendamos fortemente o atributo alt SEMPRE.
A extensão padrão de expotação é webp
A partir da imagem original é criado um svg como placeholder

Atributos

Atributo	Tipo	Default	Description
src	string	- Obrigatório informar -	Primeiro parâmetro, src= é opcional
width	number	Tamanho original (max 1920px)	Somente width mantém o aspect ratio
height	number	Tamanho original (max 1080px)	Somente height mantém o aspect ratio
fit	string	cover	Opções: cover / contain / fill / inside / outside
ratio	string	proporção original	Proporção width/height
quality	number	85	De 1 - 100
format	string	webp	Opções: jpg / webp / png / gif
loading	string	lazy	Opções: lazy / eager
class	string	'img-' + uniqueId + nome do arquivo	-
source	object	null	Atributos abaixo:

Width

# Sem o height, manterá o aspect ratio original
{% img 'imagem.jpg', width=500 %}

Height

# Sem o width, manterá o aspect ratio original
{% img 'imagem.jpg', height=500 %}

# Caso seja passado ambos os atributos, será considerado o atributo FIT (defaut: cover)
{% img 'imagem.jpg', height=500, width=500 %}

Fit

# Opções: cover / contain / fill / inside / outside
{% img 'imagem.jpg', height=500, width=400, fit='contain' %}

Ratio

# Para portrait o valor tem que ser menor que 1 Ex:
{% img 'imagem.jpg', ratio=0.7 %}

# Para landscape o valor tem que ser maior que 1 Ex:
{% img 'imagem.jpg', ratio=1.5 %}

Quality

# de 1 a 100 PS: em webp a compressão é muito eficiente
{% img 'imagem.jpg', quality=80 %}

Format

# Opções: jpg / webp / png / gif
{% img 'imagem.jpg', format='png' %}

Loading

# Opções: Opções: lazy / eager (carregamento natural)
{% img 'imagem.jpg', loading='eager' %}

Class

# Substitui a classe da img e o picture
{% img 'imagem.jpg', class='hero-item' %}

Source (saiba mais)

Uma imagem com a função de substituir a imagem "padrão", ela pode ser configurada como os media queries que já são utilizados em css, por exemplo, min-width, ou max-width.

Atributos Source

Atributo	Tipo	Default	Description
breakpoint	string	(max-width: 768px)	Media queries
width	number	500	Somente width mantém o aspect ratio
height	number	mantém a proporção original	Somente height mantém o aspect ratio

# O padrão é (max-width: 768px) ou seja, mobile, mas pode ser alterado
{% img 'imagem.jpg', source={breakpoint: '(max-width: 1024px)', width: 500, height: 500} %}

⬆

@emmetio/expand-abbreviation sharp spinnies image-size sqip sqip-plugin-blur sqip-plugin-data-uri sqip-plugin-primitive sqip-plugin-svgo

@everything-registry/sub-chunk-563

1.0.1

1 year ago

1.0.0

1 year ago