Image Alignment

One solution is to make a plugin that whitelists some classes for img tags. You can then add those classes to your images and give them the styles you want in the admin>customize>css/html editor.

Here I have whitelisted the classes img-left and img-right and added them to my image tags after uploading the images.

for example <img src="/uploads/default/original/1X/103a294fe350cf4fbaee1ca6d9cc162230d7b90f.jpg" width="690" height="461" class="img-left">

and then styled with css

.img-left {
    float: left;
    width: 33%;
    height: auto;
    padding-right: 16px;
}

.img-right {
    float: right;
    width: 33%;
    height: auto;
    padding-left: 16px;
}

It is also possible to whitelist some data attribute tags such as data-img-max-width. You can then add something like data-img-max-width="50%" to your image tags and access that value through javascript.

See discourse-image-tag-whitelist/image-tag-whitelist.js at master · scossar/discourse-image-tag-whitelist · GitHub for an example plugin.

4 Likes

It works, but it’s a bit of a hack. The images are in <p> tags that don’t have a clearfix applied to them. Maybe there is a cleaner way to do it.

Edit - this might be better. According to this stackoverflow post http://stackoverflow.com/a/24526497/3157733 images are inline elements intended to reside inside of block level elements like paragraphs and divs. The Discourse markdown parser is behaving correctly by wrapping images inside of p tags. But that behaviour can be avoided by wrapping the image inside of an appropriate block level element.

By whitelisting some classes for the figure tag and then wrapping the images in them it’s possible to align images without generating weird markup.

with this in a plugin:

(function () {
  Discourse.Markdown.whiteListTag('figure', 'class', 'left-third');
  Discourse.Markdown.whiteListTag('figure', 'class', 'right-third');
})();

and then wrapping your images in figure tags like this:

<figure class="left-third"><img src="/uploads/default/original/1X/faf2fc3079d4d5a85729a1abecc64885935d562f.jpg" width="690" height="460"></figure>

you can then add something like this as custom css:

figure img {
    width: 100%;
    height: auto;
}

.left-third {
    float: left;
    width: 33%;
    margin-left: 0;
}

.right-third {
    float: right;
    width: 33%;
    margin-right: 0;
}

.post-menu-area {
    clear: both;
}
3 Likes

Hi, today, 2016, there are a simple and direct markup instruction to float-right an image?

5 Likes

Did you find some solution for this?

I’m also trying to find a simple way of floating images left or right as shown in the OP, but it looks like there is no way around whitelisting certain image tags. But is there no other way of doing this than via a plugin? If so, will @Simon_Cossar’s plugin still work today?

1 Like

No, but it wouldn’t be difficult to update it.

4 Likes

That would be very much appreciated. (I looked at it but I have not the faintest clue of what needs to be changed.) If it is so simple that it doesn’t require any particular programing skills, I’d be happy to do the typing if you tell me what needs to be done…

Any news regarding this? Or are there different ways of wrapping text around images/ floating images left or right?

1 Like

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.

13 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 figured out that even a theme component can access the plugin api, so I’m guessing it could br done with api.decorateCooked?

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?


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.

4 Likes

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

5 Likes

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.

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.

8 Likes

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?

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

5 Likes

Just a 2020 follow-up on this @ the top of Google :slight_smile: Any word on image float options?

Would love for this to be added to the markdown options as well.

1 Like

I’m wondering whether we can resize the image automatically?

I usually use lists, but lists will move the whole text right by a few spaces. and usually, part of the images’ will be hidden.

Like

The picture’s most width is 690 points(always 690 points), so when the list keeps deepening, the picture’s right side will be hidden.

Well, if the picture is very big, it can automatically be clickable, if you click it, a window will pop
up.

Can we automatically choose the suitable width of the picture?


A Great Choice

have you tried this? Markdown for image resize by px, not percent

thanks to @tobiaseigen

2 Likes

have you tried this? Markdown for image resize by px, not percent

2 Likes