Al hacer clic en una imagen, se abrirá con el visor lightbox predeterminado.
Puede agregar la galería haciendo clic en el icono de cuadrícula y luego agregando sus imágenes. También funciona seleccionando primero las imágenes cargadas y luego haciendo clic en el icono.
→ ¿Qué quieres decir con ordenamiento personalizable?
Las imágenes pueden ordenarse horizontalmente (de izquierda a derecha) o verticalmente. El orden horizontal es ideal para imágenes de revistas, cómics o similares. Además, cuando presiona siguiente en la vista lightbox, se mostrará la imagen correcta.
Las imágenes a continuación ilustran la diferencia. La de la derecha tiene un ordenamiento horizontal.
El orden predeterminado es horizontal, pero puede cambiarse en la configuración. También es posible cambiar el orden de una galería específica agregando vertical/horizontal (v/h también funciona) al atributo en el compositor de esta manera: <div data-masonry-gallery="vertical">.
He estado usando Tiles durante un tiempo y me gusta mucho. Así que sí, definitivamente podrías decir que está fuertemente influenciado por ese . Pero muchas cosas son diferentes, por lo que decidí compartirla. A continuación se presenta una lista de algunas de las diferencias.
Sin dependencias.
Sin jQuery.
Ordenamiento horizontal.
Las imágenes pequeñas no romperán la disposición.
Vista previa correcta al editar.
Posibilidad de seleccionar múltiples filas con saltos de línea al agregar una galería.
Uso de la función de API decorateCookedElement en lugar de decorateCooked.
¡Las sugerencias y mejoras son bienvenidas!
Las imágenes pequeñas aparecerán en la galería, pero no se creará una vista lightbox. Ese es el comportamiento predeterminado de Discourse. Sin embargo, es posible cambiar lo que se considera una imagen pequeña modificando la configuración ancho máximo de imagen y alto máximo de imagen. Los valores predeterminados son 690 px y 500 px, respectivamente.
Este componente utiliza la versión de la API 0.8.42. Si no ha actualizado desde mayo de 2020, debe hacerlo para poder usarlo.
Componente increíble. ¡Llevaba un tiempo buscando un reemplazo para la galería de imágenes de tipo mosaico!
¿Qué opinas de añadir una opción de galería automática para aplicarla a todas las imágenes? Básicamente, siempre que haya 3 o más imágenes consecutivas sin otros elementos entre ellas, se activaría automáticamente la vista de galería tipo mampostería. (Tiles Image Gallery intentó algo similar en su rama auto-tiles).
Sí, vi esa rama. Es una función realmente interesante. No sé si la forma en que está implementada en Tiles funciona en este componente o si se necesita otro código. ¡Pero definitivamente lo investigaré!
Si tienes Tiles instalado en tu sitio y deseas cambiar a Masonry, necesitas modificar el atributo de los divs de la galería a data-masonry-gallery en todas tus publicaciones antiguas con galerías. Esto es necesario si quieres que tus publicaciones antiguas sigan renderizándose correctamente, pero no deseas tener ambos componentes instalados.
Pensé en compartir cómo hacerlo, ya que yo mismo realicé el cambio en mi sitio. Quizás pueda ser de ayuda para alguien.
La forma más obvia sería editar las publicaciones manualmente. Esto funciona mientras no tengas demasiadas publicaciones que cambiar, aunque aún podría ser tedioso encontrar cada una. Pero no te preocupes, ¡Data Explorer viene al rescate! Ejecuta el siguiente SQL y obtendrás exactamente lo que necesitas.
SELECT user_id, topic_id, post_number
FROM posts p
WHERE raw ~~ '%data-theme-tiles%'
Si hay demasiadas para editar manualmente, podrías usar rake para reemplazar cada cadena. Para ello, necesitas acceder por SSH a tu servidor y ejecutar:
cd /var/discourse
./launcher enter app
rake posts:remap["data-theme-tiles","data-masonry-gallery"]
Puedes leer más sobre esta solución en esta publicación. Ten en cuenta la advertencia de esa publicación sobre el comando rake posts:remap:
Seguramente existen otras formas de hacerlo. Por ejemplo, si lo prefieres, podrías modificar el código de los componentes para que busque ambos atributos.
Esa función está casi lista. He modificado el código de Tiles; solo necesito realizar algunas pruebas más (con diferentes escenarios/modificaciones del sitio). Intentaré encontrar el tiempo para hacerlo pronto, pero debería agregarse dentro de una semana. ¡Si solo tuviera más tiempo!
Ahora puedo reemplazar por completo el problemático “Tiles Image Gallery”.
@Heddson
Solo por curiosidad, ¿tienes planes de crear un TC similar para reemplazar también “Slick Image Gallery”?
El “Slick Image Gallery” tiene todos los problemas similares al “Tiles Image Gallery”, como imágenes pequeñas que rompen el diseño y la vista previa no puede ralentizar la galería correctamente, etc.
Por ahora no tengo ningún plan para hacer eso. Quizás más adelante si tengo tiempo. Si se trata de una corrección menor, podría hacer una solicitud de extracción (pull request).
Acabo de actualizar el componente con la función de galería automática. Después de la actualización, puedes activarla en la configuración.
Es posible especificar categorías y también establecer el número mínimo de imágenes requeridas (sin ningún otro elemento ni línea en blanco entre ellas) para que se cree una galería automáticamente.
Solo quería decir que funciona perfectamente sin necesidad de configuración previa. He tenido problemas con los otros dos componentes mencionados, así que esto es fantástico.
También he añadido el atributo divgrid (o g) para un estilo de tipo cuadrícula (a pesar del nombre del componente ) que establece una altura fija para cada fila (basada en la imagen más alta de la fila). Podría ser útil si tienes imágenes con alturas casi iguales.
Actualmente estamos probando la versión estable 2.8. La función auto enabled categories (categorías habilitadas automáticamente) no se activa cuando se define una categoría específica. Intentamos añadir el slug de la categoría y el ID de la categoría. Cuando auto enabled categories se deja vacío, funciona.
Hmm, eso es extraño. Funciona en mi 2.9.0.beta1 y eso es prácticamente lo mismo que la versión estable 2.8. Es el nombre de la categoría el que debería añadirse. Pero veré si puedo encontrar algo.
Esta función ahora está integrada en el núcleo de Discourse, consulte el anuncio sobre las cuadrículas de imágenes en Discourse.
→ ¿Qué quieres decir con ordenamiento personalizable?
→ Este componente se parece mucho a la galería de imágenes Tiles de Joe. ¿Es esto un clon o qué?
. Pero muchas cosas son diferentes, por lo que decidí compartirla. A continuación se presenta una lista de algunas de las diferencias.Las imágenes pequeñas aparecerán en la galería, pero no se creará una vista lightbox. Ese es el comportamiento predeterminado de Discourse. Sin embargo, es posible cambiar lo que se considera una imagen pequeña modificando la configuración
) que establece una altura fija para cada fila (basada en la imagen más alta de la fila). Podría ser útil si tienes imágenes con alturas casi iguales.