Image URL Formatter
Proporciona formateadores de campo que generan la URL de imágenes y archivos en lugar de renderizar elementos HTML.
image_url_formatter
Instalar
composer require 'drupal/image_url_formatter:^2.0'
composer require 'drupal/image_url_formatter:8.x-1.1'
Overview
Image URL Formatter añade un nuevo formateador de visualización para campos de Image y File que genera la URL directa al archivo en lugar de renderizar el marcado HTML completo <img> o de enlace. Esto es particularmente útil cuando necesitas usar la URL de la imagen en plantillas personalizadas, aplicaciones JavaScript o integrar con servicios externos que requieren URLs sin formato.
El módulo soporta tanto campos de imagen como campos de archivo, con opciones flexibles de salida de URL incluyendo URLs completas, rutas absolutas y rutas relativas. Para campos de imagen, también puedes aplicar estilos de imagen para obtener la URL de una imagen derivada procesada en lugar de la original.
Features
- Genera URLs de imagen/archivo en lugar de marcado HTML renderizado
- Tres opciones de tipo de URL: URL completa, Ruta de archivo absoluta y Ruta de archivo relativa
- Soporte de estilos de imagen para URLs de imágenes derivadas procesadas (solo campos de imagen)
- Enlace opcional a la entidad de contenido o archivo
- Compatible con Views para mostrar URLs de imágenes
- Salida personalizable mediante sobrescritura de plantilla Twig
Use Cases
Drupal Headless/Desacoplado
Al construir un sitio Drupal desacoplado con un frontend JavaScript (React, Vue, Angular), a menudo necesitas URLs de imagen sin formato en lugar de HTML renderizado. Usa Image URL Formatter en exportaciones REST de Views o JSON:API para proporcionar URLs de imagen limpias para tu aplicación frontend.
Plantillas Twig Personalizadas
Al construir plantillas personalizadas que requieren control preciso sobre el marcado de imágenes, usa Image URL Formatter para obtener la URL de la imagen, luego construye tus propias etiquetas <img> con atributos personalizados, carga diferida o galerías de imágenes potenciadas por JavaScript.
Imágenes de Fondo CSS
Para patrones de diseño que usan imágenes de fondo en CSS, genera la URL de la imagen y úsala en estilos en línea o pásala a JavaScript para configurar fondos dinámicamente.
Meta Tags para Redes Sociales
Al construir meta tags de Open Graph o Twitter Card que requieren URLs de imagen absolutas, usa la opción URL completa para obtener URLs completas adecuadas para previsualizaciones de compartir en redes sociales.
Plantillas de Email
Los clientes de correo electrónico requieren URLs absolutas para imágenes. Usa la opción URL completa para generar URLs de imagen correctamente formateadas para emails HTML.
Precarga de Imágenes
Genera una lista de URLs de imágenes para precarga basada en JavaScript, bibliotecas de carga diferida o estrategias de caché de service worker.
Tips
- Usa 'URL completa' cuando la URL se usará fuera de tu sitio (emails, APIs, compartir en redes sociales)
- Usa 'Ruta de archivo relativa' para la opción más portable dentro de tus propias plantillas
- El formateador funciona con campos de imagen multivaluados, generando una URL para cada imagen
- Sobrescribe la plantilla image-url-formatter.html.twig en tu tema para personalizar el formato de salida
- En Views, puedes usar la salida de URL como un token en resultados de reescritura para necesidades de formateo complejas
Technical Details
Hooks 1
hook_theme
Define el hook de tema image_url_formatter con variables para item, url, image_style y url_type
Troubleshooting 3
Limpia la caché después de cambiar la configuración del estilo de imagen. Si la imagen derivada aún no existe, Drupal la generará en el primer acceso.
Usa 'URL completa' cuando tu sitio use un CDN o dominio diferente para archivos, ya que las rutas relativas no incluirán el dominio correcto.
Verifica que estés usando 'Image URL Formatter' y no el formateador 'Image'. También verifica que ningún otro módulo esté alterando la salida del campo.