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.

47 thoughts on “Polaroid Style Thumbnails

  1. Pingback: 5 Cool Plugins for Windows Live Writer

  2. Matt Kruse

    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!

  3. V

    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

  4. Lazy Goy

    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!

  5. brett Post author

    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

  6. Karl

    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.”

  7. brett Post author

    Looks like the issue Karl reports might be a Live Writer issue with the latest release of Writer. See this post for more details.

  8. Pingback: Baby Pics « Homosecular Gaytheist

  9. Lisa

    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!

  10. Harry, BikeTravellers.com

    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

  11. brett Post author

    I tracked down the bug Harry mentions above and it will be fixed in version 1.7 which I’ll try and release soon…

  12. kelsey

    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.

  13. jolene

    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?

  14. Ralph

    Great plugin, I would prefer to have the option to have the link to a larger picture opens in a separate window (popup).

  15. nitin

    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)

  16. Pingback: 16 Windows Live Writer Plugins For Bloggers | TECH YARD

  17. Matt

    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!

  18. Alisa

    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

  19. brett Post author

    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.

  20. Herb Segars

    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

  21. Cinda

    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?

  22. brett Post author

    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

  23. Caroline

    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)

  24. Caroline

    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)

  25. Kirk

    Hey,
    Just want to say thanks for the plugin. Works great and was an unexpected treasure. Great work Brett.

  26. Amber

    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

  27. Caroline

    Similar to the above poster:

    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)

  28. Joanne

    A blogger and I both post to the same website using windows live writer. I can change the background so it matches the page (white). Her background defaults to gray (the style that happens to be on the home page).

    She says she has no option to “change defaults”. Just to “reset” defaults.

    Can I send her my settings file so she can post with white backgrounds too?

    Where can I find my settings file? Polaroid Pictures is the only plugin I have installed, and I don’t see a Plugins folder in my Windows Live Writer folder.

    Thanks in advance for your help!

  29. brettm

    hi joanne,

    send me a link to her blog – it’s usually a web-site CSS style that is causing the problem vs. the polaroid plug-in. if so, giving her your local LW settings won’t help. happy to take a look if i get a sec.

    tx,
    -brett

  30. Jackie

    thank you for creating such a terrific plug-in; this makes inserting pictures effortless, and the finished results are amazing. I was also able to insert a picture caption! Is there a way to hotlink the picture caption? I would like to give the Flickr author credit back to his original work.

  31. Kenneth

    Hi Brett
    Nice job. Is there any way to edit the caption? Also, i will be creating about 500 pages for a WordPress blog using live writer. Each page has at least one picture and many have more. Any way to keep the default directory for the picture files. Any way to get the plugin effects when i drag a picture onto a page using Explorer.

    Thanks,
    Ken

  32. brettm

    Kenneth,

    – yes, you can edit a caption when you insert a picture
    – bummer about the default directory. it should remember during a single LW session, but probably doesn’t persist between runs. easy fix (if i had time!)
    – no, can’t drag & drop in the plugin model. although polaroid pics is somewhat obsolete now as the core livewriter image has a tilt and photo paper effect you can use to get the same result…

    thx,
    -b

  33. Laurie

    Hey, Brett, looks like a great plugin! However…

    “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”

    That’s a bit of a problem for me. I’m hosting my images elsewhere simply so I don’t have to have them uploaded to my wordpress blog. Do you foresee changing this anytime in the future so the images don’t get copied to wordpress?

    Otherwise, it looks great! :)

    Thanks and have a great day. :)

  34. Russ

    This plugin is awesome!! Finally a solution to manage captions on photos prior to upload. Gracias!!

    Any plans to support multiple photo upload??

    Thanks again!
    Russ

  35. brettm

    no plans – sorry. since i wrote this, the livewriter guys baked polaroid-style photos into the latest release of LW; so i’ve kind of ignore the plugin since then. glad it’s working for you.

  36. Nick

    Hi Brett,

    Thanks for the work on the plugin and making it public.

    What I’m actually trying to do is use the plugin as an easy way to add captions to photos. Is there any way therefore to either adjust the colour of the polaroid from white to black (or a colour of one’s choosing), or even transparent. I’ve tried fudging the padding but can’t quite get it, and I can’t be arsed making a table each time myself for photo, caption, I’m just lazy!

    Any help appreciated, though I’m asking a lot.

    Cheers matey,
    Nick

  37. brettm

    hey nick,

    check out the options settings. goto Tools|Options > Plug-ins | Polaroid Picture Options and you will see in the General Tab you can change the background image to anything you like.

    Hope this helps.
    Cheers,
    -Brett

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>