Adição de ativos do Dynamic Media a páginas

Para adicionar a funcionalidade de mídia dinâmica aos ativos usados em seus sites, você pode adicionar o componente Dynamic Media ou Interative Media diretamente na página. Para fazer 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 AEM como seu 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.

OBSERVAÇÃO

Você deve publicar ativos antes de adicioná-los às páginas no AEM. Consulte Publicar ativos Dynamic Media.

Adicionar um componente Dynamic Media a uma página

Adicionar um componente 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.

OBSERVAÇÃO

Se houver um componente Dynamic Media em uma página da Web acessada por um usuário com permissões somente leitura, a página será quebrada e os componentes não serão renderizados corretamente. O motivo é que a página é reconstruída para garantir que as propriedades dos componentes sejam boas e que todos os ativos e configurações referenciados sejam acessíveis. A página é renderizada novamente, fazendo com que os componentes se quebrem; o respectivo código de componente na página não pode ser renderizado novamente devido ao acesso somente leitura do usuário.

Para evitar esse problema, verifique se os usuários do AEM Sites têm as permissões necessárias para acessar os ativos.

  1. No AEM, abra a página à qual você deseja adicionar o componente Mídia dinâmica.

  2. No painel do lado esquerdo da página (talvez seja necessário alternar a exibição do painel lateral), clique no ícone Componentes.

  3. No cabeçalho Components, 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.

    chlimage_1-537

  4. Arraste um componente Dynamic Media que você deseja usar para a página no local desejado.

  5. Passe o ponteiro do mouse diretamente no componente. Quando o componente estiver rodeado por uma caixa azul, toque uma vez para exibir a barra de ferramentas do componente. Toque no ícone Configuração (chave).

  6. Edite os componentes conforme necessário e clique na marca de seleção para salvar as alterações.

Habilitar componentes do Dynamic Media

Se nenhum componente Dynamic Media estiver disponível para adicionar a uma página, isso provavelmente significa que você precisa primeiro ativar os componentes que deseja usar.

  1. No AEM, abra a página à qual você deseja adicionar o componente Mídia dinâmica.

  2. 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.

    edit-template

  3. No lado direito da barra de ferramentas próximo à parte superior da página, na lista suspensa, toque em Estrutura.

    Política

  4. Próximo à parte inferior da página, toque em Container de layout para abrir sua barra de ferramentas e, em seguida, toque no ícone Política.

  5. Na página Container de layout, sob o cabeçalho Propriedades, verifique se a guia Componentes permitidos está selecionada.

    Componentes permitidos

  6. Role até ver Dynamic Media.

  7. Toque no ícone > à esquerda de Dynamic Media para expandir a lista, selecione os componentes Dynamic Media que deseja ativar.

    lista de componentes Dynamic Media

  8. Perto do canto superior direito da página Container de layout, toque no ícone Concluído (marca de seleção).

  9. No lado direito da barra de ferramentas, próximo à parte superior da página, na lista suspensa, toque em Conteúdo inicial e adicione um componente Dynamic Media a uma página, como de costume.

Localizando componentes do Dynamic Media

Você pode localizar componentes 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.

    chlimage_1-538

  • No seletor do site, selecione a página ou o grupo de páginas desejado. Toque em Propriedades e selecione a guia Avançado. Selecione o idioma desejado para localização.

    OBSERVAÇÃO

    Observe que nem todos os idiomas disponíveis no menu Idioma têm tokens atribuídos no momento.

Componentes Dynamic Media

Dynamic Media e Interative Media estão disponíveis na guia Dynamic Media em Components. Você usa o componente Mídia interativa 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 Mídia dinâmica.

OBSERVAÇÃO

Esses componentes não estão disponíveis por padrão e precisam ser disponibilizados pelo editor de modelos antes de usar. Depois que eles forem disponibilizados no editor de modelos, você poderá adicionar os componentes à sua página como faria com qualquer outro componente AEM.

chlimage_1-539

Componente Mídia dinâmica

O componente Dynamic Media é inteligente — dependendo se você adicionar uma imagem ou um vídeo, você terá várias opções. O componente oferece suporte a predefinições de imagem, visualizadores baseados em imagem, como conjuntos de imagens, conjuntos de rotação, conjuntos de mídia mista e vídeo. Além disso, o visualizador responde. Ou seja, o tamanho da tela muda automaticamente com base no tamanho da tela. Todos são visualizadores HTML5.

OBSERVAÇÃO

