Présentation de grilles d'images dans les publications

[pfaffman (Jay Pfaffman)]

Peut-être un outil de composition que vous pourriez sélectionner les images et il insérerait la balise avant et après ?

[merefield (Robert)]

@Samantha_O

Une dernière fonctionnalité possible serait la possibilité de choisir une image particulière à « mettre en valeur » ou à présenter dans la grille afin qu’elle apparaisse plus grande que les autres ou qu’elle se démarque d’une manière ou d’une autre.

Vous pourriez faire quelque chose comme :

.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);
  }
}

[rahim123]

@pmusaraj

(Autrement dit, coller une URL d’image et l’encadrer avec des balises [grid] ne fonctionne pas non plus dans l’éditeur.)

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

Hmm, ce serait bien si cela fonctionnait. J’encourage les utilisateurs à lier leurs images externes hébergées ailleurs, et j’ai désactivé le téléchargement des images en lien de référence pour économiser de l’espace.

L’alternative suivante pourrait fonctionner, mais la plupart des utilisateurs ne sauront pas comment la formater en Markdown de cette façon (ils sont habitués à simplement coller l’URL de l’image sur sa propre ligne) :

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

Voici une méthode encore plus complexe pour rendre les images externes cliquables afin de voir la version en taille réelle :

[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]

Modification : J’utilisais à l’origine des URL d’images externes, mais Discourse remplace le texte même à l’intérieur des blocs de code par le lien vers l’image téléchargée, ce qui ressemble à un bug. Il ne devrait jamais modifier le contenu d’un bloc de code à chasse fixe.

[Paracelsus]

Super nouvelle fonctionnalité … une de nos utilisatrices demande s’il existe une sorte de antisèche de balisage pour aider les gens à se souvenir de ces procédures manuelles, un peu comme la boîte de dialogue des raccourcis clavier associée à l’icône du clavier.

[Lilly (Lillian Louis)]

Je viens de créer un composant de thème qui ajoute des boutons d’alignement d’image et de grille à la barre d’outils du compositeur

Image Alignment and Grid

Summary Adds image grid and alignment buttons to composer toolbar Repository https://github.com/Lillinator/image-alignment Install Guide How to install a theme or theme component New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component This theme component inserts buttons on the post composer toolbar to align uploaded images with text left or right, in center of post, …

[hello-smile6 (9pfs)]

@rahim123

Discourse remplace le texte même à l’intérieur des blocs de code par le lien vers le lien téléchargé, ce qui ressemble à un bug. Il ne devrait jamais interférer avec le contenu d’un bloc de code à chasse fixe.

Cela ressemble certainement à un bug !

[thoka (Thomas Kalka)]

Magnifique. Malheureusement, ni disponible par e-mail ni dans les pages publiées.

[rahim123]

@hello-smile6

@rahim123

Discourse remplace le texte même à l’intérieur des blocs de code par le lien vers l’image hotlinkée téléchargée, ce qui ressemble à un bug. Il ne devrait jamais modifier le contenu d’un bloc de code à chasse fixe.

Cela ressemble vraiment à un bug !

Oui, j’ai signalé un rapport de bug distinct :

Code block image link gets modified when hotlinked image is downloaded

It happens when using the  Markdown convention in a code block and then using the same code outside of the code block to actually display the image. It happens after about 5 minutes once Discourse downloads the hotlinked image.  [image] Original: [image]

[Canapin (Coin-coin le Canapin)]

Oui, les pages publiées ont un accès très restreint aux fonctionnalités de Discourse. Même les lightboxes ordinaires ne fonctionnent pas sur elles. Cliquer sur une image ouvrira directement l’URL au lieu d’afficher la visionneuse d’images.

[cogdog (Alan Levine)]

Cela fonctionne élégamment ! Je viens de faire une démo

Grids of Images

Si cela compte, je voterais pour avoir les fonctionnalités du composant de thème des boutons d’alignement d’image/.grille.
S’il y avait une fonctionnalité pour les images que j’aimerais avoir, ce serait un moyen d’ajouter une légende. Dans notre communauté, je plaide pour l’attribution des images, ce qui n’est pas la meilleure utilisation de la description de l’image.

