Cuando utilizas imágenes o vídeos en tu página web, ¿los publicas uno a uno o prefieres organizarlos en una galería?

Las galerías pueden ser una opción estupenda para un diseño más compacto, así como una buena forma de agrupar varias imágenes o vídeos que compartan un tema o una categoría. Puedes crear galerías con presentaciones de diapositivas, carruseles y otros tipos de galerías para tus archivos multimedia en una página de Squarespace; solo necesitas saber cómo hacerlo. Por suerte, me tienes a mí para ayudarte.

7.0 Páginas de galería

En primer lugar, hablemos de las páginas de galería. Squarespace 7.0 es más restrictivo en cuanto al diseño que la versión 7.1, por lo que, en lugar de poder añadir una galería a una página de contenido ya existente, es necesario crear una página específica para la galería. Si quieres incluir una galería en otro tipo de contenido, como una entrada de blog, debes:

Crea una página de galería y rellénala con tus archivos multimedia.
Utiliza un bloque de galería para extraer contenido de la página de la galería e incrustarlo en tu página principal.

Las páginas de galería también presentan ciertas limitaciones. Su diseño y estilo provienen de la plantilla principal, y no es posible modificarlas en gran medida sin implementar código personalizado. No obstante, puedes elegir si tu galería tendrá formato de cuadrícula, presentación de diapositivas, visualización apilada o carrusel. Puedes incluir hasta 250 elementos multimedia —fotos y vídeos— en una galería, y puedes mezclar fotos y vídeos en la misma galería.

Por el lado positivo, añadir una página de galería es muy fácil. Solo tienes que iniciar sesión en tu panel de control, hacer clic en «Páginas» en el menú de inicio y, a continuación, hacer clic en «Galería». A partir de ahí, personaliza la página de galería igual que harías con cualquier otra página de Squarespace.

7.0 y 7.1: Bloques de galería

Los bloques de galería son ligeramente diferentes de las páginas de galería. Mientras que una página es, bueno, una página completa de tu sitio web, un bloque es un elemento que se puede utilizar dentro de una página. Un bloque de galería se puede utilizar en una página, en una entrada de blog o en otras secciones de tu sitio web, y puede obtener sus datos de una página de galería o funcionar de forma independiente.

El lugar donde puedes utilizar un bloque de galería depende de si tu sitio web está en la versión 7.0 o 7.1.

Los sitios 7.0 pueden insertar bloques de galería en cualquier área de contenido de su sitio.
7.1 Los sitios web pueden colocar bloques de galería en cualquier lugar donde no se admita una sección de galería. Esto incluye entradas de blog, elementos individuales y cuadros informativos de productos. Los bloques de galería no se pueden añadir a páginas de diseño, páginas de destino de colecciones, pies de página ni subpáginas de portafolio.

ACTUALIZACIÓN DE NOVIEMBRE DE 2024: Beyondspace.studio ha publicado un complemento gratuito que permite recuperar los bloques de galería en las secciones de Squarespace 7.1 (motores Classic y Fluid), incluida la función «Galería existente». Puedes consultar los pasos detallados en esta entrada.

Para crear un bloque de galería tanto en la versión 7.1 como en la 7.0, haz clic en cualquier lugar donde se pueda añadir un bloque de galería. Haz clic para insertar un bloque de galería. En el bloque resultante, la pestaña «Contenido» te permite añadir tus imágenes o vídeos, mientras que la pestaña «Diseño» te permite personalizar el estilo y el diseño del bloque.

¿Qué es mejor: los bloques de galería o las páginas de galería?

Al ver lo anterior, quizá te preguntes cuál de los dos deberías utilizar. ¿Qué es mejor, los bloques o las páginas, y por qué?

La verdad es que ambos tienen ventajas e inconvenientes. Depende en gran medida del uso que le vayas a dar. Así que hablemos de las ventajas de cada uno. En primer lugar, las ventajas del bloque de galería:

Los bloques de galería son uniformes en todas las plantillas de los sitios web con la versión 7.0. Aunque el estilo general puede variar si cambias de plantilla, el formato y el contenido de un bloque de galería se mantendrán si decides realizar ese cambio.
Los bloques de galería son precisamente eso: bloques. En una página que puede contener varios tipos de bloques, los bloques de galería se integran a la perfección con otros tipos de bloques, como los de texto.
Los bloques de galería se pueden añadir prácticamente en cualquier lugar de tu sitio web, siempre y cuando tu plantilla permita añadir un bloque en el lugar donde quieras colocarlo.
Los bloques de galería pueden extraer su contenido de una página de galería. De este modo, puedes insertar el mismo bloque de galería en varias páginas y, si necesitas cambiar una imagen del mismo, basta con cambiarla en la página de galería para que los cambios se reflejen automáticamente en los bloques de galería.

