Presentando cuadrículas de imágenes en publicaciones

¿Quizás una herramienta de composición en la que pudieras seleccionar las imágenes e insertaría la etiqueta antes y después?

4 Me gusta

Podrías hacer algo como:

.d-image-grid:hover {
  img {
    -webkit-filter: brightness(60%);
    transition: 0.5s;
  }
}

.d-image-grid:not([data-disabled]) .d-image-grid-column img, .d-image-grid:not([data-disabled]) .d-image-grid-column>.lightbox-wrapper, .d-image-grid:not([data-disabled]) .d-image-grid-column>.lightbox-wrapper>.lightbox {
  &:hover {
    img {
     -webkit-filter: brightness(100%);
     transition: 0.5s;
    }
    transition: 0.5s;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
}
3 Me gusta
[grid]
![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg)
![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg)
![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg)
[/grid]

Mmm, sería bueno si esto funcionara. Animo a los usuarios a enlazar sus imágenes externas alojadas en otro lugar, y deshabilité la descarga de imágenes enlazadas para ahorrar espacio.

La siguiente alternativa podría funcionar, pero la mayoría de los usuarios no sabrán cómo formatearla en Markdown de esa manera (están acostumbrados a simplemente pegar la URL de la imagen en una línea separada):

[grid]
![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg)
![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg)
![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg)
[/grid]

Aquí hay un método aún más complejo para hacer que las imágenes externas sean clickeables para ver la versión a tamaño completo:

[grid]
[![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg "")](https://github.com/KDE/plasma-workspace-wallpapers/blob/master/IceCold/contents/images/5120x2880.png?raw=true)
[![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg "")](https://getwallpapers.com/wallpaper/full/b/5/f/563687.jpg)
[![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg "")](https://www.pixelstalk.net/wp-content/uploads/2016/06/Download-hd-nature-wallpaper.jpg)
[/grid]



Editar: Originalmente usé URL de imágenes externas, pero Discourse reemplaza el texto incluso dentro de los bloques de código con el enlace a la imagen descargada, lo que parece un error. Nunca debería modificar el contenido de un bloque de código monoespaciado.

3 Me gusta

Gran nueva función :clap:… una cosa que nos preguntó uno de nuestros usuarios es si existe algún tipo de hoja de referencia de marcado para ayudar a las personas a recordar estos procedimientos manuales, un poco como el cuadro de diálogo emergente de atajos de teclado asociado con el icono del teclado.

7 Me gusta

Acabo de crear un componente temático que añade botones de alineación de imágenes y cuadrícula a la barra de herramientas del editor

10 Me gusta

¡Definitivamente suena como un error!

1 me gusta

:yum: Hermoso. Desafortunadamente, no está disponible por correo electrónico ni en páginas publicadas. :cry:

2 Me gusta

Sí, presenté un informe de error por separado:

2 Me gusta

Sí, las páginas publicadas tienen un acceso muy restringido a las funciones de Discourse. Ni siquiera las cajas de luz normales funcionan en ellas. Hacer clic en una imagen abrirá directamente la URL en lugar de mostrar el visor de imágenes.

4 Me gusta

¡Esto funciona elegantemente! Acabo de hacer una demostración

Si cuenta de alguna manera, votaría por tener las características del componente temático de botones de alineación de imágenes/.grid.
Si hubiera una característica para las imágenes que me gustaría tener, sería una forma de agregar una leyenda. En nuestra comunidad, abogo por la atribución de imágenes, lo que no es el mejor uso de la descripción de la imagen.

8 Me gusta

¿Qué tal si lo agregamos al menos como una opción opcional en la configuración principal, incluyendo una advertencia explícita? de esa manera los administradores del foro pueden tomar esa decisión si quieren hacerlo y saben que violan la especificación CommonMark.

Saludos
Jr

1 me gusta

Entiendo tu deseo aquí (tengo el mismo deseo, me encantaría que varias fotos subidas estuvieran automáticamente en una cuadrícula sin que el usuario hiciera nada), pero desde una perspectiva de mantenimiento, esta opción de optar por participar no es viable. Ejecutamos miles de instancias de Discourse, y que el mismo marcado se comporte de manera diferente en algunas instancias pero no en otras puede causar todo tipo de dolores de cabeza. Lamentablemente, no es mantenible.

Esta es nuestra mejor opción como próximo paso. (No estoy seguro de cuándo sucederá, pero las contribuciones aquí son ciertamente bienvenidas si alguien quiere abordarlo).

8 Me gusta

Ejecuto este código

posts = Post.where(‘raw LIKE ?’, ‘%

data-theme-slick=“1”%>’)
posts.each do |p|
p.update!(raw: p.raw.gsub(/
data-theme-slick=“1”>(.*?)</div>/m, ‘[grid]\1[/grid]’))
p.rebake!
end

pero tengo un error

Eliminé el símbolo (’ y lo volví a escribir, pero no tuve éxito.
¿Puedes encontrar el error?
¡Gracias!

3 Me gusta

Hola Sora, primero necesitas ingresar a la consola de Rails: rails c

3 Me gusta

¿Podemos configurar que todas las imágenes se carguen de forma predeterminada y se organicen automáticamente en una bonita cuadrícula?

5 Me gusta

No sé si este es el comportamiento esperado, pero si agregas imágenes a una cuadrícula que están por debajo de la configuración máxima de ancho/alto de imagen del light box, se muestran en tamaño reducido pero sin forma (*) de expandirlas a su tamaño original.

Por ejemplo, creé una cuadrícula con 11 imágenes subidas. Ocho eran de 640x480, por debajo del ancho/alto de imagen predeterminado para lightboxing de 690x500, y las otras tres eran de 1200x372, 750x521 y 750x509. Las últimas tres tenían light box (class=lightbox-wrapper). Las primeras ocho eran class=image-wrapper, por lo que solo se mostraban como aproximadamente 300x250 y no se podían expandir para verlas en su tamaño original más grande.

(*) Este comportamiento se puede cambiar reduciendo la configuración máxima de ancho/alto de imagen, pero eso afecta a todas las demás imágenes del foro.

Creo que sería mejor si todas las imágenes de una cuadrícula tuvieran light box automáticamente o, alternativamente, tuvieran configuraciones diferentes a las configuraciones de light box de imagen principal.

3 Me gusta

¿Hay planes para que las imágenes en las cuadrículas se repliquen en los correos electrónicos?

3 Me gusta

No en este momento, no. Para ser sincero, CSS en correos electrónicos sigue siendo un gran dolor de cabeza. Los clientes de correo electrónico varían mucho entre sí, y es muy difícil conseguir que se renderice algo coherente.

5 Me gusta

Entendido perfectamente, gracias por la confirmación :slight_smile:

3 Me gusta

Feo, pero podría funcionar: envía solo una imagen compuesta para una cuadrícula.

Para mejorar la experiencia del usuario, podría estar vinculada a la cuadrícula correspondiente en el sitio en vivo.

1 me gusta