Crear una Galería Responsive en Drupal

00:00
 

Vamos a crear una galería de imágenes en Drupal de manera bien sencilla, un par de módulos, un poco de CSS y listo, ya tienes tu galería Responsive pronta.

Los módulos a utilizar son:

CSS Field Formatters
Field Formatter Class

Opcional, pero útiles, de lo contrario tu imagen no se muestra en un PopUp.

Colorbox
Libraries

Para re dimensionar las imágenes:

Imagecache Actions

Si utilizas el módulo de Drupal Colorbox también necesitas la propia librería Colorbox, la cual descargas desde aquí.

Descomprimes el archivo y lo colocas en sites/all/libraries con el nombre de Colorbox.

Ajustes de Imágenes

A mi me gusta crear estilos personalizados para las imágenes, por eso utilizo el módulo Imagecache Actions, el cual entre muchas opciones una de ellas es la de personalizar las dimensiones de las imágenes que se van a utilizar en nuestros contenidos.

Luego creo dos estilos nuevos "Miniaturas" y "Grande", el primero es para cuando se visualizan todas las imágenes en nuestra galería.
El segundo estilo es para cuando se hace clic sobre una imagen.

Crear la Galería

Yo voy a crear un nuevo Tipo de Contenido llamado "Galería".

Este nuevo contenido solo va ha contener un campo, llamado "Imagen", le puedes poner el nombre que quieras.

Lo importante es que selecciones un número de imágenes múltiples de 3 para que las mismas queden más bonitas.

Ajustes del Campo

Una vez creado el nuevo campo vamos a Administrar Presentación.

Estas son las opciones que tenemos que dejar:

Ajustes del campo

Lo que estamos haciendo es ocultar la etiqueta del campo y cambiar el formato de "Imagen" a Colorbox.

Ahora en los ajustes específicos del nuevo campo yo lo dejo de las siguiente manera:

Ajustes del campo imagen

Estilo de imagen del contenido, selecciono miniatura.

Estilo de imagen colorbox, selecciono grande.

Field Formatter Class, galeria.

De esta manera nuestro nuevo tipo de contenido va ha tener una única clase llamada "galeria".

Estilos CSS de la Galería

Los estilos que utilizo son:

.main img{
width:33%;
float:left;
padding-right:1%;
text-align:center;
display:block;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 750px) {
.main img{
width:100%;
}

Tópico
 
Sistema Operativo
 
Plataforma
 

Premium

Landing Page con Bootstrap

Landing Page con Bootstrap y Gulp

En Youtube

Suscríbete a mi canal

Suscríbete a las noticias

* requerido

Inicio de sesión

Recursos