Berlin - Componentes | Imagen

Última modificación:


El componente "Imagen" permite insertar una imagen en el contenido.

Por defecto, se añade dentro de las secciones (Ver aquí) y los popups (Ver aquí), aunque también se podrá añadir en el interior de otros componentes (por ejemplo, dentro de un destacado, un acordeón, una fila, etc.)

Encontraremos este componente en el grupo de componentes "Imagen".

Image 6992

Componentes internos

Una imagen puede albergar en su interior dos componentes:

  • Créditos, que cuentan con propiedades específicas para definir su color y su posición en la imagen (arriba, abajo, derecha, izquierda...)
  • Pie de foto, que se sitúa en la zona inferior de la imagen. Este componente cuenta con propiedades especificas que también tiene el componente "Texto". (Para conocer el comportamiento de estas propiedades, visita el aquí)

Image 6993

Propiedades de la imagen

PROPIEDADDESCRIPCIÓN
Estilo

Permite definir la posición de la imagen con respecto a la columna central de contenidos:

  • Centrada al contenido.
  • Desborda a la derecha
  • Desborda a la izquierda
  • Ancho contenido
  • Desborda ambos laterales.
TítuloTítulo de la imagen.
Texto alternativoTexto descriptivo de la imagen. Se mostrará cuando el usuario sitúe el ratón sobre la imagen o, en caso de que ésta no se cargue, se verá este texto en su lugar.
RecursoFichero de imagen que se visualizará. Pulsaremos "Examinar" para acceder a la carpeta de Recursos de la unidad (ver aquí) y seleccionar en ella la imagen deseada. Se admiten imágenes con formato jpeg, png y gif.
Enlace a popupPermite convertir la imagen un elemento interactivo, enlazándola a un popup (Ver cómo crear y gestonar popups aquí). Esta propiedad es excluyente con respecto a las propiedades "Enlace a recurso" y "Enlace externo", es decir, si se enlaza la imagen a un popup, no podrá enlazarse al mismo tiempo a, por ejemplo, un recurso.
Enlace a recursoPermite enlazar la imagen a un fichero PDF o ZIP. Pulsaremos "Examinar" para acceder a la carpeta de Recursos de la unidad (ver aquí) y seleccionar en ella el fichero que se desea enlazar. Esta propiedad es excluyente con respecto a las propiedades "Enlace a popup" y "Enlace externo", es decir, si se enlaza la imagen a un recurso, no podrá enlazarse al mismo tiempo a, por ejemplo, un popup.
Enlace externoPermite enlazar la imagen a una url Esta propiedad es excluyente con respecto a las propiedades "Enlace a popup" y "Enlace a recurso", es decir, si se enlaza la imagen a una web no podrá enlazarse al mismo tiempo a, por ejemplo, un popup.
Posición del icono del link

Si hemos añadido un enlace en la imagen (ya sea a un popup, a un recurso o a una url), se añadirá automáticamente un icono sobre la imagen para indicar que es interactiva. Con esta propiedad podremos decidir dónde se colocará el icono: en la zona superior izquierda, superior derecha, inferior inzquierda o inferior derecha.

Icono del enlace (40x40px)Por defecto, cuando añadimos en enlace a una imagen, se incluye el siguiente icono:

Image 6994

Esta propiedad nos permitirá sustituirlo por cualquier otra imagen que deseemos. El nuevo icono deberá tener un tamaño máximo de 40x40 píxeles y se recomienda que sea un fichero png con fondo transparente, para que se ajuste bien a la imagen.

Ancho

Permite modificar el espacio que ocupa el componente dentro de la columna central de contenidos. Por defecto, ocupa el 100% del espacio disponible, pero puede reducirse utilizando otros porcentajes predefinidos o puede disponerse a "full-size". En algunos estilos de las citas, el tamaño "Full" hace que ésta sobrepase al ancho de la columna central.

AlinearPermite situar el componente alineado a la derecha, a la izquierda o al centro de la columna central de contenidos. Solo tiene efecto cuando aplicamos un "Ancho" menor al 100%.
Flotar

Permite que la imagen quede "enmarcada" en torno a un texto.

Image 6995

  1. Primero, en la propiedad "Ancho", marcamos un tamaño menor al 100% (por ejemplo, el 25%).
  2. En la propiedad "Flotar" decidimos en qué posición queremos que quede flotada la imagen (a la izquierda o la derecha del texto).
  3. Movemos la imagen con sus flechas para colocarla sobre el texto.Image 6996

¿Le resulta útil este artículo?
© 2023 Netex Knowledge Factory. Todos los derechos reservados. Aviso Legal | Política de Privacidad | Política de Cookies.
-