Lorsqu’on clique sur une image, elle s’ouvre avec le visionneur lightbox par défaut.
Vous ajoutez la galerie en cliquant sur l’icône de grille, puis en ajoutant vos images. Cela fonctionne également en sélectionnant d’abord les images téléchargées, puis en cliquant sur l’icône.
→ Que voulez-vous dire par ordre personnalisable ?
Les images peuvent être ordonnées horizontalement (de gauche à droite) ou verticalement. L’ordre horizontal est idéal pour les images de magazines, de bandes dessinées ou similaires. De plus, lorsque vous appuyez sur « suivant » dans la vue lightbox, l’image correcte s’affiche.
Les images ci-dessous illustrent la différence. Celle de droite a un ordre horizontal.
L’ordre par défaut est horizontal, mais peut être modifié dans les paramètres. Il est également possible de changer l’ordre d’une galerie spécifique en ajoutant vertical/horizontal (v/h fonctionne aussi) à l’attribut dans l’éditeur comme ceci <div data-masonry-gallery="vertical">.
→ Ce composant ressemble beaucoup à la galerie d’images Tiles de Joe. Est-ce un clone ou quoi ?
J’utilise Tiles depuis un moment et je l’aime beaucoup. Donc oui, on peut certainement dire qu’il est fortement inspiré de celui-ci . Mais beaucoup de choses diffèrent, alors j’ai décidé de le partager. Ci-dessous, une liste de certaines des différences.
Aucune dépendance.
Pas de jQuery.
Ordre horizontal.
Les petites images ne cassent pas la mise en page.
Aperçu correct lors de l’édition.
Possibilité de sélectionner plusieurs lignes avec des sauts de ligne lors de l’ajout d’une galerie.
Utilisation de la fonction API decorateCookedElement au lieu de decorateCooked.
Les suggestions et améliorations sont les bienvenues !
Les petites images apparaîtront dans la galerie, mais une vue lightbox ne sera pas créée. C’est le comportement par défaut de Discourse. Cependant, il est possible de modifier ce qui est considéré comme une petite image en modifiant les paramètres largeur d'image maximale et hauteur d'image maximale. Les valeurs par défaut sont respectivement 690 px et 500 px.
Ce composant utilise la version de l’API 0.8.42. Si vous n’avez pas mis à jour depuis mai 2020, vous devez effectuer une mise à jour pour l’utiliser.
Composant génial. Je cherche depuis un moment un remplacement pour la galerie d’images en tuiles !
Qu’en pensez-vous d’ajouter une option de galerie automatique pour l’appliquer à toutes les images ? En gros, chaque fois qu’il y a 3 images ou plus sans aucun autre élément entre elles, la vue en galerie maçonnerie est activée automatiquement. (Tiles Image Gallery a essayé quelque chose de similaire dans leur branche auto-tiles)
Oui, j’ai vu cette branche. C’est une fonctionnalité vraiment intéressante. Je ne sais pas si la manière dont elle est implémentée dans Tiles fonctionne sur ce composant, ou si un autre code est nécessaire. Mais je vais certainement m’y pencher !
Si vous avez installé Tiles sur votre site et souhaitez passer à Masonry, vous devez modifier l’attribut des div de galerie en data-masonry-gallery sur tous vos anciens articles de galerie. Cela s’applique si vous voulez que vos anciens articles de galerie s’affichent correctement, mais que vous ne souhaitez pas avoir les deux composants installés.
J’ai pensé partager comment procéder, car j’ai moi-même effectué cette transition sur mon site. Peut-être que cela pourra aider quelqu’un.
La méthode la plus évidente serait de modifier les articles manuellement. Cela fonctionne tant que vous n’avez pas trop d’articles à modifier, bien que cela puisse être fastidieux de trouver chaque article. Mais ne vous inquiétez pas, Data Explorer est là pour vous aider ! Exécutez la requête SQL suivante et vous obtiendrez exactement ce dont vous avez besoin.
SELECT user_id, topic_id, post_number
FROM posts p
WHERE raw ~~ '%data-theme-tiles%'
S’il y a trop d’articles à modifier manuellement, vous pouvez utiliser rake pour remplacer chaque chaîne de caractères. Pour cela, vous devez vous connecter en SSH à votre serveur et exécuter :
cd /var/discourse
./launcher enter app
rake posts:remap["data-theme-tiles","data-masonry-gallery"]
Vous pouvez en savoir plus sur cette solution dans ce post. Veuillez noter l’avertissement de ce post concernant la commande rake posts:remap :
Il existe probablement d’autres façons de procéder. Par exemple, si vous le souhaitez, vous pouvez modifier le code des composants afin qu’il recherche les deux attributs.
Cette fonctionnalité est presque terminée. J’ai modifié le code à partir de Tiles, il ne reste plus qu’à effectuer quelques tests supplémentaires (avec différents scénarios/modifications du site). J’essaierai de trouver le temps de le faire bientôt, mais cela devrait être ajouté dans la semaine. Si seulement j’avais plus de temps .
Je peux maintenant remplacer complètement le TC problématique « Tiles Image Gallery ».
@Heddson
Je me demande simplement, avez-vous prévu de créer un TC similaire pour remplacer également « Slick Image Gallery » ?
Le « Slick Image Gallery » présente tous les problèmes similaires à « Tiles Image Gallery », comme les petites images qui cassent la mise en page et l’aperçu qui ne peut pas ralentir correctement la galerie, etc.
Je n’ai aucun projet de ce type pour le moment. Peut-être plus tard, si j’ai le temps… S’il s’agit d’une petite correction, je pourrais peut-être faire une demande de tirage (pull request).
Je viens de mettre à jour le composant avec la fonctionnalité de galerie automatique. Après la mise à jour, vous pouvez l’activer dans les paramètres.
Il est possible de spécifier des catégories et de définir le nombre minimum d’images requis (sans aucun autre élément ni ligne vide entre elles) pour qu’une galerie soit créée automatiquement.
Je voulais juste dire que cela fonctionne parfaitement dès la sortie de la boîte. J’ai eu des problèmes avec les deux autres composants mentionnés, donc c’est fantastique.
J’ai également ajouté l’attribut div grid (ou g) pour un style de type grille (malgré le nom du composant ) qui définit la hauteur de chaque rangée de manière fixe (en fonction de l’image la plus haute de la rangée). Cela peut être pratique si vous avez des images de hauteur presque identique.
Nous testons actuellement la version stable 2.8. La fonctionnalité catégories activées automatiquement ne se déclenche pas lorsqu’une catégorie spécifique est définie. Nous avons essayé d’ajouter le slug de la catégorie et l’ID de la catégorie. Lorsque catégories activées automatiquement est laissé vide, cela fonctionne.
C’est étrange. Cela fonctionne sur ma version 2.9.0.beta1, qui est pratiquement identique à la version stable 2.8. C’est le nom de la catégorie qui devrait être ajouté. Mais je vais voir si je trouve quelque chose.
Cette fonctionnalité est désormais intégrée au cœur de Discourse, consultez l’annonce concernant les grilles d’images dans Discourse.
→ Que voulez-vous dire par ordre personnalisable ?
→ Ce composant ressemble beaucoup à la galerie d’images Tiles de Joe. Est-ce un clone ou quoi ?
. Mais beaucoup de choses diffèrent, alors j’ai décidé de le partager. Ci-dessous, une liste de certaines des différences.Les petites images apparaîtront dans la galerie, mais une vue lightbox ne sera pas créée. C’est le comportement par défaut de Discourse. Cependant, il est possible de modifier ce qui est considéré comme une petite image en modifiant les paramètres
.
) qui définit la hauteur de chaque rangée de manière fixe (en fonction de l’image la plus haute de la rangée). Cela peut être pratique si vous avez des images de hauteur presque identique.