Image Alignment

[tophee]

to manually add a [floatl] tag which would then be converted into html, then I would need a plugin, right?

I figured out that even a theme component can access the plugin api, so I’m guessing it could br done with api.decorateCooked?

discourse/discourse/blob/5eb0066be95226b68702b59a070bf684a1df6c9c/app/assets/javascripts/discourse/lib/plugin-api.js.es6#L147-L170

[tophee]

You’d do something like

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

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

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

This is not working for me and I can’t figure out why. When I follow the instructions, only one line of text moves next to the image, everything else stays beneath it. It’s as if the image is rendered as part of a text line.

Like this:

And this is the code:

Update: I checked the page source and found that the data-theme-image="left" bit doesn’t make it into the rendered post. Does that mean that the whitelisting of data-theme-* attributes is not working? If so, how to turn it on?

In fact, isn’t it just DIV[data-theme-*] that is whitelisted?

https://github.com/discourse/discourse/pull/5598/commits/d46415ec033a26d216dbbe75a65caaace50af5d9#diff-1caf3634b8014ccfee05a97e209706f4R141

---

I also wonder how to use the image code that discourse creates by default when pasting an image, like
![image|200x200](upload://hOBZ8Ar3ig1hNyZMDnaCgEgqrmA.jpg) in combination with the img tag.

[Steven]

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

Formatting toolbar

Formatting toolbar WARNING If you use this plugin in conjunction with the official BBCode plugin your Discourse instance will be broken! I wanted to create one plugin for other users with some basic options : underline, color, a float (see the screen), center, align to right and justify. I also added a img button because it’s easier to use one with the float button. Here an example of the possibility provided by this plugin : [image] And in the composer you’ll have new buttons : …

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

[awesomerobot]

Oh yes, totally right - you’d need to wrap the image in a div with the data attribute first, then it should work. I updated my previous post to reflect that.

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?

Yes, I believe so because the [floatl] tag would need to be whitelisted. As you mentioned, with a theme component you’d be able to include the relevant CSS, and a toolbar button to enter the div.

[Samuel_Leuenberger]

Given last update was 6 month ago, are there been some standardization in Discourse’s supported markdown for a float tag ?
Or is @Steven’s proposal above the most achieved thing available to an admin that want to provide proper image alignment to its forum’s users?

[Steven]

Welcome to the community!

I didn’t see any major update in the markdown engine regarding this kind of feature. You still need the plugin.

Maybe there are other options available, what I can say is that the plugin still works with the new versions of Discourse