[jrgong]

@pmusaraj

Oui, mais pas sans balises [grid]. Convertir automatiquement les images en grille sans balises violerait les spécifications de CommonMark, nous préférons de loin éviter cela. (Dans ma première ébauche interne de cette fonctionnalité, j’avais commencé par une grille automatique.)

Que diriez-vous de l’ajouter au moins comme option facultative dans les paramètres principaux, y compris un avertissement explicite ? ainsi les administrateurs de forum pourront prendre cette décision s’ils le souhaitent et savoir qu’ils violent les spécifications de CommonMark.

Cordialement
Jr

[pmusaraj (Penar Musaraj)]

Je comprends votre souhait (j’ai le même souhait, j’aimerais que plusieurs photos téléchargées soient automatiquement dans une grille sans que l’utilisateur n’ait rien à faire), mais d’un point de vue de maintenance, cette option d’adhésion est intenable. Nous gérons des milliers d’instances Discourse, et avoir le même balisage se comportant différemment dans certaines instances mais pas dans d’autres peut causer toutes sortes de maux de tête. Ce n’est malheureusement pas maintenable.

@pmusaraj

…nous pourrions automatiquement ajouter les wrappers [grid] aux téléchargements de plusieurs images, probablement 3+ téléchargements.

Ceci est notre meilleure piste pour la prochaine étape. (Je ne suis pas sûr quand cela se produira, mais les contributions ici sont certainement les bienvenues si quelqu’un veut s’en charger.)

[huynhthai824 (Sora &\)]

j’exécute ce code

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

mais j’ai une erreur

j’ai supprimé le symbole (’ et j’ai retapé mais sans succès
Pouvez-vous trouver l’erreur ?
Merci !

[Arkshine]

Salut Sora, tu dois d’abord entrer dans la console Rails : rails c

[huynhthai824 (Sora &\)]

Pouvons-nous configurer par défaut toutes les images téléchargées pour qu’elles soient automatiquement disposées dans une belle grille ?

[packman (Chris McMahon)]

Je ne sais pas si c’est le comportement attendu, mais si vous ajoutez des images à une grille qui sont en dessous des paramètres de largeur/hauteur d’image max du light-box, elles sont affichées en taille réduite mais sans moyen (*) de les agrandir à leur taille d’origine.

Par exemple, j’ai créé une grille avec 11 images téléchargées. Huit étaient de 640x480, donc en dessous de la largeur/hauteur d’image par défaut pour le light-box de 690x500 et les trois autres étaient de 1200x372, 750x521 et 750x509. Les trois dernières étaient en light-box (class=lightbox-wrapper). Les huit premières étaient class=image-wrapper, elles étaient donc affichées à environ 300x250 et ne pouvaient pas être agrandies pour les voir dans leur taille originale plus grande.

(*) Ce comportement peut être modifié en réduisant les paramètres de largeur/hauteur d’image max, mais cela affecte alors toutes les autres images du forum.

Je pense qu’il serait préférable que toutes les images d’une grille soient automatiquement en light-box ou alternativement qu’il y ait des paramètres différents de ceux du light-box d’image principal.

[Richie (Richie Rich)]

@thoka

Magnifique. Malheureusement, ni disponible par e-mail

Y a-t-il des projets pour que les images dans les grilles soient répliquées dans les e-mails ?

[pmusaraj (Penar Musaraj)]

Pas pour le moment, non. Pour être tout à fait honnête, le CSS dans les e-mails est toujours un casse-tête majeur. Les clients de messagerie varient considérablement les uns par rapport aux autres, et il est très difficile d’obtenir un rendu cohérent.

[Richie (Richie Rich)]

Parfaitement compris, merci pour la confirmation

[thoka (Thomas Kalka)]

Laid, mais ça pourrait fonctionner : envoyer une seule image composée pour une grille.

Pour une expérience utilisateur améliorée, elle pourrait être liée à la grille appropriée sur le site en direct.