Possible to place multiple images side by side?


(Jennifer Marden) #1

I am trying to figure out how to get two or more images to appear side by side. Currently when I drag images into a post, their previews appear one below the other. I’ve tried bracketing the images I’d like to appear on the same row with p and using nobr between the image links to no avail. I’m assuming that Markdown is generating html to show each image as its own paragraph, and so the html I add to create a paragraph with multiple images is being stripped somehow. Is there a secret way I’m missing, or is this not possible?

TIA! New to Markdown and Discourse, techie but not very html or css fluent, so I apologize if this is a silly question.


(Felix Freiberger) #2

You can cheat a bit and use tables to achieve that, if that is allowed in site settings:

There might be a better way to do this, but this was my first idea :slightly_smiling:


(Sam Saffron) #3

Keep in mind, tables break mobile


(Felix Freiberger) #4

They do indeed:

The same is true for whatever @jmardenslp did before he ninja-edited it away – I don’t think it was a table:


(Jeff Atwood) #5

As if I needed another reason to hate tables in replies.


(Jennifer Marden) #6

Sorry about the ninja edit. I was trying to show angle-bracket p close-angle-bracket and angle-bracket nobr close-angle-bracket and it was eaten.


#7

You can target these images with CSS, either float or inline block. The problem you face is how to discriminate between images you want to have inline and those you don’t.

You could add a tag to the post, eg gallery and then target that, but I think you’d need jQuery to select the target for the style as the tag element is a sibling of the topic body, not a parent (from memory in any case).

You could also encode something in the img alt tag and target that. That works fine with CSS but it’s a bit messy.

Alternatively, I use a gallery plugin from Flickety in my test site:

http://flickity.metafizzy.co/

It’s overkill for what you say you need, but does give good results. This carousel picks up on the carousel tag and renders a carousel - it also works with lightbox. I will post code at some stage, but not until I’ve managed to find out how to load the gallery script with require…