Ce composant de thème insère des boutons dans la barre d’outils du compositeur de messages pour aligner les images téléchargées à gauche ou à droite du texte, 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 en fonction de leur nombre et de leurs dimensions, et créera également des liens vers les versions téléchargées plus grandes. Les boutons / fonctions d’alignement peuvent être utilisés plusieurs fois dans un même message pour créer une variété de mises en page. Fonctionne pour les vues de bureau et mobiles.
Pour l’utiliser, cliquez simplement sur le bouton d’alignement d’image dont vous avez besoin, puis téléchargez les images dans l’emplacement désigné entre les balises résultantes (marqué par un texte d’espace réservé qui peut être modifié dans les paramètres du composant).
Notez que la partie grille de ce composant est destinée à l’alignement des images téléchargées, et non des liens d’image (les autres options d’alignement fonctionneront pour les images liées). J’ai emprunté une partie du cadre de code de base au composant utile MD Composer Extras de @Steven.
À faire : ajouter des sélecteurs d’icônes appropriés pour chaque bouton.
Captures d’écran
bouton de grille de la barre d'outils du compositeur (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.
.
