The discussion explores how to display multiple images side by side in a post. jmardenslp asks about placing images horizontally, noting that Markdown defaults to stacking them vertically. fefrei suggests using HTML tables as a workaround, providing an example. sam reminds users that tables may not be allowed in all site settings. fefrei confirms the table method works and shares another example. codinghorror humorously implies tables are a common solution. jmardenslp apologizes for a disruptive edit. ccdw proposes using CSS with float or inline-block, but notes challenges in targeting specific images, suggesting tagging posts or using alt attributes as workarounds, though acknowledging these methods can be messy.
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.
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:
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…
