Crear una galeria en Drupal 7 con CSS

00:00
 

Hace tiempo ya he hecho un vídeo donde mostraba como crear una galería de imágenes en Drupal 7.

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.

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).

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.

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.

Efecto Escalar y recortar

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.

Valores de Colorbox

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.

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.

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....

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.

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.

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.


Tópico
 
Sistema Operativo
 
Plataforma
 

Comentarios

Magnánimo Charly!, muy bueno el tutorial, mucho mejor que el anterior. Felicidades!

Imagen de charly

Hola mari, gracias por la palmadita en la espalda y por el golpe en la nuca... jaja!!!

Interesante Charly...gracias !

he conseguido encontrar el selector, y todo se ha creado correctamente, el problema esque guarda algun efecto de la galeria anterior, y eso que he borrado el archivo que habia que subir a la plantilla, borrado la cache, y actualizado cron. Drupal me esta tomando el pelo! jaja

Me ha encantado el tutorial!! Seria posible añadirle un boton para poder añadir fotos sin acceder al editor de la galeria??? Muchas gracias!

Imagen de charly

Me alegró Roman87, si se puede, luego hago otro más complejo donde lo vamos a ver.
Salu2

Hola, he conseguido intalar la galeria, pero tengo dos preguntas.
1ª: Como puedo crear una sección donde aparezcan todas las galerias
2ª: Hay alguna forma de subir varias imagenes a la vez, quiero subir por albun sobre unas 100 imagenes y no quiero estar 1 a 1

Imagen de charly

Hola adolfo, con respecto a tu pregunta, se puede hacer con views, se puede crear una página especifica para ello, se puede crear con panels, etc. Yo tengo un vídeo de como crear una galería con views donde puedes ver un método. Si se puede subir varias imágenes. Lo voy a hacer la semana próxima si puedo. Salu2

enhorabuena por este tutorial y todos los anteriores. Gran trabajo. Como harias para añadir un boton para poder añadir fotos sin acceder al editor de la galeria??? con nodereference url?

A mi solo me Pone las Sombras Pero eso significa que esta parte .field-name-field-imagen-galeria img si me la identifica correctamente,
lo raro es que esta parte .node-galeria yo lo tengo con el mismo nombre en el tema AT Commerce..
La pregunta es: ¿qué Elementos se deben identificar para que te ordene la galeria en forma de cuadricula?
Bueno Muchas Gracias Seguire Investigando, Buenos Tutoriales

Solo tengo un problema, al momento de agregar el css y guardar cambios, no me respeta los cambios, siguen apareciendo las fotos como antes agregar el css, alguna solución ? no puede ser el tema porque lo he cambiado al mismo que utilizas en el video para corroborar

gracias por tus videos, aprendo mucho

no me respeto el cambio en css, aparece como antes en linea horizontal, alguna solución ?

Imagen de charly

En unos días subo este sitio para que lo descarguen. Salu2.

Imagen de Jhonatanfdez

Hermano, me suscribi a tu tus videos en Youtube y te envie un email acerca de como subir varias imagenes al mismo tiempo. Este video me sirvio de mucho
:D

Imagen de charly

Hola Jhonatan, mi culpa, yo entendí que querías subir más de una, tu lo que quieres es subir varias juntas, vamos a ver como lo hacemos. Salu2.

Imagen de Jhonatanfdez

Claro hermano. Te envié la información de como hice para subir varias imagenes al mismo tiempo al facebook de tu pagina. Un Saludo y sigue palante hermano.

Imagen de charly

Lo estoy viendo y gracias por compartir tus conocimientos, vamos a ver si hacemos un vídeo con tu aporte. Gracias.

Charly primero agradecerte los vídeo tutoriales. ¿como puedo poner los bordes de las fotos negros o verdes en vez de blanco? saludos

Imagen de charly

Hola Kingsao, intenta con rgba(0, 0, 0, 0); Salu2.

Hola, es lo que hice pero como me temía eso lo que hace es quitar el sombreado simplemente :D

Segui paso a paso el tutorial, me funciono todo pero no quedaron las fotos en columnas, quedó una columna sola, es raro porq me creo el marco y todo

Imagen de charly

Prueba cambiando el margin, en vez de 10px ponle menos, sino funciona, intenta reducir el ancho de las imágenes. Al final del post tienes el sitio para descargarlo y comprobar las diferencias. Salu2.

Buenas
Modifique los tamaños pero no funcionó, capasque tiene que ver con la version del colorbox, tengo instalado el 1.2, voy a instalar el 1.4
espero q sirva
gracias amigo

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