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.
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:
- MD Composer extras (theme component)
- Formatting toolbar (plugin)
- Build your own solution: Image Alignment - #19 by awesomerobot and if you want to add a toolbar button, there is an example in Image Alignment - #20 by tophee
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