¿Y qué hay de las páginas de galería? Tienen algunas ventajas propias.

Pueden incluir funciones especiales para plantillas concretas en sitios web con la versión 7.0. Por ejemplo, Momentum permite el recorte a sangre en lugar del recorte tradicional.
Las páginas de galería se pueden añadir a las páginas de índice, al igual que cualquier otro tipo de página principal. Si eres un creador de contenidos multimedia y tienes muchas galerías individuales que compartir, esta puede ser una herramienta estupenda para una web de portfolio.
Las páginas de galería se pueden añadir a los bloques de resumen, del mismo modo que cualquier otro tipo de página. Esto permite incluir metadatos adicionales y algunas otras funciones útiles.

Todo eso se aplica principalmente a los sitios de la versión 7.0. En los sitios de la versión 7.1, no se pueden utilizar páginas de galería. Sin embargo, sí se pueden utilizar secciones de galería.

¿Y qué hay de las secciones de la galería?

Las secciones de galería son algo así como bloques de galería, diseñadas para sitios web de Squarespace 7.1. Los sitios web de la versión 7.1 pueden utilizar tanto bloques como secciones.

Las secciones de galería se pueden añadir a cualquier página como parte del contenido de la misma. No se pueden añadir a áreas de tu sitio web que no utilicen secciones, como las entradas de blog o las páginas de eventos. En esas páginas, debes utilizar el formato de bloque de galería.

Para crear una sección de galería, tu sitio web debe ser una versión 7.1. Inicia sesión y ve al menú «Inicio»; a continuación, haz clic en el menú «Páginas» y luego en «+». Haz clic en «Diseños de página», selecciona «Galería» y elige uno de los diseños disponibles para la galería. Si lo deseas, puedes cambiarlo más adelante sin tener que volver a crear la galería.

Esto abre el nuevo editor de secciones. Introduce el título, pulsa Intro y haz clic en «Editar» en la página. Desde allí, puedes añadir imágenes y modificar el estilo de la sección. Cuando hayas terminado, guarda y publica la sección.

Uno de los mayores inconvenientes de las secciones de galería en la versión 7.1, en comparación con los bloques de galería de la versión 7.0, es que no admiten vídeos, solo imágenes. Si quieres incluir vídeos en una galería en un sitio web con la versión 7.1, tendrás que utilizar bloques de galería, lo que podría implicar el uso de un tipo de página diferente.

¿Qué es mejor utilizar, un bloque o una sección, en la versión 7.1?

Las secciones solo se pueden utilizar en páginas de diseño, páginas de destino y subpáginas de portfolio. Por el contrario, los bloques se pueden utilizar en entradas de blog, descripciones de eventos y cuadros informativos adicionales de productos.
Las secciones de galería solo muestran la galería y no se les puede añadir ningún otro contenido. Los bloques de galería muestran una galería, pero se pueden añadir junto con otros bloques.
Los bloques de galería pueden mostrarse como presentaciones de diapositivas, cuadrículas, carruseles o imágenes apiladas. Las secciones de galería pueden ser cuadrículas simples, en franjas o tipo «masonry», o presentaciones de diapositivas simples, completas o en formato «reel». Los «reels» son similares a los bloques de carrusel.

También hay algunas peculiaridades relacionadas con los clics, la funcionalidad de la ventana emergente y la posibilidad de añadir o no animaciones a la galería.

Ten en cuenta que puedes seguir añadiendo imágenes individuales con total normalidad; todas las restricciones mencionadas anteriormente se aplican únicamente a las galerías.

Directrices sobre imágenes de Squarespace

Las galerías pueden presentar algunas peculiaridades si intentas subir imágenes con relaciones de aspecto o dimensiones muy diferentes entre sí. Esto se nota especialmente en las páginas web para móviles, que no se pueden ajustar con tanta facilidad como las de ordenador. Squarespace recomienda seguir sus directrices de formato de imágenes, que he reproducido aquí.

