Si tienes muchas imágenes en una publicación de Discourse, ahora puedes hacer que se organicen automáticamente en una bonita cuadrícula. Todo lo que necesitas hacer es envolverlas en etiquetas [grid] ... [/grid], y las imágenes se organizarán de forma ordenada. Esta es una característica principal a partir de este commit, habilitada en todas las instancias de Discourse.
Esta característica es similar a algunos componentes de temas (Masonry Image Gallery, Tiles Image Gallery). La principal diferencia es que la disposición de las imágenes en la cuadrícula se alineará tanto en la parte superior como en la inferior del elemento. Algunas notas técnicas adicionales:
en móvil, la cuadrícula tiene 2 columnas por defecto, en escritorio 3
si hay exactamente 4 elementos en la cuadrícula, las imágenes se organizarán en 2 columnas
también se pueden usar elementos que no sean imágenes (como vídeos), pero los resultados no se alinearán perfectamente
los elementos de la cuadrícula se organizan para asegurar que las alturas de las columnas sean lo más parecidas posible, por lo tanto, el orden de las imágenes no siempre se mantiene
Habilitar o deshabilitar la cuadrícula también se puede lograr haciendo clic en un pequeño icono de alternancia junto a la primera imagen en un grupo de imágenes en la vista previa del compositor:
Buena pregunta. Esta nueva funcionalidad principal no es incompatible con el componente temático Masonry Image Gallery, es decir, ambos no pueden funcionar al mismo tiempo.
Si deseas migrar publicaciones del enfoque de galería Masonry al nuevo enfoque principal, necesitas ejecutar un script que actualice el contenido raw de las publicaciones de
Correcto, no debería afectarle. Creo que la primera imagen que se encuentra en la publicación se elige como miniatura (excluyendo avatares, emojis y similares). Además, no veo un escenario en el que la primera imagen subida no sea la primera imagen en la cuadrícula (la reorganización solo puede ocurrir para imágenes posteriores en la lista).
Hmm, sí, en el editor de texto esto actualmente solo funciona con cargas, también. (Es decir, pegar una URL a una imagen y envolverla en etiquetas [grid] tampoco funciona en el editor de texto.)
Lamentablemente, no, esto no funciona con páginas publicadas. Funciones similares de publicaciones impulsadas por Javascript tampoco funcionan con páginas publicadas (lightboxes, encuestas, tabla de contenido).
Esto debería funcionar. Obviamente, haz una copia de seguridad y busca cuidadosamente cualquier resultado no deseado en las publicaciones anteriores de masonry…
posts = Post.where('raw LIKE ?', '%<div>data-masonry-gallery</div>%')
posts.each do |p|
p.update!(raw: p.raw.gsub(/<div>data-masonry-gallery</div>(.*?)</div data-masonry-gallery>/m, '[grid]\1[/grid]'))
p.rebake!
end
Con la configuración de activación automática. Esto no contiene el <div> data-masonry-gallery</div> en bruto, por lo que creo que el script no funcionará. Pero en este caso, no entran en conflicto entre sí.
¿Hay algún plan para hacer que las cuadrículas sean automáticas? Si esto sucede, puedo simplemente volver a hornear las publicaciones y mantener el diseño de cuadrícula. Hasta entonces, creo que puedo ocultar el botón de cuadrícula y usar el componente de tema de forma segura.
¿Alguien en CDCK tiene influencia con los desarrolladores de Chrome? ¿Soporte CSS Masonry para Grid?
Masonry ya debería ser una cosa de CSS. Es uno de los pocos diseños que te permite respetar diferentes relaciones de aspecto de colecciones de imágenes (o de hecho, cualquier contenido de elementos) de una manera agradable.
Es un desperdicio y un sinsentido tener esto ejecutándose como javascript en todas partes…
Estoy emocionado de que Safari admita masonry, tienen un mejor historial de mover características de borrador –> experimental –> totalmente compatible. El soporte de masonry de Firefox ha estado detrás de una bandera durante más de 2 años. El soporte de Safari probablemente será el principal impulsor para que Chrome se mantenga al día.
Sí, pero no sin etiquetas [grid]. Convertir automáticamente imágenes en una cuadrícula sin etiquetas violaría la especificación CommonMark, preferimos evitar eso. (En mi primer borrador interno de esta función, comencé con una cuadrícula automática).
En cambio, lo que he estado pensando como el siguiente paso aquí es que podríamos agregar automáticamente los envoltorios [grid] a las cargas de múltiples imágenes, probablemente 3 o más cargas. Esto sería especialmente útil para las cargas móviles, agregar etiquetas manualmente en el móvil es torpe y es probable que si estás cargando 3 o más imágenes a la vez desde tu teléfono, sean fotos y candidatos razonables para un diseño de cuadrícula.
Todavía no tenemos planes sobre cuándo lo agregaremos, pero es algo que definitivamente nos gustaría hacer.
Sin embargo, debería ser posible generar el HTML estático a partir de JavaScript y publicar el DOM “cocinado” para habilitar una serie de funciones útiles, como esta cuadrícula y la tabla de contenido (TOC).
El HTML renderizado por sí solo no es suficiente. La cuadrícula, la tabla de contenido y características similares también necesitan el JS que interactúa con el HTML para crear esa característica. Y ese JS reside en la aplicación Ember, no se puede extraer fácilmente para las páginas publicadas que no son de Ember.
Ayer estuve jugando con esto y me recomendaron que compartiera mis comentarios y pensamientos aquí en este hilo…
Me gusta que sea “automático” en el sentido de que establece una cuadrícula por sí mismo.
Podría ser una buena función adicional ordenar las imágenes sin necesidad de copiar/pegar imágenes en la lista; ¿quizás simplemente añadiendo números al principio de cada imagen?
Me gusta que puedas desactivar fácilmente la cuadrícula en la vista previa, pero para que vuelva a aparecer, necesitas volver a añadir el código. Parece un área para mejorar la experiencia, tener el icono de la cuadrícula que aparezca cuando hayas añadido más de una imagen para poder activarla/desactivarla según sea necesario.
Una última posible función futura sería la capacidad de elegir una imagen en particular para “resaltar” o destacar dentro de la cuadrícula para que aparezca más grande que otras o destaque de alguna manera.
En general, sin embargo, es una gran nueva opción para añadir varias imágenes sin que las imágenes se apoderen de una publicación
este problema:
¡Soporte CSS Masonry ahora para Chrome y Edge!