Home | Ultralight Gear List


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 Responses to “Polaroid Style Thumbnails”

  1. Lorelle Says:

    Great idea, I just want to check one thing. Did you mean rel=”thubmnail” or rel=”thumbnail”? Thanks!

  2. brett Says:

    oops :) good catch. i fixed. i never was very good a speeling ;)

  3. 5 Cool Plugins for Windows Live Writer Says:

    [...] You can learn more about this great plugin from the author’s website: http://www.brettonstuff.com/index.php/tech/polaroid-style-thumbnails [...]

  4. Matt Kruse Says:

    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!

  5. V Says:

    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

  6. Lazy Goy Says:

    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!

  7. brett Says:

    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

  8. Karl Says:

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

  9. brett Says:

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

  10. Baby Pics « Homosecular Gaytheist Says:

    [...] 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 [...]

  11. Reed Braden Says:

    When you use the red corners and tilt the image, occasionally the text goes wonky. It looks like a coloured bleeding of the letters.

  12. Lisa Says:

    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!

  13. Harry, BikeTravellers.com Says:

    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

  14. brett Says:

    Harry – thanks for the feedback – I’ll look into reproducing it.

  15. brett Says:

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

  16. deden m. ihsan Says:

    Love this great tool, and how about if you add this style; curl effect on every four edges. Thanks

  17. kelsey Says:

    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.

  18. Allen Says:

    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?

  19. brett Says:

    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…

  20. torrentmaster Says:

    Ty for this cool plugin!

  21. brett Says:

    version 1.7 released.

  22. jolene Says:

    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?

  23. Ralph Says:

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

  24. nitin Says:

    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)

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

    [...] 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. [...]

  26. Matt Says:

    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!

  27. Alisa Says:

    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

  28. brett Says:

    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.

  29. Herb Segars Says:

    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

  30. Cinda Says:

    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?

  31. brett Says:

    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

  32. Caroline Says:

    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)

  33. Caroline Says:

    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)

  34. Kirk Says:

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

  35. Amber Says:

    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

  36. Caroline Says:

    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)

  37. brettm Says:

    caroline,

    if you get a chance – please try and download this early release of 1.9:

    http://www.brettonstuff.com/downloads/PolaroidPics-1.9-Setup.msi

    i believe the bug is fixed in there, or you’ll at least get a different error message.

    thx,
    -brett

  38. Joanne Says:

    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!

  39. brettm Says:

    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

  40. Jackie Says:

    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.

  41. Kenneth Says:

    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

  42. brettm Says:

    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

  43. Laurie Says:

    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. :)

  44. Russ Says:

    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

  45. brettm Says:

    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.

  46. Nick Says:

    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

  47. brettm Says:

    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