Ce composant de thème insère des boutons sur la barre d’outils de composition de message pour aligner les images téléchargées avec le texte à gauche ou à droite, au centre du message, ou pour aligner plusieurs images dans une grille, en utilisant les balises de grille nouvellement implémentées. La grille dimensionnera automatiquement les images pour qu’elles s’adaptent en fonction du nombre et des dimensions de chacune, et elle fera également un lien vers les versions téléchargées plus grandes. Les boutons / fonctions d’alignement peuvent être utilisés plusieurs fois dans un seul message pour créer une variété de mises en page. Fonctionne pour les vues de bureau et mobiles.
Pour utiliser, cliquez simplement sur le bouton d’alignement d’image dont vous avez besoin, puis téléchargez les images à l’emplacement désigné entre les balises résultantes (marqué par un texte de remplacement qui peut être modifié dans les paramètres du composant).
Notez que la partie grille de ce composant est destinée à aligner les images téléchargées, et non les liens d’images (les autres options d’alignement fonctionneront pour les images liées).
Captures d’écran
bouton de grille de la barre d'outils de composition (avec exemple de code de grille)
Voulez-vous dire le compositeur / éditeur avec la barre d’outils ? Ce serait la première capture d’écran avec l’exemple de grille. J’ajouterai quelques captures d’écran de l’éditeur avec les autres codes d’alignement autour des images.
De rien. Comment faites-vous pour que, par exemple, « Aligner à gauche » affiche un texte en gras dans votre capture d’écran ? J’ai essayé le Markdown et il affiche le code Markdown.
Je vois que cela fonctionne avec ### mais le gras standard avec
À partir de ce code. Comment puis-je rendre les informations collantes à chaque image ? Les informations de Shawn devraient être à côté de la 2ème image.
insérez simplement quelques balises HTML <br><br> entre le premier bloc de texte et la balise <div-data-theme...> jusqu’à ce que l’espacement soit correct. J’essaierai de programmer un retour à la ligne ou quelque chose de similaire quand j’aurai le temps.
Je pense que ce n’est pas une méthode fiable car la hauteur du contenu différera de la taille d’une fenêtre à l’autre.
Effacer les flottements lorsqu’il y a un contenu arbitraire à côté d’eux est délicat. Je ne suis pas sûr qu’il y ait une solution évidente ici…[^don]
C’était aussi un problème avec l’éditeur Wordpress pendant des lustres.
Les gens ont tendance à s’appuyer sur des méthodes de bidouillage utilisant des éléments dont le seul but est d’avoir un clear: both; pour réinitialiser les flottements précédents.
Oui, je n’aime pas cette méthode non plus. Je pensais peut-être essayer une solution de propriété d’espace blanc. en fin de compte, cela fonctionne mieux si les images alignées sont des messages distincts. Malheureusement, les images dans les tableaux ne fonctionnent pas très bien non plus.
J’ai essayé ces solutions de propriété flex align mais je n’ai pas trouvé quelque chose de fonctionnel de manière cohérente. J’ai trouvé une solution de contournement utilisable cependant. Si vous faites de chaque section image-texte une citation en bloc, cela les sépare (mais inclut le formatage de citation pour le texte) :
en fin de compte, cela fonctionne mieux si les images alignées sont des messages distincts. Malheureusement, les images dans les tableaux ne fonctionnent pas très bien non plus.
.
