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.

10 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.

14 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):

https://github.com/hnb-ku/Discourse-Tiles-image-gallery/blob/ae11e1b19d72eb71194cb02cf833fb8a0eeb18fa/common/head_tag.html#L41-L59

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