Image Alignment


(itlo) #1

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.


CommonMark testing started here!
A plugin for adding layout classes to post elements
(Travis) #2

I would love this. I tried adding some classes directly to images, as well as adding inline styles, but the crawler that rehosts images and formats them puts a div around images that makes styling them difficult.


(nXqd) #3

I bet this means a better markdown.


(Jeff Atwood) #4

No plans for this at the moment.


(Tuan Anh Tran) #5

this is a very basic needs. Please consider adding this. Maybe introduce custom markdown syntax.


(Mark Devlin) #6

I’d like to register my support for improved image alignment tools.I am not asking for high-level PDF-style formatting, but simple left/right/center and text wrap. As the person above says “this is very basic needs”!

After over 20 years experience creating forums and, more recently, WordPress sites, when creating my site (totalbikers.com) I had the choice to build a WordPress blog/magazine site and add discussions, or to build around a forum. In this social age I felt that starting from the forum would be the best bet.

I took a risk with Discourse, and I am very happy with it so far. However, as well as straight discussions, I am trying to add some more blog-style articles, and it’s just weird not to have tools like (simple) image alignment. In the end I had to make an ugly full-width banner.

With these simple tools, I think Discourse could really attract a lot of WP people who are looking for better social engagement, and I would be happy to promote discourse as an alternative.


(Simon Cossar) #7

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.


(Mark Devlin) #8

Hi, I think that’s really great! Surely it’s possible to add this to core without too much trouble…


(Jeff Atwood) #9

Did you not notice the problem with button alignment in the above screenshot? Look where the reply button is.


(Kane York) #10

Perhaps this would fix that:

.cooked:after {
  clear: both;
}

(Simon Cossar) #11

This works:

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

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

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


(Simon Cossar) #12

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 html - In Markdown, is there a way to stop images from being wrapped with <p> tags? - Stack Overflow 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;
}

(Peter Krauss) #13

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


(Christoph) #14

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?


(Simon Cossar) #15

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


(Christoph) #16

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…


(Christoph) #17

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


(Tobias Eigen) #18

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…


(Kris) #19

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.


(Christoph) #20

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?