Image Alignment and Grid

[Lilly]

	Summary	Adds image grid and alignment buttons to composer toolbar
	Repository	https://github.com/Lillinator/image-alignment
	Install Guide	How to install a theme or theme component
	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.

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)

[Lilly]

just added button for centering images.

[piffy]

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

[Lilly]

thank you @piffy!

@piffy

Can you show what it looks like in the editor?

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.

[thoka (Thomas Kalka)]

Thank you for this solution for Image Alignment

[Heliosurge (Dan DeMontmorency)]

@Lilly

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

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

You are a rockstar making valuable add ons!

[Lilly]

@Heliosurge

You are a rockstar making valuable add ons!

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

[Heliosurge (Dan DeMontmorency)]

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

[Lilly]

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

[Heliosurge (Dan DeMontmorency)]

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

[Heliosurge (Dan DeMontmorency)]

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?

[Lilly]

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.

[Heliosurge (Dan DeMontmorency)]

Cool so add number of
until text aligns with appropriate pic

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

[Canapin (Coin-coin le Canapin)]

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 ↩︎

[Lilly]

@Canapin

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]

yea I don’t like that method either. I was thinking of perhaps trying a white space property solution. 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 ↩︎

[Canapin (Coin-coin le Canapin)]

Maybe you can explore other solutions than floats.

I tried to trade the float for flex… 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.

[Lilly]

@Canapin

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

hah the grid option is part of this theme component

I also definitely think mine is older .

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

[Canapin (Coin-coin le Canapin)]

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

[Lilly]

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:

[Canapin (Coin-coin le Canapin)]

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