Fancy Picture Hacking Box

December 22nd, 2011

A while back, when I was just starting out this WordPress site, I posted about some of the adventures in setting this up.  Specifically, I wanted a widget that would show some random images from the media database.  My thinking was that I want people to be able to see some of the pictures that I’ve included in my posts without making the pictures the center of the blog.  This way, on every page there are four (but that’s a setting you can change) random pictures from across all my posts.  Pretty, but it needs to be able to link to the corresponding post to actually be useful.

I initially worked around this problem by having two separate lightbox plugins.  One looked better, but I couldn’t figure out how to make the image caption a link and the other didn’t look as good, but I was able to hack the plugin to make the caption into a link.  It was a hack solution.  Not only that, but something changed in one of the parts of this delicately balanced puzzle.  Either WordPress itself or one of the two lightbox plugins updated and I ended up getting both plugins running on some pictures.

Today, I am pleased to announce that I have fixed it.  Mostly.  I removed the lightbox plugin that didn’t look as good.  The one I kept “Fancybox for WordPress” has a lot of settings and features that you can mess with.  One of the more interesting ones helps the plugin know which pictures to work with and how to group them into galleries.  It comes with three built in settings:  1) One gallery of all the images on the page, which doesn’t work for me because images in the posts and in the sidebar shouldn’t be related. 2) Do nothing automatically, which would make me have to set up each image link by hand… way too much work.  3) Make a gallery for each post, which would exclude the sidebar.  (I could relate to my image plugin as a post, but that would be semantically wrong and would probably cause lots of other problems)

The plugin also has the option of creating your own custom code.  Which I did.  It first goes through and makes a gallery from each post.  Then it goes through and makes a gallery from my image plugin.  This means that I can control how the lightbox processes each of the galleries separately.  I dug into the JavaScript code and found that the plugin takes the ‘title’ attribute from the <img> and copies it to it’s parent <a> so it can be accessed when the <a> link is clicked.  I included the PHP generated internal WordPress link as the title of the <a>, and then edited the code to combine the link and the title into a <a> tag within the ‘title.’  When the title is displayed as the image caption, it is already formatted as a link, and you can click to go to the post the image came from.

Well, that’s a hack and a half.  The function I added to combine the two ‘title’ attributes will probably get overwritten the next time “Fancybox for WordPress” is updated.  But then I realized that the custom code section was really nothing more than regurgitating my code instead of one of the built in functions, so in the custom code box in the settings I included not just my line of JavaScript to set up the galleries, but also my new function to combine the titles.

Maya in a Lightbox linked at a post

Maya in a Lightbox linked at a post

I still think it’s not the best solution.  The best solution would be to create a lightbox plugin with a picture widget built in.  Until then, I have to put a whole function into the custom code box, and have my picture plugin set up just so.  But it works much better now than it did before.

I’m happy.

Tagged , ,

What's this?

You are currently reading Fancy Picture Hacking Box at The Story of Abe.