Descubre cómo adaptar las galerías fotográficas de los child themes de Genesis para que se muestren de forma adecuada en dispositivos móviles.
Cuando las galerías de Genesis Framework ajustan las imágenes a los smartphones, reducen bastante el tamaño de las fotografías.
Por ejemplo, si creas una galería con 3 columnas, se verá estupendamente en un ordenador o incluso una tablet. Pero este diseño hace que las imágenes no se aprecien bien desde un móvil.
Que no cunda el pánico porque esto tiene fácil solución si aplicas pequeños cambios de CSS. 😉
Al trabajar habitualmente con fotógrafos profesionales, esta es una de las modificaciones que más implemento cuando uso la galería nativa de WordPress.
En este tutorial te enseño a hacerlo con Genesis Sample, aunque el código también debe funcionar en otros child themes de Genesis.
Instrucciones para mejorar cómo se muestran las galerías de Genesis Sample en móviles
Antes de aplicar una de la alternativas siguientes, asegúrate de que tu tema contiene la siguiente línea en functions.php, especialmente la parte de ‘gallery’.
//* Add HTML5 markup structure
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );Todos las plantillas modernas lo incluyen. Pero merece la pena que te asegures de ello antes de continuar, ya que sin ella, los snippets siguientes no tendrán efecto alguno.
Opción 1
Comenta las líneas de style.css donde están definidos los estilos de la galería (línea 305), añadiendo /* al comienzo y */ al final.
Así:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Si crees que no vas a volver a utilizar esos estilos, puedes borrarlos en lugar de comentarlos.
A continuación, introduce el siguiente código en el style.css :
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Con estos estilos, las imágenes de las galerías se verán de mayor tamaño en dispositivos móviles. Por ejemplo, las de 3 columnas pasarán a tener 2 columnas en smartphones.
Opción 2
En este caso no necesitas comentar ninguna línea, solo añadir este snippet al final del apartado Gallery o al final del fichero style.css, como prefieras.
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Con esto consigues que las fotografías ocupen todo el ancho en los dispositivos con pantalla inferior a 600 píxeles.
Te invito a que pruebes las dos opciones y te quedes con la mejor se ajuste a tu proyecto.
Además, si te interesa, también tienes la posibilidad eliminar los marcos de las imágenes incluidas en las galerías.
Opción 3
Si estás usando el editor de bloques y quieres que en dispositivos móviles la imagen ocupe todo el ancho, añade este snippet al final del fichero style.css:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
El código es muy similar al de la opción 2 pero adaptado a las clases de CSS que usa el editor de bloques para las galerías.
Con esto consigues que las fotografías ocupen todo el ancho en los dispositivos con pantalla inferior a 600 píxeles.
Conclusiones
A pesar de que Genesis adapta las fotos de la galería al tamaño de pantalla del dispositivo, con estas pequeñas modificaciones conseguirás que se vean mejor.
La capacidad de mostrar la imágenes en el móvil a mayor tamaño puede marcar la diferencia a la hora de apreciar la obra de un fotógrafo o artista.
Ten presente que este tutorial está creado para el editor clásico de WordPress.
Los bloques de galerías de Gutenberg o el nuevo editor de WordPress (dependiendo de cuando leas esto), poseen unos estilos CSS específicos diferentes a los que acabas de ver. Si quieres cambiarlos, echa un ojo al tutorial donde te cuento cómo realizar los ajustes básicos de CSS para Gutenberg.
Si tienes alguna petición relacionada con las galerías, déjamela en los comentarios y haré lo posible por atenderla cuanto antes.
Ventajas de ser suscriptor.😉
