Cómo crear un sitio web de portfolio y proyectos con Drupal para agencias creativas

Las agencias creativas viven de mostrar su trabajo. Punto. Cada campaña lanzada, cada identidad de marca terminada, cada packaging que consiguió que un producto volase de la estantería — todo eso habla más fuerte que cualquier presentación comercial de 47 diapositivas.

El problema es que demasiadas agencias siguen enviando PDFs por email o manteniendo galerías estáticas montadas hace cuatro años en un WordPress con un theme de 59 dólares. Drupal permite construir un portfolio dinámico, filtrable y visualmente potente que transforma visitantes en leads. No es el camino fácil, pero sí el que aguanta cuando el negocio crece.

En esta guía vamos al grano: arquitectura, módulos concretos y decisiones de diseño para montar un portfolio profesional con Drupal 10 o Drupal 11.

Por qué Drupal es una plataforma sólida para portfolios de agencias

Una agencia no necesita "un blog con fotos bonitas". Un portfolio profesional exige bastante más:

• Taxonomías complejas: filtrar proyectos por sector (hostelería, retail, tech), por tipo de servicio (branding, web, packaging) y por año. A la vez.
• Gestión avanzada de medios: imágenes en alta resolución, vídeos embebidos, comparativas antes/después, mockups interactivos.
• Escalabilidad real: una agencia con diez años puede acumular cientos de proyectos. La estructura tiene que aguantar ese volumen sin que las páginas tarden cinco segundos en cargar.
• Control total del diseño: un proyecto de branding no se presenta igual que una producción audiovisual. Necesitas layouts diferentes para tipos de trabajo diferentes.

Drupal cubre todo esto con tipos de contenido, campos configurables, taxonomías jerárquicas y un ecosistema maduro de módulos para medios. WordPress puede funcionar para portfolios sencillos. Pero en cuanto la complejidad crece, las costuras se notan rápido.

Arquitectura del tipo de contenido "Proyecto"

Lo primero: diseñar un tipo de contenido específico para los proyectos. En Drupal 10/11, se configura desde Estructura > Tipos de contenido > Añadir tipo de contenido. Nada del otro mundo si ya has trabajado con el back-end de Drupal.

Un tipo de contenido "Proyecto" bien pensado debería incluir:

• Título del proyecto (campo título por defecto).
• Cliente (campo de texto, o referencia a entidad si gestionas clientes como entidades separadas — esto último merece la pena si quieres páginas de cliente con todos sus proyectos agrupados).
• Descripción del proyecto (campo de texto largo con formato, usando CKEditor 5).
• Galería de imágenes (campo Media con cardinalidad ilimitada para aprovechar la biblioteca de medios; no uses un campo de imagen simple, te arrepentirás).
• Vídeo destacado (campo Media de tipo Remote Video para embeber desde YouTube o Vimeo).
• Categoría de servicio (referencia a taxonomía: branding, desarrollo web, interiorismo, etc.).
• Sector del cliente (referencia a taxonomía: retail, salud, educación, etc.).
• Año de realización (campo de fecha o lista de opciones).
• Testimonial del cliente (campo de texto largo, opcional pero oro puro para conversión).
• URL del proyecto en vivo (campo Link).

Con esta estructura puedes filtrar, ordenar y agrupar proyectos de formas muy variadas usando Views. Y eso ya nos lleva al siguiente punto.

Módulos esenciales para un portfolio visual

Aquí es donde Drupal marca distancia. El ecosistema de módulos contributivos para presentación visual es amplio y, lo más importante, estable.

Media y Media Library (núcleo)

Desde Drupal 9, la gestión de medios forma parte del núcleo. Media Library permite subir, organizar y reutilizar imágenes y vídeos desde una interfaz visual integrada en el editor. Para una agencia, la ventaja práctica es que cualquier miembro del equipo puede subir las imágenes de un proyecto sin llamar al desarrollador. Eso ahorra horas.

Paragraphs

Paragraphs cambia la experiencia de edición. En lugar de un solo campo de texto largo, permite componer la página del proyecto con bloques: texto + imagen, galería a pantalla completa, cita del cliente, vídeo. Cada proyecto puede tener una estructura narrativa distinta sin tocar código por cada variación.

Layout Builder (núcleo)

Disponible en el núcleo desde Drupal 9, Layout Builder permite diseñar layouts por tipo de contenido o incluso por nodo individual. Resultado práctico: defines un layout por defecto para todos los proyectos y luego personalizas la disposición de ese proyecto estrella que necesita más protagonismo visual. Sin crear plantillas Twig adicionales para cada caso especial.

Views (núcleo)

Views es la pieza central de los listados. Con él puedes construir:

• Una página principal del portfolio con filtros expuestos por categoría y sector.
• Un bloque de "proyectos relacionados" al final de cada proyecto, mostrando trabajos del mismo sector.
• Páginas de portfolio filtradas por servicio, perfectas como landing pages específicas (por ejemplo, /portfolio/branding).

Focal Point

Cuando subes imágenes de proyectos, el crop automático a menudo corta justo lo que no debe. Focal Point permite definir el punto de interés de cada imagen para que los recortes en thumbnails y listados siempre muestren la parte relevante. En un portfolio donde la calidad visual lo es todo, instalar Focal Point no es opcional.

Metatag y Pathauto

Metatag configura las etiquetas meta (título, descripción, Open Graph) de cada proyecto para que se compartan correctamente en redes sociales. Pathauto genera URLs limpias automáticamente siguiendo patrones como /portfolio/[node:field_categoria]/[node:title]. SEO y usabilidad de un golpe.

Diseño responsive y presentación visual