Utiliza únicamente los formatos .jpg, .gif o .png para las imágenes. Lamentablemente, el formato webp no es compatible.
Intenta que el tamaño de los archivos de imagen sea reducido. Especialmente en el caso de las galerías, donde se cargan docenas o más imágenes a la vez, es recomendable minimizar el tamaño de los archivos para acelerar los tiempos de carga. El límite máximo es de 20 MB por archivo de imagen, pero Squarespace recomienda intentar que no superen los 500 KB.
Limita los caracteres que utilizas en los nombres de los archivos. Squarespace solo admite letras, números, guiones bajos y guiones. No admite letras acentuadas, signos de interrogación, signos de porcentaje ni el símbolo «&», ya que todos ellos pueden provocar errores de código.
Tu límite máximo es de 60 megapíxeles. Para calcular la resolución en megapíxeles, cuenta el número de píxeles en horizontal y en vertical, multiplica ambos números entre sí y divide el resultado por un millón.
Utiliza colores RGB. Los colores CMYK no se mostrarán correctamente.
Por lo general, es recomendable que las imágenes tengan una anchura de entre 1.500 y 2.500 píxeles. Las imágenes más grandes se comprimirán verticalmente, mientras que las más cortas pueden estirarse de forma extraña. Esto varía en función del tamaño del contenedor de la galería.
Crea un nombre de archivo descriptivo. Squarespace utiliza el nombre del archivo como texto alternativo si no se especifica ninguno. Por ese motivo, intenta evitar utilizar nombres de archivo ofensivos o incorrectos. Lo mejor es especificar un texto alternativo, por supuesto, pero si se te olvida, esto sirve como alternativa.
No te preocupes por el DPI ni el PPI; son unidades de medida para imágenes impresas, no para imágenes web.

La mayor parte de esto ya lo hará tu cámara o el procesamiento de imágenes, pero conviene saberlo por si acaso algo funciona de forma extraña y no estás seguro de a qué se debe.

Añadir vídeos a las galerías

Como se ha mencionado anteriormente, los bloques de galería tanto en la versión 7.0 como en la 7.1, así como las páginas de galería (pero no las secciones de galería), admiten vídeos. Entonces, ¿cómo se pueden añadir vídeos?

Lamentablemente, no es posible subir vídeos directamente. Tienes que utilizar un servicio de alojamiento de vídeos de terceros para subir y alojar tus vídeos, y luego utilizar el sistema de galería para incrustarlos.

Squarespace admite directamente la incrustación de vídeos de YouTube, Vimeo, Wistia y Animoto. Otros servicios de vídeo, como DailyMotion, también pueden funcionar, aunque para ello hay que utilizar el código de incrustación que proporcionan.

Para añadir un vídeo, haz clic en el signo «+» de una galería para añadir un nuevo elemento multimedia y, a continuación, selecciona «vídeo». Se te pedirá la URL del vídeo, o bien puedes hacer clic en la opción «código personalizado» para añadir el código de incrustación de un sitio web no compatible. También puedes elegir una miniatura personalizada para que se cargue en lugar del vídeo completo, con el fin de mejorar la velocidad del sitio web.

Si quieres incluir un vídeo en una galería que no lo admite, la mejor opción es utilizar algún tipo de software para convertir el vídeo en un archivo GIF animado. Esto suele dar lugar a un archivo muy grande, por lo que te convendrá utilizar otras herramientas para optimizar y reducir el tamaño del GIF, dependiendo del uso que le vayas a dar al archivo. Ten en cuenta que los GIF animados no incluyen audio, por lo que este método no funciona si quieres que el vídeo incrustado incluya contexto de audio.

Otras opciones de estilo

Si buscas algo un poco más original para que tus galerías de imágenes destaquen entre las del resto de usuarios que utilizan tu plantilla en Squarespace, una opción es comprar una plantilla personalizada de terceros. Tengo varias de ellas en mi página de complementos recomendados.

Complemento de galería de Squarespace con estilo «Masonry »: este complemento funciona tanto en sitios web con la versión 7.0 como con la 7.1 y te ofrece un diseño sencillo de estilo «Masonry» para tus galerías. Puedes elegir si quieres que se aplique a todas las galerías o solo a algunas específicas de tu sitio web.

Galería: Orden aleatorio de imágenes – Se trata de un sencillo complemento de galería tanto para Squarespace 7.0 como para 7.1, aunque no funciona en secciones de galería. Lo que hace es, precisamente, lo que su nombre indica: ordena aleatoriamente las imágenes de las galerías que utilices cada vez que un visitante cargue una página. Se puede aplicar solo a bloques específicos o a todos los bloques, y ofrece algunas opciones de configuración adicionales.

Navegación con puntos para bloques de galería: ¿Sabes que muchas páginas web tienen unos pequeños puntos debajo de una galería, sobre todo aquellas con una presentación automática, para indicarte qué imagen de la serie estás viendo y cuántas más hay en la galería? Eso es precisamente lo que hace este plugin: te muestra esos puntos. Es sencillo y eficaz como complemento para los bloques de galería.

Contador de imágenes de la galería: este es bastante similar al anterior, ya que añade un sencillo contador numérico «1/x» para mostrar al usuario en qué imagen se encuentra dentro de una galería y cuántas imágenes tiene esta. Es más compacto que los puntos y resulta más adecuado para galerías más grandes.

Mis complementos no son los únicos que hay disponibles, pero son los que recomiendo. Si tienes otras ideas o sugerencias, ¡no dudes en decírmelo!

Cómo crear una galería de fotos o vídeos con Squarespace