Crear una galería en Drupal 7 con CSS
Hace tiempo ya he hecho un vídeo donde mostraba como crear una galería de imágenes en Drupal 7.
El problema era que teníamos que modificar el código de nuestra plantilla para poder alinear nuestras imágenes.
Las dudas y problemas fueron muchas, así que se me ocurrió una forma más sencilla de lograr lo mismo pero sin tener que tocar el código de nuestro tema.
Las dudas y problemas fueron muchas, así que se me ocurrió una forma más sencilla de lograr lo mismo pero sin tener que tocar el código de nuestro tema.
Así que en el día de hoy les traigo un vídeo donde veremos como podemos hacer exactamente lo mismo, pero de una manera mucho más sencilla.
Los módulos que vamos a utilizar son:
Extras:
Para poder hacer la galería necesitamos seguir 3 pasos:
- Crear nuestro tamaño para las imágenes de la galería
- Crear el nuevo tipo de contenido con su campo correspondiente
- Crear el estilo CSS por medio de CSS injector
Una vez descargados y habilitados todos los módulos (recuerda que el plugin Colorbox va en site/all/libraries) empezamos.
Creando el tamaño para las miniaturas de la galería.
Vamos a Configuración->[Medios]->Estilos de Imagen y añadimos un estilo nuevo.
Yo para este ejemplo voy a crear el tamaño que quiero que se vean las miniaturas, tu perfectamente puedes modificar dichos valores por los que tu consideres.
También puedes crear un estilo adicional, por ejemplo para cuando se haga clic en la imagen, yo no lo voy a hacer, para ello voy a utilizar el tamaño de Drupal creado por la instalación (large).
También puedes crear un estilo adicional, por ejemplo para cuando se haga clic en la imagen, yo no lo voy a hacer, para ello voy a utilizar el tamaño de Drupal creado por la instalación (large).
Le asigno un nombre, en este caso, galeria_miniatura, puede ser cualquiera, solo recuerda que luego lo vamos a necesitar.
Y opto como efecto nuevo, Escalar y recortar con unas dimensiones de 200px por 120.
Estos valores funcionan muy bien con Bartik porque Bartik tiene 690 px para el contenido y yo quiero que mi galería contenga 3 columnas con una separación de cada imagen entre si de 10px.
Y opto como efecto nuevo, Escalar y recortar con unas dimensiones de 200px por 120.
Estos valores funcionan muy bien con Bartik porque Bartik tiene 690 px para el contenido y yo quiero que mi galería contenga 3 columnas con una separación de cada imagen entre si de 10px.
Por tanto 3 x 200 = 600px más la separación, me queda bien.
Por supuesto tu tienes que ajustar estos valores según el tema que utilices.
Creando el nuevo tipo de contenido para nuestra galería.
Ahora vamos a Estructura->Tipos de contenido-> Añadir nuevo tipo de contenido.
Tu pon la información que tu consideres, si tienes dudas mira el vídeo.
Guardamos el nuevo tipo de contenido.
Lo importante aquí es agregar el campo para nuestra imagen, así que en Gestionar Campos agrega uno nuevo para nuestras imágenes de la galería.
Es importante que por lo menos selecciones más de una imagen para nuestra galería, porque de lo contrarío solo podrás ingresar una sola imagen cuando crees la galería.
Yo para hacerla fácil selecciono ilimitados, pero por ejemplo podrías seleccionar 12, etc....
Ahora clic en Gestionar la presentación
Es importante que el campo de la imagen quede al comienzo del todo, por lo menos encima de Body, recuerda que si lo deseas Body se puede eliminar, no es necesario para nuestra galería, a menos que quieras escribir algo sobre las imágenes.
En el campo de tu imagen selecciona Caja de Color en Formato y luego clic en la rueda dentada de la derecha y pon estos valores.
Explicación:
Node image style
Es el estilo de la imagen en nuestra galería, osea como se muestra cuando la misma se carga, antes de que se haga clic.
Para este yo seleccione el estilo de imagen que había creado anteriormente.
Es el estilo de la imagen en nuestra galería, osea como se muestra cuando la misma se carga, antes de que se haga clic.
Para este yo seleccione el estilo de imagen que había creado anteriormente.
Colorbox image style
Es el estilo de la imagen para cuando se haga clic.
Esto quiere decir que al momento que alguien haga clic en la misma, se carga entonces Colorbox.
Es el estilo de la imagen para cuando se haga clic.
Esto quiere decir que al momento que alguien haga clic en la misma, se carga entonces Colorbox.
Gallery (image grouping)
Te indica si quieres que se cargue una a una o como una galería.
Si seleccionas galería y tienes digamos 12 fotos, al hacer clic en una cualquiera, a la izquierda y a la derecha aparecen las flechas para pasar a la siguiente imagen.
En lo personal no me gusta, pero si a ti si, adelante....
Te indica si quieres que se cargue una a una o como una galería.
Si seleccionas galería y tienes digamos 12 fotos, al hacer clic en una cualquiera, a la izquierda y a la derecha aparecen las flechas para pasar a la siguiente imagen.
En lo personal no me gusta, pero si a ti si, adelante....
Etiqueta
Al hacer clic en la imagen, muestra el nombre que le asignes a la misma, si activas el campo ALT, lo puede tomar de el, de lo contrario lo puede tomar del nombre de la galería o si lo deseas, que no lo muestre directamente.
Al hacer clic en la imagen, muestra el nombre que le asignes a la misma, si activas el campo ALT, lo puede tomar de el, de lo contrario lo puede tomar del nombre de la galería o si lo deseas, que no lo muestre directamente.
Recuerda guardar los cambios para que sean efectivos...
Ya estas todo pronto para poder crear nuestra galería, para continuar necesitas tener una por lo menos creada.
Crear el estilo CSS por medio de CSS injector.
En el vídeo explico como obtener un buen selector para nuestra imagen.
Esto se debe a que de lo contrario todos los efectos que vamos a hacer a continuación afectarían de lo contrarío a todas nuestras imágenes del sitio.
En este caso no es lo que queremos, queremos solo afectar a las imágenes de nuestra galería.
Esto se debe a que de lo contrario todos los efectos que vamos a hacer a continuación afectarían de lo contrarío a todas nuestras imágenes del sitio.
En este caso no es lo que queremos, queremos solo afectar a las imágenes de nuestra galería.
Una vez seleccionado los dos selectores, vamos a CSS injector en:
Configuración-> [Desarrollo] -> CSS injector
Creamos una regla nueva, el nombre es para ti, puedes ponerle lo que quieras, es como el nombre para humanos.
Y en la caja para el código, ponemos el nuestro, el mío para este vídeo es:
.node-galeria .field-name-field-imagen-galeria img {
float:left;
margin: 10px;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.698);
height: auto;
max-width: 200px;
padding: 5px;
}
Por supuesto tu puedes cambiar estos valores...
Guarda los cambios.
Si ahora cierras el overlay ya puedes ver los cambios en la galería de imágenes.
Vídeos Relacionados:
Fuente: http://drupalalsur.org/videos/crear-una-galeria-en-drupal-7-con-css