Si vous avez de nombreuses images dans une publication Discourse, vous pouvez désormais les organiser automatiquement en une jolie grille. Il vous suffit de les encapsuler entre les balises [grid] ... [/grid], et les images seront soigneusement disposées. Il s’agit d’une fonctionnalité de base depuis ce commit, activée sur toutes les instances Discourse.
Cette fonctionnalité est similaire à quelques composants de thème (Masonry Image Gallery, Tiles Image Gallery). La principale différence est que l’agencement des images dans la grille s’alignera en haut et en bas de l’élément. Quelques notes techniques supplémentaires :
sur mobile, la grille est par défaut à 2 colonnes, sur ordinateur à 3
s’il y a exactement 4 éléments dans la grille, les images seront disposées en 2 colonnes
des éléments autres que des images peuvent également être utilisés (comme des vidéos), mais les résultats ne seront pas parfaitement alignés
les éléments de la grille sont disposés de manière à ce que les hauteurs des colonnes soient aussi proches que possible les unes des autres, par conséquent, l’ordre des images n’est pas toujours conservé
L’activation ou la désactivation de la grille peut également être effectuée en cliquant sur une petite icône de bascule à côté de la première image d’un groupe d’images dans l’aperçu du compositeur :
Bonne question. Cette nouvelle fonctionnalité principale n’est pas incompatible avec le composant de thème Masonry Image Gallery, c’est-à-dire que les deux ne peuvent pas fonctionner en même temps.
Si vous souhaitez migrer des publications de l’approche Masonry gallery vers la nouvelle approche principale, vous devez exécuter un script qui met à jour le contenu raw des publications de
Exact, cela ne devrait pas avoir d’impact. Je crois que la première image trouvée dans le message est choisie comme miniature (en excluant les avatars, les emojis, etc.). De plus, je ne vois pas de scénario où la première image téléchargée ne serait pas la première image de la grille (le réordonnancement ne peut se produire que pour les images ultérieures dans la liste).
Hmm, oui, dans le compositeur, cela fonctionne actuellement uniquement avec les téléchargements, trop. (Autrement dit, coller une URL vers une image et l’encapsuler dans des balises [grid] ne fonctionne pas non plus dans le compositeur.)
Malheureusement non, cela ne fonctionne pas avec les pages publiées. Les fonctionnalités similaires de publication pilotées par JavaScript ne fonctionnent pas non plus avec les pages publiées (lightboxes, sondages, table des matières).
Cela devrait fonctionner. Évidemment, faites une sauvegarde et recherchez attentivement tout résultat indésirable dans les publications de maçonnerie précédentes…
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>)/m, '[grid]\1[/grid]'))
p.rebake!
end
Avec le réglage auto activé… Cela ne contient pas le <div> data-masonry-gallery</div> dans le brut, donc le script ne fonctionnera pas je pense. Mais dans ce cas, il n’y a pas de conflit entre eux.
Y a-t-il des projets pour rendre les grilles automatiques ? Si cela se produit, je pourrai simplement rebaker les messages et conserver la mise en page en grille. D’ici là, je pense que je peux cacher le bouton de grille et utiliser le composant de thème en toute sécurité.
Quelqu’un chez CDCK a-t-il une influence auprès des développeurs de Chrome ? Prise en charge du Masonry CSS pour Grid ?
Le Masonry devrait déjà être une chose CSS. C’est l’une des rares mises en page qui vous permet de respecter différents rapports d’aspect de collections d’images (ou de tout contenu d’élément) de manière agréable.
C’est tellement inutile et absurde de faire fonctionner cela en javascript partout…
Je suis ravi que Safari prenne en charge le masonry, ils ont de meilleurs antécédents en matière de passage des fonctionnalités de la brouillon –> expérimentale –> entièrement prise en charge. Le support masonry de Firefox est derrière un drapeau depuis plus de 2 ans maintenant. Le support de Safari sera probablement le principal moteur pour que Chrome suive.
Oui, mais pas sans balises [grid]. Convertir automatiquement des images en grille sans balises violerait les spécifications CommonMark, nous préférons de loin éviter cela. (Dans ma première ébauche interne de cette fonctionnalité, j’avais commencé avec une grille automatique.)
Au lieu de cela, ce à quoi j’ai pensé comme prochaine étape est que nous pourrions ajouter automatiquement les wrappers [grid] aux téléchargements de plusieurs images, probablement 3 ou plus. Ce serait particulièrement utile pour les téléchargements mobiles, ajouter des balises manuellement sur mobile est maladroit et il y a de fortes chances que si vous téléchargez 3 images ou plus à la fois depuis votre téléphone, ce soient des photos et des candidats raisonnables pour une mise en page en grille.
Nous n’avons pas encore de projets sur la date à laquelle nous allons ajouter cela, mais c’est certainement quelque chose que nous aimerions faire.
Il devrait cependant être possible de générer le HTML statique à partir du JavaScript et de publier le DOM « cuit » pour activer un certain nombre de fonctionnalités utiles telles que cette grille et la table des matières.
Le HTML rendu seul ne suffit pas. La grille, la table des matières et des fonctionnalités similaires nécessitent également le JS qui interagit avec le HTML pour créer cette fonctionnalité. Et ce JS réside dans l’application Ember, il ne peut pas être facilement extrait pour les pages publiées non-Ember.
J’ai juste joué avec ça hier et on m’a recommandé de partager mes commentaires et réflexions ici sur ce fil de discussion…
J’aime le fait que ce soit « automatique » dans le sens où il définit une grille lui-même.
Ce pourrait être une fonctionnalité intéressante d’ordonner les images sans avoir besoin de copier/coller les images dans la liste - peut-être juste en ajoutant des numéros au début de chaque image ?
J’aime le fait que vous puissiez facilement désactiver la grille dans l’aperçu, mais pour la réactiver, vous devez rajouter le code. Cela semble être un domaine à améliorer pour que l’icône de la grille apparaisse lorsque vous avez ajouté plus d’une image, afin de pouvoir l’activer/désactiver selon les besoins.
Une dernière fonctionnalité possible pour l’avenir serait la possibilité de choisir une image particulière à « mettre en évidence » 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.
Dans l’ensemble, cependant, c’est une excellente nouvelle option pour ajouter plusieurs images sans qu’elles n’envahissent une publication
ce problème :
Prise en charge du Masonry CSS maintenant pour Chrome et Edge !