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 Likes

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 Likes

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 Likes

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 Like

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 Likes

The formatting toolbar did the trick ez-pz for me! Thanks @Steven

Float right bbcode

We have a floatl bbcode (and button) that allows you to add a content on the left of your text (like the image in this example ). There is also a [floatr][/floatr] bbcode, that adds a content on the right. The bbcode has been created but I didn’t add a button, it doesn’t feel necessary.

I went ahead and cleaned up this topic a bit so that the most relevant information is highlighted.

Below is a summary of the current options for allowing image alignment in posts, ordered by ease of installation/use:

2 Likes

Some news here? I am an user, I only need to post a content with image-align-right.

1 Like

See What is the code for centering an uploaded image? - #14 by jomaxro. Instead of center, use right.

2 Likes

That can right-align the image, but won’t float it, right? That is, no wrapped text, which is probably what’s wanted?

That is correct. The topic I linked to wanted to center an image, and that’s all it does. If you also want float you’ll need to follow Kris’s suggestion (which requires that action be taken by an admin to get it set up) or install a plugin like the Formatting toolbar.

1 Like

Just noting that floating is also supported with the MD Composer extras component. It will add a button to the composer that might make things a little smoother.

4 Likes