Polaroid Style Thumbnails
I’ve had several folks ask me how I do the ’tilted’ Polaroid effect on my image thumbnails, including a popup for the larger version.
Until today the answer was somewhat complicated: “using some tools and scripts I wrote that run manually on the server”.
I exchanged some email on Friday with an old friend Greg Friedman – who is the Development Manager for several Windows Live products and who has Windows Live Writer under his command. He inadvertently prompted me to think about using Live Writer for editing.
Live Writer is a very cool WYSIWYG (What You See Is What You Get) editor that allows people to author blog posts seeing them in the style of their site. I use WordPress as my blog platform – which I love – but often the editor and the ‘published’ view differ quite a lot.
Last night, I downloaded the Live Writer SDK and hacked up a plugin that allows me to compose Polaroid images on the fly.
To get the ‘popup’ style, I added the Thumbnail Viewer WordPress plugin. With this technique any images that are marked with rel=”thumbnail”, get automatically lightboxed. My Live Writer Plugin sets this attribute for you, so you don’t have to do a thing. It also generates an 800×600 sized image to go in the lightbox automatically. So you can shoot big photos, and publish them in seconds.
If you use WordPress and are interested in trying this out, do the following:
1. Download and install the WordPress Thumbnail Viewer.
2. Download and install Windows Live Writer.
3. Download and install my Polaroid Plugin from the Live Writer Gallery.
4. Run Live Writer, and there should now be an “Insert Polaroid” option.
Oh… and I made a few upgrades while I was at it – a new drop-shadow effect, and also the option to put a caption on the Polaroid.
I’m sure there are bugs – so if anyone uses it let me know and I’ll fix ‘em.
OK – enough geeking out – I did promise myself I’d try not to post any tech-related articles and so far I’m doing pretty good.
Update Version 1.6:
- options dialog to configure defaults
- added support for transparent backgrounds
- transparent backgrounds don’t work if your blog is hosted on windows live. the windows live blogs don’t allow uploads of PNG files that support alpha-blended transparency needed for the drop-shadow. you can change to a different solid background if you use windows live – or complain to MSFT 
- support for some border styles
Update Version 1.7:
just bug fixes, including:
- improved performance when tilting images by caching last image
- reduced temp-files generated
- resize-bug fixed
- fixed some weird font-measurements where the captions were taking up more vertical space than they should with some fonts.
35 Responses to “Polaroid Style Thumbnails”
November 7th, 2007 at 4:37 pm
Great idea, I just want to check one thing. Did you mean rel=”thubmnail” or rel=”thumbnail”? Thanks!
November 7th, 2007 at 6:49 pm
oops
good catch. i fixed. i never was very good a speeling 
December 20th, 2007 at 8:38 am
[...] You can learn more about this great plugin from the author’s website: http://www.brettonstuff.com/index.php/tech/polaroid-style-thumbnails [...]
January 31st, 2008 at 8:46 am
I just found Live Writer, and shortly after that I found your plugin. Exactly what I wanted, thank you very much! One annoyance is that I want the default size to be my customized version of “small” but if I change the settings for “small” images are inserted by default as Custom with a size of 275px. Would be nice if I could set the default to use and have it maintained. But it’s not too much work to change for each picture. Thanks again!
March 4th, 2008 at 1:07 pm
Hi, I recently started using Windows Live Writer for publishing my blog and I have found your plugin as one of the most useful and best plugins available. It really helps provide the blog that wel-designed feel without worrying about the details.
Thanks and keep up the good work
March 9th, 2008 at 4:55 pm
hi, great plugin! by the way, is it possible to use “insert polaroid” but the picture is not on your local hard drive but on flickr? how do you do it? thanks a bunch!
March 9th, 2008 at 8:35 pm
Lazy Goy,
You can sort-of do this. Copy the URL to the image from flickr onto your clipboard, then when you insert a polaroid – when the File-Open dialog comes up – just paste in the URL instead of picking a file. Polaroid Picture will download this photo and use it.
Fwiw – it will end up re-reposting the image to your blog site, which might not be quite what you are asking for – but it’s a start
thx,
-brett
March 20th, 2008 at 9:29 pm
I just upgraded to the very latest version, posted March 20th.
Unfortunately it doesn’t work!
“Object reference not set to an instance of an object.”
March 21st, 2008 at 8:44 pm
Looks like the issue Karl reports might be a Live Writer issue with the latest release of Writer. See this post for more details.
June 15th, 2008 at 9:49 pm
[...] Jump to Comments I’m fooling around with a new Windows Live Writer plugin that lets me post images with a Polaroid scrapbook-style look. What a great time to inundate [...]
June 26th, 2008 at 6:34 pm
When you use the red corners and tilt the image, occasionally the text goes wonky. It looks like a coloured bleeding of the letters.
October 26th, 2008 at 9:10 pm
Can you please add capability to center the polaroids? I use this plugin often since it allows me to add text to my pictures, but I’d love to be able to center them to match my other plugins (which don’t allow text but I don’t always need it). Thanks!
November 14th, 2008 at 9:28 am
Hi, thanks for the plugin. I installed it a few months ago, but noticed that thousands (!) of (numbered) copies of certain postimages (.png) were created in the PostSupportingFiles folder of Windows Live Writer application data, slurping up 3gb of disk space for about 9 posts…
Not sure if this is a Vista issue, Livewriter, or your plugin, but together they seem to eat my diskspace.
Might want to test if this still happens with latest version?
Cheers,
harry
November 14th, 2008 at 2:18 pm
Harry – thanks for the feedback – I’ll look into reproducing it.
December 4th, 2008 at 3:08 pm
I tracked down the bug Harry mentions above and it will be fixed in version 1.7 which I’ll try and release soon…
December 31st, 2008 at 12:31 am
Love this great tool, and how about if you add this style; curl effect on every four edges. Thanks
January 1st, 2009 at 11:26 am
What do I get from this if I do not use Wordpress. Is the whole thing broken, or do I get partial functionality? I’ll probably forget I posted this, so if there’s a way for you to respond to my email, that would be great.
Thanks.
January 4th, 2009 at 9:49 pm
You mentioend that you were releasing v1.7. The gallery site only has 1.6 as the latest version. Where can we get 1.7?
January 4th, 2009 at 11:00 pm
Hey Allen,
I haven’t had mich time to test it yet – a beta version is available here: http://www.brettonstuff.com/downloads/PolaroidPics-1.7-Setup.msi if you want to give it a try…
January 6th, 2009 at 12:43 am
Ty for this cool plugin!
January 6th, 2009 at 5:35 pm
version 1.7 released.
February 23rd, 2009 at 4:33 am
cool plugin!
i like the fact that it allows me to add in text on the polaroid unlike the default add in that Live Writer has..
only one grouse, any way to remove the black border around the polaroid?
April 1st, 2009 at 7:07 am
Great plugin, I would prefer to have the option to have the link to a larger picture opens in a separate window (popup).
April 7th, 2009 at 2:17 am
Tried opening a png image and it puked with this
System.NullReferenceException: Object reference not set to an instance of an object.
at PolaroidPics.ImageMaker.CreatePolaroid(String sFileSrc, Int32 cLongEdge, Int32 iPadding, Single ftRotate, String sCaption, Color clrBk, Color clrCaption, Font fntCaption, Image imgTemplate)
at PolaroidPics.PolaroidPlugin._BuildImage(ISmartContent content)
at PolaroidPics.PolaroidPlugin.CreateContent(IWin32Window dialogOwner, ISmartContent newContent)
April 10th, 2009 at 8:59 am
[...] Polaroid Picture WLW plugin – This creates a Polaroid style frame around the image, also allows you to tilt the image and also display text below the image.This plugin makes use if a Wordpress plugin called “Thumbnail viewer” to achieve this, and the Live Writer plugin Polaroid Plugin.“Insert Polaroid” option should be available now under.Download : Thumbnail WP Viewer and WLW Polaroid plugin. [...]
April 19th, 2009 at 1:33 pm
I really love your plugin, especially that allows you to add text to your pictures!
Two suggesestions:
1) Please add an option to upload the original image (with its original size!) instead of downsizing it to 800 x * or * x 800 (as *8×6.png).
2) It would be great if you could specifiy multiple lines for the added text instead of a single line.
Again, thank you for your great plugin!
May 19th, 2009 at 6:16 pm
I really like the plugin, with one exception. Is there anyway not to have the border/box around the polaroid picture? It ends up taking up too much space and runs right up against the text in the blog. I would like to see just the polaroid like what you have here. Thanks
May 19th, 2009 at 6:45 pm
Alisa,
I’m pretty sure this is a side-effect of the style sheet on your blog. If you send me a link to an example where you have posted one of my polaroid pictures I can take a look to make sure it’s not a bug.
Cheers,
-Brett.
July 23rd, 2009 at 9:45 am
Brett,
Your plugin is great. It was just what I was looking for for my blog. Thanks for all the work. I was wondering if there is any way to choose a default directory for the plugin to look for photos. It always chooses the “My Pictures” folder when I keep all my blog images in “My Documents/blog photos” folder. It’s a minor thing but it would speed my workflow.
Great job, Brett
-Herb
July 28th, 2009 at 2:15 pm
Brett,
I really like the plugin…I love to put captions on pics. I am using blogger and I am having the same problem as Alisa (posted above) with the border/box around the polaroid. It takes up a ton of space. Is there any way I can just have the polaroid there?
July 28th, 2009 at 3:29 pm
Hey Cinda,
Alisa’s problem turned out to be a style sheet issue with her blog.
in your blogs .css file, look for a style rule that is for IMG tags. Alisa’s looked something like this:
.post img {
margin-top:0;
margin-right:0;
margin-bottom:5px;
margin-left:0;
padding:4px;
border:1px solid #bbbbbb;
}
and the ‘border’ line was adding an extra border to images. if you delete this line and save the CSS file, then all will be fixed. I’m pretty sure you have a similar issue – I’ve had several folks using blogger templates complain about the same thing.
thx,
-brett
November 22nd, 2009 at 7:54 pm
I just had another Polaroid malfunction:
System.NullReferenceException: Object reference not set to an instance of an object.
at PolaroidPics.ImageMaker.CreatePolaroid(String sFileSrc, Int32 cLongEdge, Int32 iPadding, Single ftRotate, String sCaption, Color clrBk, Color clrCaption, Font fntCaption, Image imgTemplate)
at PolaroidPics.PolaroidPlugin._BuildImage(ISmartContent content)
at PolaroidPics.PolaroidPlugin.CreateContent(IWin32Window dialogOwner, ISmartContent newContent)
December 21st, 2009 at 8:31 pm
Another malfunction:
System.NullReferenceException: Object reference not set to an instance of an object.
at PolaroidPics.ImageMaker.CreatePolaroid(String sFileSrc, Int32 cLongEdge, Int32 iPadding, Single ftRotate, String sCaption, Color clrBk, Color clrCaption, Font fntCaption, Image imgTemplate)
at PolaroidPics.PolaroidPlugin._BuildImage(ISmartContent content)
at PolaroidPics.PolaroidPlugin.CreateContent(IWin32Window dialogOwner, ISmartContent newContent)
January 17th, 2010 at 11:21 am
Hey,
Just want to say thanks for the plugin. Works great and was an unexpected treasure. Great work Brett.
January 19th, 2010 at 6:49 pm
Hi Brett, I love this plugin however…I keep getting a crash log.
Here it is:
System.NullReferenceException: Object reference not set to an instance of an object.
at PolaroidPics.ImageMaker.CreatePolaroid(String sFileSrc, Int32 cLongEdge, Int32 iPadding, Single ftRotate, String sCaption, Color clrBk, Color clrCaption, Font fntCaption, Image imgTemplate)
at PolaroidPics.PolaroidPlugin._BuildImage(ISmartContent content)
at PolaroidPics.PolaroidPlugin.CreateContent(IWin32Window dialogOwner, ISmartContent newContent)
Any help would be great.
Thanks