A while back, I came across this Octopress plugin for modal popups for images, which seemed like it’d be really useful, except it only scaled the image down with the browser rather than actually resizing the image. I didn’t like that much, so I never used it. Still, there have been times where I wished I had something like that handy so I could easily make popups of big images with nice, real resized thumbnails, so I finally got off my ass and modified that plugin a little bit to make resized thumbnails for the preview image, rather than relying on the browser’s resizing capabilities. Behold:
As you can see, that’s a picture of one of my telescopes in my rather cluttered garage (I’m working on that). That telescope’s one of the reasons I wanted a plugin like this, actually, because writing up a post on building it would have a lot of pictures, and having to resize all of them manually would be a huge ordeal.
You can find the source for the plugin at https://github.com/ctdk/octopress-image-popup. As previously mentioned, the original author’s explanation of the plugin is invaluable in getting it up and running. Once you have it installed, you’ll need to engage in some CSS trickery to get it looking nice. I got said CSS trickery ironed out, but it was an uncomfortable experience for me because I’m not all that great with it. Fortunately most people are better at CSS than I am, so the average person should have an easier time figuring that out. Still, I’ll add directions to the README.md to explain how to get the CSS set up. I had to look at the original plugin author’s blog’s source to figure out what he did there; the short version is to make his CSS stuff work you have to install the jquery-ui theme CSS, make a print.scss file, and make some custom .scss files to add the needed CSS files.
comments powered by Disqus