Galerie d'images en maçonnerie

Je suis d’accord avec ce que vous dites. Je ne suis pas un développeur Discourse, donc je ne sais pas ce qui est possible ou pas.

2 « J'aime »

Le bogue GitLab a maintenant été corrigé. Merci de l’avoir signalé @Jagster ! :star:

2 « J'aime »

Juste par curiosité, comment fonctionne cette partie :

    &::before,
    &::after {
      content: "";
      flex-basis: 100%;
      width: 0;
      order: 2;
    }

Je vois que cela déplace des choses mais je ne comprends pas tout à fait :thinking: 2 pseudo-éléments, sans aucune largeur, tous deux placés en deuxième position… ?

Salut @chapoi !

Ces deux pseudo-éléments sont là pour empêcher les colonnes de fusionner. Ils n’ont pas de largeur car ils ne sont pas censés être vus, mais dans l’image ci-dessous, ils sont représentés par des lignes bleues.

Sans eux, les colonnes pourraient commencer à fusionner si la hauteur des colonnes diffère trop.

Les éléments 3, 6 et 9 dans l’image ci-dessus sont définis pour être dans la colonne 3 (avec la propriété order définie sur 3). Mais si nous supprimions les pseudo-éléments, la colonne 3 commencerait directement sous la colonne 2 (même avec order 3). Voir l’image ci-dessous. La “colonne 3” est mise en surbrillance en vert.

C’est parce que flexbox vérifie s’il reste de l’espace dans la colonne juste avant (par rapport à la colonne la plus haute). S’il y a assez d’espace pour accueillir le premier élément, il l’insérera là.

Cependant, les pseudo-éléments agissent comme des colonnes, donc flexbox vérifiera le pseudo-élément (au lieu de la vraie colonne) pour l’espace vide. Et comme les pseudo-éléments ont une hauteur de 100%, flexbox ne trouvera pas d’espace vide et donc la colonne 3 commencera là où nous voulons qu’elle commence.

J’espère que c’était clair et compréhensible. :sweat_smile:

2 « J'aime »

Solution très astucieuse !

Malheureusement, je n’ai pas trouvé ça tout seul. :grin:

Un des utilisateurs du forum que j’héberge a soulevé le fait que lors du retournement de l’écran d’un appareil mobile (tablette, téléphone), les images ne s’ajustent pas correctement à la nouvelle résolution. Cela se produit lorsque les images ont un rapport d’aspect différent (trop élevé) de celui de l’écran. Il manque donc quelque chose en haut et en bas de l’image. Est-il possible d’optimiser cela ? Je n’ai aucune idée si c’est possible ou facilement possible.

Merci pour vos commentaires ! Oui, il ne se rafraîchit pas lorsque l’on retourne l’appareil. Je n’ai pas trouvé de solution à l’époque, mais je vais y regarder à nouveau.

1 « J'aime »

Malheureusement, je n’ai pas trouvé de bonne façon de gérer un appareil retourné.

Une autre chose, si vous n’avez pas vu l’annonce, les grilles d’images viennent d’être ajoutées au cœur. Cela ne fonctionne pas exactement comme ce composant de thème, mais c’est très beau et c’est génial de l’avoir dans le cœur. Consultez ce sujet :

6 « J'aime »

J’ai créé un article avec six photos, en utilisant les balises de galerie d’images masonry. Jusqu’ici, tout va bien. J’ai ensuite ajouté un lien pour chacune d’elles afin que lorsqu’un utilisateur clique sur l’image, il soit redirigé vers un autre article. Lorsque j’ai fait cela, cela semblait toujours correct dans Onebox, mais l’article lui-même a perdu son format masonry et affichait simplement les images séquentiellement.

Est-ce un bug ou simplement quelque chose qui ne fonctionnera pas à cause des liens ?

1 « J'aime »

Salut @Octoberon ! Il n’a pas été conçu pour fonctionner avec des liens/onebox, c’est donc probablement le problème. Il a été conçu pour ouvrir une fenêtre contextuelle lorsque vous cliquez sur l’image. Bien que j’aie eu une demande similaire il y a quelque temps… :thinking:

Au fait, comment avez-vous ajouté le lien à l’image ?

2 « J'aime »

Oui, je me demandais si ce serait le cas. Pour créer les liens, j’ai simplement surligné le texte de l’image et utilisé le bouton de lien hypertexte habituel dans l’éditeur pour y coller un lien vers un autre article du même forum.

1 « J'aime »

Dans le sujet de la grille d’images, quelqu’un a mentionné la possibilité de masquer le bouton du compositeur. C’est peut-être déjà résolu avec CSS ou autre chose, mais j’ai pensé que cela pourrait intéresser d’autres personnes. Vous n’avez peut-être pas besoin d’un bouton si la création automatique est activée… :slight_smile: . Quoi qu’il en soit, l’option permettant de masquer le bouton est maintenant ajoutée.

1 « J'aime »

Quelqu’un d’autre rencontre-t-il des problèmes avec la fonction automatique ? Nous l’avons testée avec les versions 3.1 et 3.2 stables et dans les deux cas, elle ne fonctionne pas et aucune galerie de type « masonry » n’est générée malgré la configuration correcte des catégories.

1 « J'aime »

Salut @jrgong ! Étrange, cela semble fonctionner pour moi. As-tu un lien vers un article qui ne fonctionne pas ?

1 « J'aime »

Je n’ai pas pu voir ce message car il faut se connecter. Désolé.

Je pense qu’à un moment donné, j’avais une connexion à ce site de staging (n’est-ce pas ?), mais je ne la trouve plus de toute façon.

1 « J'aime »

salut
désolé, ce lien fonctionne : 350ml Challenge Just4Fun 🚀 Auf geht's 🚀 [Finale] - #91 von Hoppsi - Contests - Forum | Cannabisanbauen.net

2 « J'aime »

Je suppose que vous avez activé automatiquement cette catégorie spécifique et que le nombre minimum d’images requis est défini sur 3 (puisque vous avez trois images dans le message).

J’ai remarqué qu’il y avait une ligne vide entre les images. Avez-vous activé le paramètre autoriser automatiquement les lignes vides ?

1 « J'aime »

Oui, les deux paramètres ont été activés tout le temps

1 « J'aime »

Je n’ai pas pu reproduire ce problème. La seule chose à laquelle je peux penser est qu’il y a peut-être un autre composant de thème (ou plugin) installé qui ne fonctionne pas bien avec Masonry Image Gallery.

1 « J'aime »