Pular para o conteúdo principal

Modelos de Pré-visualização

Os modelos de pré-visualização permitem configurar os parâmetros das imagens que são usadas nos atributos. Ao aplicar um modelo a um atributo do tipo "Imagem" ou "Grupo de Imagens", você obterá imagens ajustadas ao padrão especificado no modelo de pré-visualização. Isso é útil se o design do seu projeto for sensível ao tamanho das imagens. Ao configurar o modelo de pré-visualização, você pode alterar os parâmetros das imagens que o usuário final verá.

Para começar a trabalhar com os modelos de pré-visualização, abra a seção "Configurações" e, em seguida, vá para a subseção "Modelos de Pré-visualização". Nesta seção, há uma lista de modelos já criados, bem como um formulário para criar novos.

Criação​

No formulário de criação, informe:

  • Nome - String não única.
  • Marcador - String única.

Após preencher, clique no botão "Criar".

Configuração​

Selecione na lista geral de modelos de pré-visualização aquele que deseja configurar e clique no ícone de engrenagem Optimize images para entrar no modo de edição. Para criar os parâmetros de pré-visualização, clique no botão "Adicionar". Você pode configurar o formato para imagens verticais, horizontais e quadradas.

Nos formulários correspondentes, preencha:

  • Largura e Altura (Lado do quadrado) - Dimensões em pixels nas quais a imagem será ajustada.
  • Tipo de centralização - A linha que se tornará o eixo central ao redimensionar a imagem.

Modelo Padrão​

Após criar vários conjuntos em um modelo, você pode alternar o modelo padrão. Ele é usado para exibir a pré-visualização no CMS.

Exclusão​

Selecione na lista geral de modelos de pré-visualização aquele que deseja excluir e clique no ícone de exclusão Edit para entrar no modo de edição. Confirme a ação na janela de diálogo.

LQTP​

Cada modelo de pré-visualização consiste em um array de dois elementos:

  • Miniatura (base64 WebP)

Formato: WebP (otimizado para carregamento rápido). Tamanho: não mais do que algumas centenas de bytes. Incorpora-se diretamente no objeto como um URI base64, o que acelera a exibição enquanto a imagem completa ainda está sendo carregada.

  • Pré-visualização gerada A imagem principal da pré-visualização, que substitui a miniatura após o carregamento completo.

Vantagens:

  • Exibição instantânea da miniatura (sem solicitações HTTP adicionais).
  • Transição suave para a pré-visualização completa após o carregamento.
  • Economia de tráfego devido ao uso do WebP comprimido.

Exemplo de estrutura:

{
  "preview_template": [
    "data:image/webp;base64,UklGRl...", // Miniatura (base64 WebP)  
    "https://example.com/full-preview.jpg" // Pré-visualização completa  
  ]
}

Essa abordagem melhora a experiência do usuário, especialmente em conexões de internet lentas.

Para mais detalhes sobre LQTP, você pode saber mais aqui. Você também pode assistir ao vídeo.