Extra Block Types (EBT) - Nueva experiencia con Layout Builder❗

Extra Block Types (EBT): tipos de bloques con estilo y personalizables: Presentaciones de diapositivas, Pestañas, Tarjetas, Acordeones y muchos más. Configuraciones integradas para fondo, DOM Box y plugins de JavaScript. Experimenta hoy el futuro de la construcción de diseños.

Módulos de demostración EBT Descargar módulos EBT

❗Extra Paragraph Types (EPT) - Nueva experiencia con Paragraphs

Extra Paragraph Types (EPT): conjunto de módulos basado en párrafos de forma análoga.

Módulos de demostración EPT Descargar módulos EPT

Scroll

1.8. Imagen: Trabajo con imágenes, estilos predefinidos.

03/05/2025, by Ivan

Drupal puede trabajar no solo con páginas de texto, sino también con imágenes. Para ello, necesitas habilitar el módulo Image. Este módulo permite adjuntar fotos a los nodos y mostrarlas con el tamaño que necesitemos. Además, en diferentes lugares del sitio estos tamaños pueden variar. Por ejemplo, en el teaser del nodo podemos usar una imagen pequeña, y en el nodo completo una imagen grande.

En lecciones anteriores creamos el tipo de contenido Empleado. Vamos a abrir la opción Gestionar campos para el tipo de contenido Empleado y añadir un campo de imagen.

campo empleado

Ahora, en el formulario para crear/editar un empleado, habrá un campo para subir imágenes:

foto empleado

Esta imagen se mostrará en la página del empleado, pero en su tamaño original y con la etiqueta del campo Imagen. Para configurar la visualización, hay que ir a la pestaña Gestionar presentación en la configuración del tipo de contenido Empleado.

configurar campos Drupal

Movemos el campo de imagen hacia arriba, quitamos la visualización de la etiqueta del campo y hacemos clic en el engranaje para definir el tamaño de imagen a mostrar. Por defecto ya existen tamaños predefinidos: Grande (480x480), Mediano (220x220), Miniatura (100x100). Vamos a elegir Miniatura para el teaser, y Mediano para el nodo completo. También, en el teaser, configuramos que la imagen sea un enlace al nodo del empleado:

configurar campos Drupal

Ahora, en las vistas de teaser, la imagen del empleado será un enlace a su página completa.

Además de los tamaños predefinidos Grande, Mediano y Miniatura, puedes crear tus propios estilos de imagen. Ve a la página Configuración - Estilos de imagen:

/admin/config/media/image-styles

Allí verás los estilos existentes y el botón para añadir un nuevo estilo:

añadir estilo de imagen

Crearemos uno de 150x150 píxeles y lo llamaremos igual. En la página de edición del estilo veremos acciones disponibles:

presets drupal

  • Convertir – convierte la imagen a otro formato.
  • Recortar – recorta la imagen sin escalar.
  • Desaturar – convierte la imagen a blanco y negro.
  • Redimensionar – cambia el tamaño sin mantener proporciones.
  • Rotar – rota la imagen en el ángulo deseado.
  • Escalar – cambia el tamaño manteniendo proporciones.

Se pueden aplicar varias acciones. Vamos a aplicar Escalar a 150x150 y luego desaturar la imagen (hacerla en blanco y negro).

escalado de imagen Drupal

Volvemos a Gestionar presentación y configuramos la visualización del campo de imagen en el teaser del empleado usando el estilo 150x150:

nuevo preset drupal

Así se verá ahora el teaser del empleado:

anuncio drupal

Ahora sabes cómo subir imágenes en Drupal y cómo mostrarlas del modo que necesites. En las siguientes lecciones veremos cómo crear una galería de fotos de manera similar.