Se houver um componente Dynamic Media, um componente de mídia interativa ou ambos em uma página da Web acessada por um usuário com permissões somente leitura, a página será quebrada e os componentes não serão renderizados corretamente. O motivo é que a página é reconstruída para garantir que as propriedades dos componentes sejam boas e que todos os ativos e configurações referenciados sejam acessíveis. A página é renderizada novamente, fazendo com que os componentes se quebrem; o respectivo código de componente na página não pode ser renderizado novamente devido ao acesso somente leitura do usuário.

Para evitar esse problema, verifique se os usuários do AEM Sites têm as permissões necessárias para acessar os ativos.

OBSERVAÇÃO

Quando você adiciona o componente Mídia dinâmica e as Configurações de mídia dinâmica estão em branco ou não é possível adicionar um ativo corretamente, verifique o seguinte:

  • Você ativou a Mídia dinâmica. As mídias dinâmicas são desativadas 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 possuem um arquivo tiff de pirâmide.

Ao trabalhar com imagens

O componente Mídia dinâmica permite adicionar imagens dinâmicas, incluindo conjuntos de imagens, conjuntos de rotação e conjuntos de mídia mista. Você pode ampliar, reduzir e, se aplicável, transformar uma imagem em um conjunto de giro ou selecionar uma imagem de outro tipo de conjunto.

Você também pode configurar a predefinição do visualizador, a predefinição da imagem ou o formato da 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.

É necessário editar as seguintes configurações do Dynamic Media clicando no ícone Editar no componente e, em seguida, Configurações do Dynamic Media.

dm-settings-image-preset

OBSERVAÇÃO

Por padrão, o componente de imagem do Dynamic Media é adaptável. Se desejar torná-lo um tamanho fixo, defina-o no componente na guia Avançado com as configurações Largura e Altura.

  • Predefinição do visualizadorSelecione uma predefinição do visualizador existente no menu suspenso.
    Se a predefinição de visualizador que você está procurando não estiver visível, pode ser necessário torná-la visível. Consulte Gerenciar predefinições do visualizador. Não é possível selecionar uma predefinição de visualizador se você estiver usando uma predefinição de imagem e vice-versa.
    Essa será a única opção disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mix de mídia. As predefinições do visualizador exibidas também são inteligentes: apenas as predefinições relevantes do visualizador são exibidas.

  • Modificadores do visualizadorOs modificadores do visualizador assumem a forma de par nome=valor com um & delimitador e permitem alterar os visualizadores, conforme descrito no Guia de referência do visualizador.
    Um exemplo de um modificador do visualizador é post-erimage=img.jpg&caption=text.vtt,1 que define uma imagem diferente para a miniatura do vídeo e associa um arquivo de legenda/legenda 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, pode ser necessário torná-la visível. Consulte Gerenciar predefinições de imagens. Não é possível selecionar uma predefinição de 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 mix de mídia.

  • Modificadores
    de imagemVocê pode aplicar efeitos de imagem fornecendo comandos de imagem adicionais. Elas são descritas nas predefinições de imagem e na referência do Comando de disponibilizaçã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 mix de mídia.

  • Pontos de
    interrupçãoSe você estiver usando esse ativo em um site responsivo, é necessário 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 mix de mídia.
    Você pode editar as seguintes Configurações avançadas clicando em Editar no componente.


  • TítuloAltere o título da imagem.

  • Texto alternativoAdicione um título à imagem para os usuários que tiverem 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 mix de mídia.

  • URL, Abrir
    noVocê pode definir um ativo para abrir um link. Defina o URL e, em Abrir em, indique se você deseja que ele abra na mesma janela ou em uma nova.
    Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mix de mídia.

  • Largura e
    alturaInsira o valor em pixels se desejar que a imagem tenha um tamanho fixo. Deixar esses valores em branco torna o recurso adaptável.

Ao trabalhar com vídeo

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.

chlimage_1-540

Você deve editar as seguintes configurações do Dynamic Media clicando em Editar no componente.

OBSERVAÇÃO

Por padrão, o componente de vídeo Mídia dinâmica é adaptável. Se desejar torná-lo um tamanho fixo, defina-o no componente com Largura e Altura na guia Avançado.

  • Predefinição do visualizadorSelecione uma predefinição do visualizador de vídeo existente no menu suspenso.
    Se a predefinição de visualizador que você está procurando não estiver visível, pode ser necessário torná-la visível. Consulte Gerenciar predefinições do visualizador.

  • Modificadores do visualizadorOs modificadores do visualizador assumem a forma de par nome=valor com um & delimitador e permitem alterar os visualizadores, conforme descrito no Guia de Referência dos Visualizadores de Adobe.
    Um exemplo de um modificador do visualizador é post-erimage=img.jpg&caption=text.vtt,1

    Com modificadores do visualizador, por exemplo, você pode fazer o seguinte:

    • Associe um arquivo de legenda a uma legenda de vídeo.
    • Associe um arquivo de navegação a um vídeo navigation.

