Image Alignment

Any plan to add a feature for Image Alignment and Wrapping Text Around Images? More formmating options for photos (uploaded or linked) would be very useful. Cheers.

11 „Gefällt mir“

This question comes up all the time in my community. We’d love to be able to include a small image or two in our posts without interrupting the flow of text.

Here’s a typical example…

2 „Gefällt mir“

You don’t need a plugin to whitelist classes anymore, you can just use data-theme-* attributes directly in your post’s markup.

You’d do something like

<div data-theme-image="left">
  <img src="https://example.com/example.jpg" >
</div>

and then in your site customizations you’d have add corresponding CSS

[data-theme-image="left"] {
    float: left;
    img {
      margin: 1.3em 1em 0 0;
    }
}

Might be a good case for a simple theme component.

17 „Gefällt mir“

I had to look this one up. In case anyone else is wondering how this works, here you go:

So let’s see if I understand how this would work. One way would be to add a toolbar button that would add a div with the data-theme-image attribute, just like here (where a different attribute is added):

Right?

Now, if I think that adding a toolbar button each for aligning images, say, left right centre (or even adding a toolbar button at all) and I instead want to manually add a [floatl] tag which would then be converted into html, then I would need a plugin, right?

1 „Gefällt mir“

I’ve done a plugin with some formatting options, center, align right, float element, color. You can activate/deactivate any option

It’s using bbcodes tho, it may not be as clean as other options

6 „Gefällt mir“

Die Formatierungsleiste hat es mir leicht gemacht! Danke @Steven

BBCode für nach rechts schwebende Elemente

Wir haben ein BBCode-Tag floatl (und eine entsprechende Schaltfläche), mit dem du Inhalte links neben deinem Text einfügen kannst (wie das Bild in diesem Beispiel). Es gibt auch ein [floatr][/floatr]-BBCode-Tag, das Inhalte rechts platziert. Das BBCode-Tag wurde erstellt, aber ich habe keine Schaltfläche hinzugefügt, da dies nicht unbedingt erforderlich erscheint.

Ich habe dieses Thema etwas bereinigt, damit die wichtigsten Informationen hervorgehoben werden.

Nachfolgend finden Sie eine Übersicht der aktuellen Optionen zur Ausrichtung von Bildern in Beiträgen, sortiert nach Installations- und Anwendungsfreundlichkeit:

2 „Gefällt mir“

Hier gibt es Neuigkeiten? Ich bin ein Benutzer, ich muss nur einen Beitrag mit Bild-rechts-ausgerichtet posten.

1 „Gefällt mir“

Siehe What is the code for centering an uploaded image? - #14 by jomaxro. Verwenden Sie statt center right.

2 „Gefällt mir“

Das kann das Bild rechtsbündig ausrichten, aber es nicht einfließen lassen, oder? Das heißt, kein umfließender Text, was wahrscheinlich das Gewünschte ist?

Das ist korrekt. Das verlinkte Thema wollte ein Bild zentrieren, und das ist alles, was es bewirkt. Wenn du auch float möchtest, musst du Kris’ Vorschlag befolgen (was erfordert, dass ein Administrator die Einrichtung vornimmt) oder ein Plugin wie die Formatierungssymbolleiste installieren.

1 „Gefällt mir“

Nur zur Info: Floating wird auch mit der Komponente MD Composer extras unterstützt. Dadurch wird dem Editor eine Schaltfläche hinzugefügt, die den Ablauf etwas flüssiger gestalten könnte.

4 „Gefällt mir“