Adicionar ativos Dynamic Media às páginas adding-dynamic-media-assets-to-pages
Para adicionar a funcionalidade de mídia dinâmica aos ativos que você usa em seus sites, é possível adicionar o Dynamic Media ou Mídia interativa diretamente na página. Para isso, entre no modo Layout e ative os componentes de mídia dinâmica. Em seguida, adicione esses componentes à página e adicionar ativos ao componente. A mídia dinâmica e os componentes de mídia interativa são inteligentes - eles sabem se você está adicionando uma imagem ou um vídeo e as opções disponíveis mudam de acordo.
Você adiciona ativos de mídia dinâmica diretamente à página se estiver usando o AEM como o WCM. Se estiver usando um dispositivo de terceiros no WCM, vincule ou incorpore os ativos. Para obter um site responsivo de terceiros, consulte Fornecer imagens otimizadas para um site responsivo.
Adicionar um componente Dynamic Media a uma página adding-a-dynamic-media-component-to-a-page
Adicionar um componente do Dynamic Media a uma página é o mesmo que adicionar um componente a qualquer página. Os componentes do Dynamic Media são descritos detalhadamente nas seções a seguir.
-
Em AEM, abra a página à qual deseja adicionar o componente Dynamic Media.
-
No painel no lado esquerdo da página (talvez seja necessário alternar a exibição do painel lateral), clique no botão Componentes ícone .
-
Em Componentes , na lista suspensa, selecione Dynamic Media. Se nenhuma lista de componentes do Dynamic Media estiver disponível, você provavelmente precisará ativar os componentes do Dynamic Media que deseja usar. Consulte Ativar componentes do Dynamic Media.
-
Arraste um componente Dynamic Media que você deseja usar para a página no local desejado.
-
Passe o ponteiro do mouse sobre o componente. Quando o componente estiver rodeado por uma caixa azul, toque uma vez para exibir a barra de ferramentas do componente. Toque no Configuração ícone (chave).
-
Editar os componentes conforme necessário e clique na marca de seleção para salvar as alterações.
Ativar componentes do Dynamic Media enabling-dynamic-media-components
Se nenhum componente do Dynamic Media estiver disponível para ser adicionado a uma página, isso provavelmente significa que você precisa primeiro ativar os componentes que deseja usar.
-
Em AEM, abra a página à qual deseja adicionar o componente Dynamic Media.
-
No lado esquerdo da barra de ferramentas, próximo à parte superior da página, toque no ícone Informações da página e, em seguida, toque em Editar modelo na lista suspensa.
-
No lado direito da barra de ferramentas, perto da parte superior da página, na lista suspensa, toque em Estrutura.
-
Próximo à parte inferior da página, toque em Contêiner de layout para abrir a barra de ferramentas, toque no ícone Política .
-
No Contêiner de layout na página Propriedades verifique se o Componentes permitidos é selecionada.
-
Role até ver Dynamic Media.
-
Toque no ícone > à esquerda de Dynamic Media para expandir a lista, selecione os componentes do Dynamic Media que deseja ativar.
-
Próximo ao canto superior direito do Contêiner de layout toque no ícone Concluído (marca de seleção) .
-
No lado direito da barra de ferramentas, perto da parte superior da página, na lista suspensa, toque em Conteúdo inicial, em seguida adicionar um componente Dynamic Media a uma página como de costume.
Localização dos componentes do Dynamic Media localizing-dynamic-media-components
Você pode localizar componentes do Dynamic Media de uma das duas maneiras:
-
Em uma página da Web no Sites, abra Propriedades e selecione a guia Avançado. Selecione o idioma desejado para localização.
-
No seletor do site, selecione a página ou grupo de páginas desejado. Toque Propriedades e selecione o Avançado guia . Selecione o idioma desejado para localização.
note note NOTE Observe que nem todos os idiomas disponíveis no Idioma no momento, têm tokens atribuídos.
Componentes do Dynamic Media dynamic-media-components
O Dynamic Media e a Mídia interativa estão disponíveis na variável Dynamic Media em Componentes. Você usa a variável Mídia interativa componente para quaisquer ativos interativos, como vídeo interativo, imagens interativas ou conjuntos de carrossel. Para todos os outros componentes de mídia dinâmica, use o componente Dynamic Media .
Componente Dynamic Media dynamic-media-component
O componente Dynamic Media é inteligente — dependendo de você adicionar uma imagem ou um vídeo, você terá várias opções. O componente suporta predefinições de imagens, visualizadores baseados em imagens, como conjuntos de imagens, conjuntos de rotação, conjuntos de mídia mista e vídeo. Além disso, o visualizador é responsivo. Ou seja, o tamanho da tela muda automaticamente com base no tamanho da tela. Todos os visualizadores são visualizadores do HTML5.
- Você tem Dynamic Media habilitado. O Dynamic Media é desativado por padrão.
- A imagem tem um arquivo tiff de pirâmide. As imagens importadas antes de a mídia dinâmica ser ativada não têm um arquivo tiff de pirâmide.
Ao trabalhar com imagens when-working-with-images
O componente Dynamic Media permite que você adicione imagens dinâmicas, incluindo conjuntos de imagens, conjuntos de rotação e conjuntos de mídia mista. É possível ampliar, reduzir e, se aplicável, transformar uma imagem em um conjunto de rotação ou selecionar uma imagem de outro tipo de conjunto.
Você também pode configurar a predefinição do visualizador, a predefinição de imagem ou o formato de imagem diretamente no componente. Para tornar uma imagem responsiva, você pode definir os pontos de interrupção ou aplicar uma predefinição de imagem responsiva.
Você deve editar as seguintes configurações do Dynamic Media clicando no botão Editar no componente e, em seguida, Configurações do Dynamic Media.
-
Predefinição do visualizador
Selecione uma predefinição do visualizador existente no menu suspenso. Se a predefinição do visualizador que você está procurando não estiver visível, talvez seja necessário torná-la visível. Consulte Gerenciar predefinições do visualizador. Não é possível selecionar uma predefinição do visualizador se você estiver usando uma predefinição de imagem e vice-versa.
Essa é a única opção disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista. As predefinições do visualizador exibidas também são inteligentes - somente as predefinições do visualizador relevantes são exibidas. -
Modificadores do visualizador
Os modificadores do visualizador assumem a forma de par name=value com um delimitador & e permitem alterar os visualizadores, conforme descrito no Guia de referência de visualizadores. Um exemplo de um modificador de visualizador é posterimage=img.jpg&caption=text.vtt,1 que define uma imagem diferente para a miniatura do vídeo e associa um arquivo de legenda/subtítulo fechado ao vídeo. -
Predefinição de imagem
Selecione uma predefinição de imagem existente no menu suspenso. Se a predefinição de imagem que você está procurando não estiver visível, talvez seja necessário torná-la visível. Consulte Gerenciamento de predefinições de imagens. Não é possível selecionar uma predefinição do visualizador se você estiver usando uma predefinição de imagem e vice-versa.
Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista. -
Modificadores de imagem
Você pode aplicar efeitos de imagem fornecendo comandos de imagem adicionais. Eles estão descritos em Predefinições de imagem e na referência do Comando de disponibilização de imagens.
Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista. -
Pontos de interrupção
Se você estiver usando esse ativo em um site responsivo, precisará adicionar os pontos de interrupção da imagem. Os pontos de interrupção da imagem precisam ser separados por vírgulas (,). Essa opção funciona quando não há altura ou largura definida em uma predefinição de imagem.
Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista.
Você pode editar as seguintes Configurações avançadas clicando em Editar no componente . -
Título
Altere o título da imagem. -
Texto alternativo
Adicione um título à imagem para os usuários que tenham os gráficos desativados.
Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista. -
URL, Abrir em
É possível definir um ativo para abrir um link. Defina o URL e, em Abrir em , indique se deseja que ele seja aberto na mesma janela ou em uma nova janela.
Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista. -
Largura e Altura
Insira o valor em pixels se desejar que a imagem tenha um tamanho fixo. Deixar esses valores em branco torna o ativo adaptável.
Ao trabalhar com vídeo when-working-with-video
Use o componente Dynamic Media para adicionar vídeo dinâmico às suas páginas da Web. Ao editar o componente, você pode optar por usar uma predefinição de visualizador de vídeo predefinida para reproduzir o vídeo na página.
Você deve editar as seguintes configurações do Dynamic Media clicando em Editar no componente .
-
Predefinição do visualizador
Selecione uma predefinição de visualizador de vídeo existente no menu suspenso. Se a predefinição do visualizador que você está procurando não estiver visível, talvez seja necessário torná-la visível. Consulte Gerenciar predefinições do visualizador. -
Modificadores do visualizador
Os modificadores do visualizador assumem a forma de par name=value com um delimitador & e permitem alterar os visualizadores, conforme descrito no Guia de referência de visualizadores do Adobe. Um exemplo de um modificador de visualizador é posterimage=img.jpg&caption=text.vtt,1Com modificadores do visualizador, por exemplo, você pode fazer o seguinte:
- Associar um arquivo de legenda a um vídeo legenda.
- Associar um arquivo de navegação a um vídeo navegação.
Você pode editar o seguinte Configurações avançadas clicando em Editar no componente .
-
Título
Altere o título do vídeo. -
Largura e Altura
Insira o valor em pixels se desejar que o vídeo tenha um tamanho fixo. Deixar esses valores em branco o torna adaptável.
Ao trabalhar com o Recorte inteligente when-working-with-smart-crop
Use o componente Dynamic Media para adicionar ativos de imagem de Corte inteligente às suas páginas da Web. Ao editar o componente, você pode optar por usar uma predefinição de visualizador de vídeo predefinida para reproduzir o vídeo na página.
Consulte também Perfis de imagem.
Você pode editar o seguinte Configurações do Dynamic Media clicando em Editar no componente .
- Modificadores de imagem
Você pode aplicar efeitos de imagem fornecendo comandos de imagem adicionais. Eles estão descritos em Predefinições de imagem e na referência do Comando de disponibilização de imagens.
Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista.
Você pode editar o seguinte Avançado clicando em Editar no componente .
-
Título
Altere o título da imagem de Recorte inteligente. -
Texto alternativo
Adicione um título à imagem de recorte inteligente para os usuários que têm gráficos desativados.
Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista. -
URL, Abrir em
É possível definir um ativo para abrir um link. Defina o URL e, em Abrir em , indique se deseja que ele seja aberto na mesma janela ou em uma nova janela.
Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista. -
Altura e Largura
Insira o valor em pixels se desejar que a imagem de recorte inteligente tenha um tamanho fixo. Deixar esses valores em branco o torna adaptável.
Componente Mídia interativa interactive-media-component
O componente Mídia interativa é para os ativos que têm interatividade em pontos de acesso ou mapas de imagem. Se você tiver uma imagem interativa, um vídeo interativo ou um banner de carrossel, use o componente Mídia interativa .
O componente Mídia interativa é inteligente — dependendo de você adicionar uma imagem ou um vídeo, você terá várias opções. Além disso, o visualizador é responsivo: o tamanho da tela muda automaticamente com base no tamanho da tela. Todos os visualizadores são visualizadores do HTML5.
Você pode editar o seguinte Geral clicando em Editar no componente .
-
Predefinição do visualizador
Selecione uma predefinição do visualizador existente no menu suspenso. Se a predefinição do visualizador que você está procurando não estiver visível, talvez seja necessário torná-la visível. As Predefinições do visualizador devem ser publicadas antes de serem usadas. Consulte Gerenciar predefinições do visualizador. -
Título
Altere o título do vídeo. -
Largura e Altura
Insira o valor em pixels se desejar que o vídeo tenha um tamanho fixo. Deixar esses valores em branco o torna adaptável.
Você pode editar o seguinte Adicionar ao carrinho clicando em Editar no componente .
-
Mostrar ativo do produto
Por padrão, esse valor é selecionado. O ativo do produto mostra uma imagem do produto, conforme definido no módulo Comércio. Limpe a marca de seleção para não mostrar o ativo do produto. -
Mostrar preço do produto
Por padrão, esse valor é selecionado. O preço do produto mostra o preço do item, conforme definido no módulo Comércio. Limpe a marca de seleção para não mostrar o preço do produto. -
Mostrar formulário do produto
Por padrão, esse valor não está selecionado. O Formulário de produto inclui quaisquer variantes de produto, como tamanho e cor. Limpe a marca de seleção para não mostrar as variantes do produto.
Componente de mídia panorâmica panoramic-media-component
O componente Mídia panorâmica é para os ativos que são imagens panorâmicas esféricas. Essas imagens fornecem uma experiência de visualização de 360° de uma sala, propriedade, local ou paisagem. Para que uma imagem seja qualificada como um panorama esférico, ela deve ter um OU ambos os itens a seguir:
- Uma proporção de aspecto de 2:1.
- Marcada com as palavras-chave "equirectangular" ou ("esférico" + "panorama") ou ("esférico" + "panorâmico"). Consulte Uso de tags.
Tanto a proporção quanto os critérios de palavra-chave se aplicam aos ativos panorâmicos da página de detalhes do ativo e ao componente WCM "Mídia panorâmica".
Você pode editar a seguinte configuração ao tocar em Configurar no componente .
- Predefinição do visualizador
Selecione um visualizador existente no menu suspenso Predefinição do visualizador .
Se a predefinição do visualizador que você está procurando não estiver visível, verifique se ela foi publicada. Você deve publicar as predefinições do visualizador antes de usá-las. Consulte Gerenciar predefinições do visualizador.
Usar HTTP/2 para fornecer ativos do Dynamic Media using-http-to-delivery-dynamic-media-assets
HTTP/2 é o novo protocolo da Web atualizado que melhora a maneira como os navegadores e servidores se comunicam. Ele oferece transferência mais rápida de informações e reduz a quantidade de poder de processamento necessário. A entrega de ativos do Dynamic Media agora pode ser feita via HTTP/2, o que oferece melhor resposta e tempo de carregamento.
Consulte Entrega de conteúdo HTTP2 para obter detalhes completos sobre a introdução ao HTTP/2 com sua conta do Dynamic Media.