Você pode editar as seguintes Configurações avançadas clicando em Editar no componente.


  • TítuloAltere o título do vídeo.

  • Largura e
    alturaInsira o valor em pixels se desejar que o vídeo tenha um tamanho fixo. Deixar esses valores em branco faz com ele que seja adaptável.

Ao trabalhar com o Smart Crop

Use o componente Dynamic Media para adicionar ativos de imagem de Recorte 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.

dm-settings-smart-cut

Você pode editar as seguintes Configurações do Dynamic Media clicando em Editar no componente.

OBSERVAÇÃO

Por padrão, o componente de imagem do Dynamic Media é adaptável. Se desejar torná-lo de um tamanho fixo, defina-o no componente na guia Avançado com a Largura e a Altura.

  • Modificadores
    de imagemVocê pode aplicar efeitos de imagem fornecendo comandos de imagem adicionais. Elas são descritas nas predefinições de imagem e na referência do Comando de disponibilizaçã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 mix de mídia.

Você pode editar as seguintes configurações de Avançado clicando em Editar no componente.


  • TítuloAltere o título da imagem de Recorte inteligente.

  • Texto alternativoAdicione 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 mix de mídia.

  • URL, Abrir
    noVocê pode definir um ativo para abrir um link. Defina o URL e, em Abrir em, indique se você deseja que ele abra na mesma janela ou em uma nova.
    Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mix de mídia.

  • Altura e
    larguraInsira o valor em pixels se desejar que a imagem de corte inteligente tenha um tamanho fixo. Deixar esses valores em branco faz com ele que seja adaptável.

Componente de mídia interativa

O componente Mídia interativa é para ativos que possuem 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 de Mídia interativa é inteligente — dependendo se 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 são visualizadores HTML5.

OBSERVAÇÃO

Se houver um componente Dynamic Media, um componente de mídia interativa ou ambos em uma página da Web acessada por um usuário com permissões somente leitura, a página será quebrada e os componentes não serão renderizados corretamente. O motivo é que a página é reconstruída para garantir que as propriedades dos componentes sejam boas e que todos os ativos e configurações referenciados sejam acessíveis. A página é renderizada novamente, fazendo com que os componentes se quebrem; o respectivo código de componente na página não pode ser renderizado novamente devido ao acesso somente leitura do usuário.

Para evitar esse problema, verifique se os usuários do AEM Sites têm as permissões necessárias para acessar os ativos.

chlimage_1-541

É possível editar as seguintes configurações Gerais clicando em Editar no componente.

  • Predefinição do visualizadorSelecione uma predefinição do visualizador existente no menu suspenso.
    Se a predefinição de visualizador que você está procurando não estiver visível, pode ser necessário torná-la visível. As Predefinições do visualizador devem ser publicadas para poderem ser usadas. Consulte Gerenciar predefinições do visualizador.


  • TítuloAltere o título do vídeo.

  • Largura e
    alturaInsira o valor em pixels se desejar que o vídeo tenha um tamanho fixo. Deixar esses valores em branco faz com ele que seja adaptável.

É possível editar as seguintes configurações de Adicionar ao carrinho clicando em Editar no componente.

  • Mostrar
    ativo do produtoPor 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 produtoPor 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

O componente de Mídia panorâmica é destinado aos 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 seguintes:

  • Uma proporção largura/altura de 2:1.
  • Marcado com as palavras-chave "equirectangular" ou ("esférico" + "panorama") ou ("esférico" + "panorâmico"). Consulte Usando tags.

Tanto a proporção quanto os critérios de palavra-chave se aplicam aos ativos panorâmicos para a página de detalhes do ativo e o componente WCM "Mídia panorâmica".

panorâmico-media-viewer-preset

Você pode editar a seguinte configuração tocando em Configurar no componente.

  • Predefinição do visualizadorSelecione 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. É necessário publicar as predefinições do visualizador antes de usá-las. Consulte Gerenciar predefinições do visualizador.

Usar HTTP/2 para delivery de ativos Dynamic Media

HTTP/2 é o novo protocolo da Web atualizado que melhora a maneira como os navegadores e servidores se comunicam. Fornece transferência de informações mais rápida e reduz a quantidade de poder de processamento necessário. O delivery dos ativos Dynamic Media agora pode estar acima de HTTP/2, o que oferece melhor resposta e tempo de carregamento.

Consulte Delivery HTTP2 de Content para obter detalhes completos sobre como começar a usar HTTP/2 com sua conta Dynamic Media.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free