We have a personal blog that I host using wordpress on my domain (just like this one). Posts on the personal blog are made by someone who’s not into technology and isn’t interested in details – they’d much rather prefer something that’s user friendly and just works. The posts are usually made using Windows Live Writer which is an excellent WYSIWYG editor for blog posts.
This particular personal blog is heavy on posts with a lot of pictures. One requirement that came up was the ability to put up a post with a series of pictures that show as smaller pictures in the posts but are clickable and launch a picture viewer that then allows you to cycle through all the pictures. After a bit of searching, I found the excellent jQuery Colorbox plugin which does exactly this. Basically, once you setup the right options in jQuery Colorbox, all the images in a single post will be grouped together and can be launched into a slideshow like UX. You can see examples of it in action here.
Once I set up the
Automate jQuery Colorbox for all images in pages, posts and galleries
option, this just started working and the posts with images now showed these images as a clickable slideshow gallery like you see in the demo link. However, after playing with this, a second requirement was made which was slightly trickier.
We wanted a workflow where posts could be made from Windows Live Writer, posts would have a bunch of images attached to them anywhere in the post. When displaying the post however, all the inline images in the post should be hidden from the post and shown in the sidebar. Basically, post writer wanted to just put up a post with a bunch of attached images that they didn’t want to show as part of the post itself but rather in the sidebar and additionally, post writer wanted to continue to use Windows Live Writer for the workflow and WYSIWYG feature for the rest of the post data.
After looking around for a bit to see if someone else had already done the work, I wasn’t able to find anything suitable. I thought for a bit and decided that whatever jQuery Colorbox was doing could be extended to satisfy this requirement – after all, it was already identifying all the images in a post and changing the CSS behavior. In the next series of posts, I will explain how I went about identifying all the images in a WordPress post and will explain and provide the code for hiding the images in the post and displaying them in the sidebar instead.