Forum tip: Left and right alignment of images in forum posts is now possible

[tobiaseigen]

A common feature request here on the forum over the years has been to be able to have more control over the placement of images in forum posts. It’s not like we want use the forum as a blogging platform, but it would be nice to be able to include photos that illustrate what we are talking about while not overwhelming colleagues and friends with massive photos that take up the whole computer screen - which is the default behavior for uploaded pictures.

Well, as you can see live in action here in this post, it’s now possible to place images to the left or right of the text. It takes a little HTML know-how, which you can learn right here! Copy and paste the HTML code from the examples below into your post and then replace the URL portion with the URL to the image you want to use.

Left aligned image:

<div data-theme-image="left">
<img src='/uploads/default/original/2X/b/bc8a75cee2ec26174ef7c8def5faae91eaa46f15.jpeg'>
</div> 

Right aligned image:

<div data-theme-image="right">
<img src='/uploads/default/original/2X/5/5435fc3548ecfd9f1def9e7443eb6952d33688bb.jpeg'>
</div> 

Power tip: if the image you want to use is not uploaded somewhere on the internet already, you can upload the images you want to use to a personal message to yourself first, save your message, and then find the URL by right-clicking on the image and copying the image URL to your clipboard.

PS: and yes, in case you’re noticing something interesting about the image URLs above, placekitten.com is…

a quick and simple service for getting pictures of kittens for use as placeholders in your designs or code. Just put your image size (width & height) after the URL and you’ll get a placeholder.

Like this: http://placekitten.com/200/300
or: http://placekitten.com/g/200/300

Placekitten is alot of fun to use when testing out layouts! There are other services like this out there but placekitten is my personal favorite.

[tobiaseigen]

I played with this a bit today and learned two things. First, it helps to resize the image yourself before uploading - 200px wide seems a good width to note interfere with the post text but you could get away with 300px methinks. Second, it is possible to upload in the usual way, add a link for the image, and then just wrap the div around it to align it to the right - see example below.

<div data-theme-image="right">

[![9615c77f9d412b57fb524ba1cf38ec2b249e406a|200x133](upload://4BhLw2SodJwRKqdolJtmlzm5kGU.png)](https://attendee.gotowebinar.com/register/7188452387912512269)

</div>

[tobiaseigen]

Whoa, I just read Discourse 2.3.0.beta3 Release Notes - announcements - Discourse Meta and learned that it’s possible to resize images using markdown. This does not change the actual size of the image but it just lets you make it smaller. Combined with this left/right alignment and it’s super easy to use photos in posts without overwhelming it with huge images.

Improved image resizing discoverability

When large images are uploaded, Discourse automatically scales them to fit within the post stream. Users can click on the image to view the image full size, and to download it.

Sometimes, users do not want images to take up the full-width of the post stream, so Discourse supports resizing images. To do so users must add ,xx% to the image dimensions. To make this more discoverable, users can now resize images to common percentages (100, 75, & 50%) by hovering over the image preview and selecting the size they want. To make more specific adjustments, users can then edit the raw image markup.

Example: ![2uvt7h|653x499,75%](upload://giB96Oia9kd6AAFc0NG7aASIV9v.jpeg)