Configurando o Visualizador de imagens

Você pode usar o Visualizador de imagens para adicionar imagens a campos para exibição em um carrossel de mídia.

O visualizador de imagens permite que um administrador Logik adicione imagens em destaque aos campos compatíveis que podem ser visualizados em um carrossel de mídia. Este artigo aborda como configurar o Visualizador de imagens no Logik Admin e como ele é exibido em seu layout.

Tipos de exibição de campo compatíveis

• Imagem estática
• MultiSelectProductPickerGrid
• SelecionoVisualProductPicker
• Grade de selecionador de produtos
• VisualProductPicker
• Lista de seleção múltipla
• SeleçãoSelecionarGrade de lista de seleção
• Seletor visual de seleção múltipla
• Seletor visual

Imagens estáticas

Para exibir o Visualizador de imagens para um campo Imagem estática, siga estas etapas:

1. Abra o layout ao qual você deseja adicionar o Visualizador de imagens.
2. Passe o mouse sobre o campo e clique no ícone de engrenagem.
3. Abra o menu Valor bruto e adicione o seguinte, incluindo as entradas necessárias no lugar do texto de espaço reservado abaixo.

   

4. Clique em Salvar e implantar o blueprint.

Detalhes do valor bruto do Visualizador de imagens

Adicione o seguinte à seção "Valor bruto" de um componente de exibição de imagem por meio da IU do administrador, em que Array<FeatureImage> É uma matriz de suas imagens de recurso adicionais no formato de tipo de imagem do recurso e. CarouselHabilitado é definido como verdadeiro ou falso.

"featureImageSettings": {
      "additionalImages": Array<FeatureImage>,
      "carouselEnabled": boolean
  }

Por padrão, CarouselHabilitado é falso.

Definindo uma imagem de recurso

FeatureImage = {
  “src”: string,
  “alt”?: string,
  "label"?: string,
}

Selecionadores de produtos

Para exibir o Visualizador de imagens de um campo de seletor de produto, siga estas etapas:

1. Selecione o campo do seletor de produtos.
2. Selecione a guia Campos de opção.
3. Clique em Adicionar .
   • Defina o Tipo de campo como Texto.
   • Defina a propriedade Lista de produtos como Produto estendido.
4. Crie um campo Texto para cada imagem a ser incluída no Visualizador de imagens.
   Nota:

   Para exibir texto alternativo ou um rótulo, campos adicionais para cada tipo devem ser criados. Estes campos não são obrigatórios.

   

5. Selecione a guia Ações em massa.
6. Clique em Adicionar nova ação.
7. Selecione o tipo Ação determinada.
8. Insira um Nome de ação em massa.
9. Selecione todos os campos adicionados ao Visualizador de imagens.

   

10. Clique em Salvar.
11. Na guia Ações em massa, forneça o URL de cada imagem, bem como o texto para rótulos e texto alternativo, se desejado.

    

12. Clique em Salvar.
13. Abra um layout que inclua o campo de seletor de produto.
14. Passe o mouse sobre o campo e clique no ícone de engrenagem.
15. Ative a opção Habilitar visualizador de imagens.
16. Expanda a seção Configurações do Visualizador de imagens.
17. Selecione os campos criados a partir das etapas 3-4 que correspondem ao URL da imagem, ao texto alternativo e ao rótulo.

    O texto alternativo e o rótulo são opcionais.

18. Clique em Adicionar e repita a etapa 17 para cada imagem que você deseja incluir.

    

19. Clique em Salvar e implantar o blueprint.

Listas de seleção

1. Abra o campo da lista de seleção.
2. Clique na guia Extensão da lista de seleção.
3. Clique em Dados de importação .
4. Crie um CSV que inclua as seguintes colunas:
   • valor
   • UrimageUrl
     • Certifique-se de que este seja um URL válido para a imagem ser exibida.
     • Crie uma coluna imageUrl para cada imagem a ser incluída no Visualizador de imagens.
   • ImageLabel (opcional)
   • ImageAltText (opcional)

     

5. Importe o CSV criado.
6. Clique em Mapeamento de coluna .
7. Para cada campo adicionado, selecione o menu de mapeamento e selecione o nome da coluna na seção Mapeamento de extensão.

   

8. Clique em Salvar mapeamento .
9. Abra um layout que inclua o campo de seletor de produto.
10. Passe o mouse sobre o campo e clique no ícone de engrenagem.
11. Ative a opção Habilitar visualizador de imagens.
12. Expanda a seção Configurações do Visualizador de imagens.
13. Selecione os campos criados a partir dos dados de extensão da lista de seleção que correspondem a URL da imagem, texto alternativo e rótulo.

    O texto alternativo e o rótulo são opcionais.

14. Clique em Adicionar e repita a etapa 13 para cada imagem que você deseja incluir.

    

15. Clique em Salvar e implantar o blueprint.

Diretrizes gerais

Certifique-se de que os tamanhos de imagem sejam os mesmos para todas as imagens em um visualizador. Se não corresponderem, as miniaturas e a imagem em destaque não serão alinhadas corretamente.

Adicione imagens na ordem em que você deseja que elas sejam exibidas. As imagens serão exibidas nas configurações do Visualizador de imagens de cima para baixo. O nome do campo não afeta a ordem de exibição.

Use imagens com uma resolução alta o suficiente para preencher corretamente a janela. As imagens de baixa resolução serão expandidas em tamanho para se ajustarem à janela e não ficarão boas quando selecionadas como a imagem em destaque.

Para obter o desempenho ideal, evite imagens grandes ou de alta resolução, pois isso afetará o tempo de renderização do visualizador de imagens.

Exibição do Visualizador de imagens

Em um layout com um campo que inclui uma exibição de imagem, um usuário pode passar o mouse sobre uma imagem para ver o ícone Expandir.

Uma vez clicada, a exibição da imagem será aberta em uma caixa de diálogo.

Um usuário pode se mover entre imagens com os botões de seta ou clicando nas miniaturas abaixo da imagem do recurso. Este carrossel exibe qualquer rótulo e texto alternativo, se fornecido. Um usuário pode fechar a caixa de diálogo clicando fora dela ou clicando em X no canto superior direito.