Custom Image Placement in Posterous



Posterous has some wicked cool image handling capabilities. Just attach an image to your email to the service and it will get embedded in your post at the top of the content (example). Attach several images and Posterous builds a sweetly simplistic gallery for you at the bottom of your post (example).

But what happens when you want more control over image placement?

Moving Single Image or Gallery Placement

When you attach an image, or multiple images, a Posterous object is created and called into your post with some custom code. To move the image position you’ll need to:
  1. Login, via the web interface, find your post in question and click edit. 
  2. Once on the edit page, you’ll notice the advanced editor menu is available, click the far right blue “html” button.
  3. Inside the html code you will see something that looks like this: [[posterous-content:Y22oPHKFX11e6BY4miL5]]. That is the Posterous object code calling your image.
    NOTE: an image gallery will also use a single object code as well, more about that that below.
  4. Now you can cut and paste that code where ever you want it to appear in the post.
But what about positioning and margin? Simple as pie. Simply surround the Posterous object code with a <div style=”float:right;margin:1em;“> </div> and you are good to go. Modify the inline style as needed for your look.

Multiple Positioned Images

You will quickly notice, when you attach multiple files to your email, that Posterous doesn’t create multiple object codes for each image, but just one code for the gallery. To get around this and position individual images,

UPDATE: Roj commented below that you can include ((nogallery)) in the subject line of your email. This will cause Posterious to generate individual image tags for multiple images attached.

don’t attach your images in the email. Rather:
  1. Email you post copy first. 
  2. Upload your images to your own server, a CDN, or a service like Flikr. 
  3. Login to Posterous and edit the post html. Adding <img src=”http://my-img-url-here” style=”float:right;margin:1em;” /> for each image you want to include. Place the image tag where ever you need the image.positioned in the post.
Have any other Posterous tips and tricks? Please let everyone know by commenting below.

14 thoughts on “Custom Image Placement in Posterous

  1. I just want to be able to control the order of the images. That’s my one complaint. Otherwise it’s the awesomest.

  2. I’d like the ability to add/change images in a post after the initial creation. I made a change to a graphic and I didn’t want to bother with uploading it to a CDN or flickr, I simply wanted posterous to host. I had to create a new post with the update and delete the old. Not a huge deal but I lost history (user views) on the previous post, which may mean a lot to someone with thousands of viewers.Agree on Alexis ‘awesomest’ comment.

  3. Yep, I wish they had a better image hosting UI as well. Unfortunately, for now, we have to use Flickr or other host to do custom image placement. Here’s hoping though. Thanks for the comments.

  4. You can suppress the gallery generation for multiple images by putting ((nogallery)) in the subject of your email, this will then ensure that there will be multiple [posterous-content] tags in the posting which you can then place where you want.

  5. I want to control the size of the image in the post. Sometimes a single photo in a post will appear too large for my taste.

  6. this is quite an old post now, but I came across it because I was trying to figure out this issue..a really nice alternative solution (especially if you have an existing post you need to edit and embed images into, which was my case) is to just put in a…. link to your image page.Posterous automatically processes it and shows the image, right where you put the link.

  7. I’m a bit sad that this post is still relevant.Thanks for the info though — answered exactly the question I was wondering myself!

  8. Seems it would be nice to be able to refer to the image filenames that were attached in your post text with some special syntax and have Posterous link them up. For example, if I used Markdown format for my post, I could attach images img1.png and img2.png and then in my post, I could use “![Sample 1](img1.png)” and “![Sample 2](img2.png)” in my post text. Basically, an image reference to a local image refers to the one attached.

  9. Thanks that was very useful, I was trying to work out how to display an image inline to give a nicer feel to my posts on my invoice software blog! Really was a quick fix in the end, so thank you!

  10. I would love to know that as well. Have tried to define a new ID but no luck. I host my images externally and use markdown to publish. Frustrating.

Leave a Reply to Ryan Gray Cancel reply

Your email address will not be published. Required fields are marked *