Un portfolio de agencia que se ve mal en móvil pierde credibilidad al instante. No hay discusión posible. Drupal 10/11 trabaja con temas basados en Twig que dan control total sobre el HTML generado.

Opciones de tema base

• Olivero (tema por defecto del núcleo): limpio y accesible. Punto de partida válido con CSS personalizado, aunque para una agencia suele quedarse corto.
• Radix: tema base con integración Bootstrap 5. Útil si el equipo ya trabaja con este framework.
• Tema personalizado: la opción que elige la mayoría. Drupal lo facilita con plantillas Twig — sobrescribes node--proyecto--full.html.twig y controlas cada detalle.

Imágenes responsive

Drupal incluye el módulo Responsive Image en el núcleo. Configurando estilos de imagen y breakpoints, sirves imágenes optimizadas para cada tamaño de pantalla. En un portfolio con imágenes pesadas, esto mejora el rendimiento y la puntuación en Core Web Vitals. Y sí, Google lo tiene en cuenta.

Galerías y lightbox

Para las galerías de proyectos, Colorbox o su alternativa GLightbox permiten abrir imágenes en un visor superpuesto con navegación. Combinado con un grid CSS personalizado, consigues una presentación que invita a explorar cada proyecto con calma.

Filtrado y navegación del portfolio

Aquí se separan los portfolios que convierten de los que simplemente "están ahí". La navegación marca la diferencia.

Con Views y sus filtros expuestos, puedes crear una experiencia que permita al visitante encontrar rápidamente proyectos relevantes para su sector. Una implementación efectiva incluye:

• Filtros por taxonomía (servicio, sector) renderizados como botones o enlaces, no como selectores de formulario. El módulo Better Exposed Filters transforma los filtros estándar de Views en elementos más visuales y amigables. Los desplegables genéricos de formulario son muerte para la conversión.
• Carga AJAX: activando AJAX en la configuración de Views, los filtros actualizan el listado sin recargar la página. Sensación de aplicación moderna con esfuerzo mínimo.
• Ordenación inteligente: primero los proyectos destacados (usando un campo booleano "Destacado" en el tipo de contenido) y luego por fecha, del más reciente al más antiguo.
• Paginación o scroll infinito: el módulo Views Infinite Scroll carga más proyectos conforme el usuario hace scroll. Ideal para portfolios con gran volumen de trabajo.

Rendimiento y optimización para portfolios con muchas imágenes

Un portfolio de agencia creativa puede acumular cientos de imágenes de alta resolución. Sin optimización, el tiempo de carga se dispara y Google te penaliza. Estas son las medidas que no puedes saltarte:

• Estilos de imagen: define estilos en Drupal para generar automáticamente versiones en miniatura, tamaño medio y pantalla completa. No sirvas un archivo de 5 MB cuando el thumbnail solo necesita 200 KB.
• Conversión a WebP: el módulo WebP o la configuración nativa de Drupal 11 permite servir imágenes en formato WebP, que pesa entre un 25% y un 35% menos que JPEG con la misma calidad visual.
• Lazy loading: activado por defecto en Drupal 10/11 para imágenes fuera del viewport inicial. Las imágenes se cargan solo cuando el usuario hace scroll hasta ellas.
• CDN: para agencias con audiencia internacional, servir las imágenes desde un CDN (Cloudflare, AWS CloudFront) reduce la latencia de forma considerable.
• Caché de páginas y vistas: configurar el sistema de caché interno de Drupal y, si el tráfico lo justifica, añadir Varnish por delante. La diferencia entre una página cacheada y una que se renderiza cada vez puede ser de 10x en tiempo de respuesta.

Ejemplo real: estructura de portfolio para una agencia de diseño gráfico

Imaginemos una agencia de diseño gráfico con 150 proyectos realizados en los últimos ocho años, que ofrece servicios de branding, packaging, editorial y diseño web. Un caso típico.

La estructura en Drupal quedaría así:

• Tipo de contenido "Proyecto" con campos para cliente, galería (campo Media, hasta 20 imágenes por proyecto), categoría de servicio (taxonomía con cuatro términos), sector del cliente (taxonomía con diez términos), año y testimonial.
• Vista "Portfolio" en /portfolio con filtros por categoría de servicio, renderizados como botones con Better Exposed Filters y carga AJAX. Grid de tres columnas en escritorio, dos en tablet, una en móvil.
• Vista "Proyectos destacados" como bloque en la página de inicio, mostrando los seis proyectos marcados como destacados con imagen principal a gran tamaño.
• Página de proyecto individual construida con Paragraphs: bloque de cabecera con imagen hero + título, bloque de brief del proyecto, galería de imágenes con lightbox, bloque de resultado (métricas o testimonial), y bloque de proyectos relacionados (misma categoría de servicio).

Con esta estructura, la agencia publica un nuevo proyecto en menos de quince minutos. Sin depender de nadie del equipo técnico. Manteniendo la coherencia visual de todo el portfolio.

El portfolio como herramienta comercial, no solo como escaparate

Un portfolio bien construido en Drupal no es un catálogo bonito. Es un comercial que trabaja 24 horas sin pedir comisiones. Los filtros por sector permiten enviar URLs específicas a potenciales clientes — "mira lo que hemos hecho para otras empresas de hostelería" tiene un impacto muy diferente a "mira nuestra web". Las páginas individuales con testimoniales funcionan como mini casos de estudio que generan confianza real.

Si tu agencia necesita un portfolio que esté a la altura de vuestro trabajo creativo, en Tangram Consulting diseñamos e implementamos sitios Drupal a medida para agencias que quieren convertir su web en su mejor vendedor. Hablemos sobre tu proyecto y definimos juntos la arquitectura que se adapte a vuestro catálogo y objetivos de negocio.