Adición de Dynamic Media Assets a las páginas adding-dynamic-media-assets-to-pages
Para añadir la funcionalidad de Dynamic Media a los recursos que utilice en sus sitios web, puede agregar la variable Dynamic Media o Medios interactivos directamente en la página. Para ello, introduzca el modo Diseño y active los componentes de Dynamic Media. A continuación, puede añadir estos componentes a la página y añadir recursos al componente. Los componentes de Dynamic Media y Medios interactivos son inteligentes: saben si va a añadir una imagen o un vídeo y las opciones disponibles cambian en consecuencia.
Los recursos de Dynamic Media se agregan directamente a la página si utiliza AEM como WCM. Si utiliza un tercero para su WCM, vincule o incruste los recursos. Para ver un sitio web interactivo de terceros, consulte Distribución de imágenes optimizadas en un sitio interactivo.
Adición de un componente de Dynamic Media a una página adding-a-dynamic-media-component-to-a-page
Añadir un componente Dynamic Media a una página es lo mismo que añadir un componente a cualquier página. Los componentes de Dynamic Media se describen en detalle en las secciones siguientes.
-
En AEM, abra la página a la que desee añadir el componente Dynamic Media.
-
En el panel del lado izquierdo de la página (es posible que tenga que alternar la visualización del panel lateral), haga clic en el botón Componentes icono.
-
En el Componentes , en la lista desplegable , seleccione Dynamic Media. Si no hay ninguna lista de componentes de Dynamic Media disponible, es probable que deba habilitar los componentes de Dynamic Media que desee utilizar. Consulte Habilitación de componentes de Dynamic Media.
-
Arrastre un componente de Dynamic Media que desee usar a la página en la ubicación deseada.
-
Pase el puntero del ratón directamente sobre el componente. Cuando el componente esté rodeado por un cuadro azul, pulse una vez para mostrar la barra de herramientas del componente. Toque . Configuración (llave inglesa).
-
Editar los componentes según sea necesario y haga clic en la marca de verificación para guardar los cambios.
Habilitación de componentes de Dynamic Media enabling-dynamic-media-components
Si no hay componentes de Dynamic Media disponibles para agregarlos a una página, es probable que deba habilitar primero los componentes que desee utilizar.
-
En AEM, abra la página a la que desee añadir el componente Dynamic Media.
-
En el lado izquierdo de la barra de herramientas, cerca de la parte superior de la página, pulse el icono Información de página y, a continuación, pulse Editar plantilla en la lista desplegable.
-
En el lado derecho de la barra de herramientas, cerca de la parte superior de la página, en la lista desplegable, pulse Estructura.
-
Cerca de la parte inferior de la página, pulse Contenedor de diseño para abrir su barra de herramientas, pulse el icono Política .
-
En el Contenedor de diseño en el Propiedades , asegúrese de que Componentes permitidos está seleccionada.
-
Desplácese hasta que vea Dynamic Media.
-
Pulse el icono > a la izquierda de Dynamic Media para expandir la lista, seleccione los componentes de Dynamic Media que desea activar.
-
Cerca de la esquina superior derecha de la Contenedor de diseño , pulse el icono Listo (marca de verificación).
-
En el lado derecho de la barra de herramientas, cerca de la parte superior de la página, en la lista desplegable, pulse Contenido inicial, luego añadir un componente de Dynamic Media a una página como de costumbre.
Localización de componentes de Dynamic Media localizing-dynamic-media-components
Puede localizar los componentes de Dynamic Media de una de las dos maneras siguientes:
-
En una página web de Sites, abra Propiedades y seleccione la pestaña Avanzadas. Seleccione el idioma que desee para la localización.
-
En el selector de sitio, seleccione la página o el grupo de páginas que desee. Toque Propiedades y seleccione Avanzadas pestaña . Seleccione el idioma que desee para la localización.
note note NOTE Tenga en cuenta que no todos los idiomas están disponibles en el Idioma tiene actualmente asignados tokens.
Componentes de Dynamic Media dynamic-media-components
Dynamic Media y Medios interactivos están disponibles en la sección Dynamic Media en Componentes. Utilice la variable Medios interactivos para cualquier recurso interactivo, como vídeo interactivo, imágenes interactivas o conjuntos de carrusel. Para todos los demás componentes de Dynamic Media, utilice el componente Dynamic Media .
Componente de Dynamic Media dynamic-media-component
El componente Dynamic Media es inteligente: en función de si se añade una imagen o un vídeo, hay varias opciones. El componente admite ajustes preestablecidos de imagen, visores basados en imágenes, como conjuntos de imágenes, conjuntos de giros, conjuntos de medios mixtos y vídeo. Además, el visor es interactivo. Es decir, el tamaño de la pantalla cambia automáticamente en función del tamaño de la pantalla. Todos los visores son visores HTML5.
- Tiene habilitado para Dynamic Media. Dynamic Media está desactivado de forma predeterminada.
- La imagen tiene un archivo tiff piramidal. Las imágenes importadas antes de que los medios dinámicos estén activados no tienen un archivo tiff piramidal.
Uso de imágenes when-working-with-images
El componente Dynamic Media permite añadir imágenes dinámicas, incluidos conjuntos de imágenes, conjuntos de giros y conjuntos de medios mixtos. Puede acercar, alejar y, si corresponde, girar una imagen dentro de un conjunto de giros o seleccionar una imagen de otro tipo de conjunto.
También puede configurar el ajuste preestablecido de visualizador, el ajuste preestablecido de imagen o el formato de imagen directamente en el componente. Para que una imagen sea interactiva, puede establecer puntos de interrupción o aplicar un ajuste preestablecido de imagen interactivo.
Para editar las siguientes opciones de configuración de Dynamic Media, haga clic en el botón Editar en el componente y, a continuación, Configuración de Dynamic Media.
-
Ajuste preestablecido del visor
Seleccione un ajuste preestablecido de visualizador existente en el menú desplegable. Si el ajuste preestablecido de visualizador que está buscando no está visible, es posible que tenga que hacerlo visible. Consulte Administración de ajustes preestablecidos de visualizador. No puede seleccionar un ajuste preestablecido de visualizador si utiliza un ajuste preestablecido de imagen y viceversa.
Esta es la única opción disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos. Los ajustes preestablecidos de visor que se muestran también son inteligentes: solo aparecen los ajustes preestablecidos de visor relevantes. -
Modificadores del visor
Los modificadores del visualizador toman la forma de par name=value con un delimitador & y permiten cambiar los visualizadores como se describe en la Guía de referencia del visualizador. Un ejemplo de modificador de visor es posterimage=img.jpg&caption=text.vtt,1 que establece una imagen diferente para la miniatura del vídeo y asocia un archivo de subtítulo/subtítulo/subtítulo cerrado con el vídeo. -
Ajuste preestablecido de imagen
Seleccione un ajuste preestablecido de imagen existente en el menú desplegable. Si el ajuste preestablecido de imagen que está buscando no está visible, es posible que tenga que hacerlo visible. Consulte Administración de ajustes preestablecidos de imagen. No puede seleccionar un ajuste preestablecido de visualizador si utiliza un ajuste preestablecido de imagen y viceversa.
Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos. -
Modificadores de imagen
Puede aplicar efectos de imagen suministrando comandos de imagen adicionales. Estos se describen en Ajustes preestablecidos de imagen y en la referencia del comando de servicio de imágenes.
Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos. -
Puntos de interrupción
Si utiliza este recurso en un sitio interactivo, debe añadir los puntos de interrupción de la imagen. Los puntos de interrupción de la imagen deben separarse con comas (,). Esta opción funciona cuando no hay ninguna altura o anchura definidas en un ajuste preestablecido de imagen.
Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
Puede editar la siguiente Configuración avanzada haciendo clic en Editar en el componente. -
Título
Cambie el título de la imagen. -
Texto alternativo
Agregue un título a la imagen para los usuarios que tengan los gráficos desactivados.
Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos. -
URL, Abrir en
Puede configurar un recurso para abrir un vínculo. Defina la dirección URL y, en Abrir en , indique si desea que se abra en la misma ventana o en una nueva ventana.
Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos. -
Anchura y Altura
Introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Si deja estos valores en blanco, el recurso se adapta.
Al trabajar con vídeo when-working-with-video
Utilice el componente Dynamic Media para añadir vídeo dinámico a las páginas web. Al editar el componente, puede elegir utilizar un ajuste preestablecido de visualizador de vídeo predefinido para reproducir el vídeo en la página.
Debe editar las siguientes opciones de configuración de Dynamic Media haciendo clic en Editar en el componente.
-
Ajuste preestablecido del visor
Seleccione un ajuste preestablecido de visualizador de vídeo existente en el menú desplegable. Si el ajuste preestablecido de visualizador que está buscando no está visible, es posible que tenga que hacerlo visible. Consulte Administración de ajustes preestablecidos de visualizador. -
Modificadores del visor
Los modificadores del visor toman la forma de par name=value con un delimitador & y permiten cambiar los visualizadores como se describe en la Guía de referencia de visores de Adobe. Un ejemplo de modificador de visor es posterimage=img.jpg&caption=text.vtt,1Con los modificadores del visor, por ejemplo, puede hacer lo siguiente:
- Asociación de un archivo de rótulo a un vídeo caption.
- Asociación de un archivo de navegación con un vídeo navegación.
Puede editar lo siguiente Configuración avanzada haciendo clic en Editar en el componente.
-
Título
Cambie el título del vídeo. -
Anchura y Altura
Introduzca el valor en píxeles si desea que el vídeo sea de un tamaño fijo. Dejar estos valores en blanco lo hace adaptable.
Trabajar con Recorte inteligente when-working-with-smart-crop
Utilice el componente Dynamic Media para añadir recursos de imagen de recorte inteligente a sus páginas web. Al editar el componente, puede elegir utilizar un ajuste preestablecido de visualizador de vídeo predefinido para reproducir el vídeo en la página.
Consulte también Perfiles de imagen.
Puede editar lo siguiente Configuración de Dynamic Media haciendo clic en Editar en el componente.
- Modificadores de imagen
Puede aplicar efectos de imagen suministrando comandos de imagen adicionales. Estos se describen en Ajustes preestablecidos de imagen y en la referencia del comando de servicio de imágenes.
Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
Puede editar lo siguiente Avanzadas configuración haciendo clic en Editar en el componente.
-
Título
Cambie el título de la imagen de recorte inteligente. -
Texto alternativo
Agregue un título a la imagen de recorte inteligente para los usuarios que tengan los gráficos desactivados.
Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos. -
URL, Abrir en
Puede configurar un recurso para abrir un vínculo. Defina la dirección URL y, en Abrir en , indique si desea que se abra en la misma ventana o en una nueva ventana.
Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos. -
Altura y Anchura
Introduzca el valor en píxeles si desea que la imagen de recorte inteligente sea de un tamaño fijo. Dejar estos valores en blanco lo hace adaptable.
Componente de Medios interactivos interactive-media-component
El componente de Medios interactivos es para los recursos que tienen interactividad en ellos, como puntos interactivos o mapas de imágenes. Si tiene una imagen interactiva, un vídeo interactivo o un titular de carrusel, utilice el componente Medios interactivos .
El componente de Medios interactivos es inteligente: en función de si agrega una imagen o un vídeo, tiene varias opciones. Además, el visor es interactivo: el tamaño de la pantalla cambia automáticamente en función del tamaño de la pantalla. Todos los visores son visores HTML5.
Puede editar lo siguiente General configuración haciendo clic en Editar en el componente.
-
Ajuste preestablecido del visor
Seleccione un ajuste preestablecido de visualizador existente en el menú desplegable. Si el ajuste preestablecido de visualizador que está buscando no está visible, es posible que tenga que hacerlo visible. Los ajustes preestablecidos de visor deben publicarse antes de poder utilizarse. Consulte Administración de ajustes preestablecidos de visualizador. -
Título
Cambie el título del vídeo. -
Anchura y Altura
Introduzca el valor en píxeles si desea que el vídeo sea de un tamaño fijo. Dejar estos valores en blanco lo hace adaptable.
Puede editar lo siguiente Agregar al carro configuración haciendo clic en Editar en el componente.
-
Mostrar recurso del producto
De forma predeterminada, este valor está seleccionado. El recurso de producto muestra una imagen del producto según se define en el módulo Comercio . Desactive la marca de verificación para no mostrar el recurso del producto. -
Mostrar precio del producto
De forma predeterminada, este valor está seleccionado. El precio del producto muestra el precio del artículo tal como se define en el módulo Comercio. Desactive la marca de verificación para no mostrar el precio del producto. -
Mostrar formulario de producto
De forma predeterminada, este valor no está seleccionado. El formulario de producto incluye variantes de producto como tamaño y color. Desactive la marca de verificación para no mostrar las variantes del producto.
Componente de medios panorámicos panoramic-media-component
El componente Panoramic Media es para aquellos recursos que son imágenes panorámicas esféricas. Estas imágenes proporcionan una experiencia de visualización de 360° de una habitación, propiedad, ubicación o paisaje. Para que una imagen pueda calificarse como panorama esférico, debe tener una o ambas de las siguientes opciones:
- Una relación de aspecto de 2:1.
- Etiquetada con las palabras clave "equirectangular" o ("esférica" + "panorámica") o ("esférica" + "panorámica"). Consulte Uso de etiquetas.
Tanto la proporción de aspecto como los criterios de palabra clave se aplican a los recursos panorámicos para la página de detalles de recursos y el componente WCM "Medios panorámicas".
Para editar la siguiente configuración, pulse Configurar en el componente.
- Ajuste preestablecido de visor
Seleccione un visor existente en el menú desplegable Ajuste preestablecido de visor .
Si el ajuste preestablecido de visualizador que está buscando no está visible, compruebe que se ha publicado. Debe publicar ajustes preestablecidos de visualizador para poder utilizarlos. Consulte Administración de ajustes preestablecidos de visor.
Uso de HTTP/2 para enviar recursos de Dynamic Media using-http-to-delivery-dynamic-media-assets
HTTP/2 es el nuevo protocolo web actualizado que mejora la forma en que se comunican los exploradores y los servidores. Proporciona una transferencia de información más rápida y reduce la cantidad de potencia de procesamiento necesaria. La entrega de recursos de Dynamic Media ahora puede realizarse a través de HTTP/2, lo que proporciona una mejor respuesta y tiempos de carga.
Consulte Entrega HTTP2 de contenido para obtener información detallada sobre cómo empezar a usar HTTP/2 con su cuenta de Dynamic Media.