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:
- Login, via the web interface, find your post in question and click edit.
- Once on the edit page, you'll notice the advanced editor menu is available, click the far right blue "html" button.
- 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. - 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:
- Email you post copy first.
- Upload your images to your own server, a CDN, or a service like Flikr.
- 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.
