I would like to center the image at the top of the topic starter which doubles as my blog for people to comment on. Or better yet, make the photo expand to the width of the box. What would be the code for that? Thanks. 
1 Like
You can align an image with HTML:
<div align="center">
<img src='//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/3/5/35b818325e1ea3cd9ef837696e6fe889447d8d5f.jpg'>
</div>
That looks like this:
10 Likes
Would it make sense to have uploaded images centered by default in Discourse? Posts look nicer this way, and probably lazy users would prefer this setting but we are… just lazy to add the HTML manually.
Users with other needs could still add the HTML.
5 Likes
I prefer images not being centered by default, they should adjust the way the reader prefers to read text (left to right, or vice versa). But that’s really always a personal flavor.
Markdown itself doesn’t have such capabilities, you’ll always need to use HTML for such things. Similar thing for showing a fixed scaled image size.
It might be a nice addition to add alignment icons into the editor, similar to what Wordpress allows, and just do the HTML magic there.
3 Likes
If the images are not wide enough they will stack horizontally like so:
If you’re fine with losing this, then you can automatically center all images in posts using CSS.
.lightbox-wrapper {
display: block;
text-align: center;
}
p>img:not(.emoji){
display: block;
margin: 0 auto;
}
The results would look like this:
14 Likes
I am definitely using that. Thanks III !
1 Like
As discussed here:
The code needs to be modified to exclude emojis.
I edited the code in the previous post to reflect that change.
The rest of the post still applies.
5 Likes
It’s now a wiki, feel free to update it.
6 Likes
I have an image I uploaded to the site that I’d like to reuse and center but it’s not working for me.
This works:
How would I center this image using the syntax shared above?
Thanks!
If you’re willing to use the BBCode plugin (and understand its risks & benefits), it allows for anyone to center images using only the editor.
You don’t need the bbcode plugin, just use some HTML.
<div align="center">
</div>
Note that the blank line is needed due to the mix of HTML and markdown. Without the blank line you’ll end up with centered text, rather than an image.
18 Likes
Why this doesn’t work for me. Where is the “code” button in editor to write some html?
Thanks.
You type it using your keyboard keys. There is no “code” button.
2 Likes
Yes, i try that, but doesn’t work. i try again.
Thanks.
1 Like
When you say not working, what is the exact result you’re getting? Any chance it is centered text instead of an image?
If so, make sure to include a blank line like in my example above. I’ve added a note calling that out.
2 Likes
Thank you for this! I knew I had the right code but could not get the right result. Appreciate the reminder and the explanation @jomaxro!
4 Likes
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.