Image Alignment and Grid

:information_source: Summary Adds image grid and alignment buttons to composer toolbar
:hammer_and_wrench: Repository https://github.com/Lillinator/image-alignment
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

This theme component inserts buttons on the post composer toolbar to align uploaded images with text left or right, in center of post, or to align multiple images in a grid, using the newly implemented grid tags. The grid will automatically size the images to fit depending on how many and each one’s dimension, and it will also link to the bigger uploaded versions. The buttons / align functions can be used multiple times in one post to create a variety of layouts. Works for both desktop and mobile views. :slight_smile:

To use, simply click the image alignment button you need, then upload images to the designated spot between the resulting tags (marked by placeholder text which can be edited in component settings).

Note that the grid part of this component is for aligning uploaded images, not image links (the other alignment options will work for link images). I borrowed some of the basic code framework from @Steven’s useful MD Composer Extras component.

To-do: add proper icon selectors for each button.


Screenshots

composer toolbar grid button (with grid code example)

images grid example

composer toolbar right align button (with right align code example)

image align right of text

composer toolbar left align button (with left align code example)

image align left of text

composer toolbar center align button (with center align code example)

image aligned center (with text)

13 Likes

just added button for centering images.

2 Likes

Great tool! Can you show what it looks like in the editor?

2 Likes

thank you @piffy! :slight_smile:

do you mean the composer / editor with the toolbar? that would be the first screenshot with the grid example. i’ll add some screenshots of the editor with the other alignment codes around images.

2 Likes

Thank you for this solution for Image Alignment

2 Likes

Awesome component! Was just going to ask this kind of question!

You are a rockstar making valuable add ons!

1 Like

why thank you Dan I appreciate the compliment and am happy you find them useful :slight_smile:

1 Like

Your quite welcome. Gow do you get the Align left for example showa bolded text in your ss. I tried markdown and it is showing the markdown code.

I see it works with ### but standard bold with

**Text**

doesn’t seem to

I’m not sure I understand what you mean @Heliosurge ?

1 Like

My apologies when I tried it earlier it didn’t work. Not sire what changed. This is quite awesome thanks.

1 Like

Okay if your using more than 1 image I am getting this.

From this code. How do I make info sticky to each pic. Shawn info should be beside 2nd pic

How can I fix?

1 Like

just insert some <br><br> html tags in between the first text block and the second <div-data-theme…> tag until it spaces properly. I will try to program a hard return or something in there when I get some time.

1 Like

Cool so add number of
until text aligns with appropriate pic

Thank you again for your help and awesome theme-component !

2 Likes

I think this is not a reliable method as the content’s height will differ from one window’s size to another.

Clearing floats when there are arbitrary contents next to them is tricky. I’m not sure there’s an obvious solution here…[1]

It was also an issue with the Wordpress editor for ages.

People tend to rely on hacky methods using elements whose only purpose is having a clear: both; to reset previous floats.


  1. until don shows up :upside_down_face: ↩︎

1 Like

yea I don’t like that method either. I was thinking of perhaps trying a white space property solution. :thinking: ultimately, it works best if the aligned images are separate posts. Unfortunately, images in tables don’t work great either.


  1. until don shows up :upside_down_face: ↩︎

Maybe you can explore other solutions than floats.

I tried to trade the float for flex:thinking: Without going in-depth.

[data-theme-image=left] {
    display: flex;
    float: none;
}

[data-theme-image=right] {
    display: flex;
    float: none;
    justify-content: flex-end;
}

[data-theme-image=left] {
    display: flex;
    float: none;
}

[data-theme-image=right] {
    display: flex;
    float: none;
    flex-direction: row-reverse;
}

Or maybe look at the grid layout? I don’t know anything about it, though. My CSS knowledge is years old. :older_adult:

hah the grid option is part of this theme component :grin:

I also definitely think mine is older :exploding_head:.

what are those? cookies? I can’t tell if they are potatoes or dumplings or biscuits of some sort. :sweat_smile:

1 Like

I made daifuku mochi yesterday, filled in with homemade anko.

Tried those flex align property solutions but couldn’t come up with something consistently workable. I did find a usable workaround though. If you make each image-text section a block quote, it separates them (but includes the quote formatting for the text):

editor / previewer:

result:

1 Like

This is because <blockquote> contains a clear: both; in Discourse.

2 Likes