As I mentioned the other day, it was a time consuming effort to get the photos showing up on my blog in the format I wanted and that the Light Box plug-in required. Since it is a great plug-in and a I did want to continue to make photos available on my site without experiencing as much pain, I set out to modify the Hemingway Flickr plug-in.
The Hemingway Flickr plug-in creates a “Photos” pane below the main WYSIWYG post-editing pane. From that WYSIWYG Photos frame you can drag and drop a photo or you can click on the photo in the WYSIWYG Photos pane and it gives you the option to insert any available size of the picture. The result is that whatever size you select shows up in both your post and the slide show. Unfortunately, that’s not what I wanted. I really wanted Light Box to show the square “thumbnail” in my post and the medium-sized picture in the Light Box slide show.
To recap, my goal was to have the plug-in:
- Make the 75×75 pixel Flickr thumbnail show up in my post when I click on it in the WYSIWYG Photos pane
- Create the code for the link to point to the medium-sized picture which represents the following two changes because previously the:
- Link pointed to the page at Flickr instead of the picture itself.
- Picture that appeared in the post was the same size as the one pulled from Flickr.
- If all you want to do is make it so the “squashed” (75×75 pixel) version of the large picture shows up in the post with a link to the larger version for Light Box, modify the file inline-photos.html by making the following changes to the silas_addPhoto function. To use the new functionality, click the photo as if you were adding the large version. The large version will show up in Light Box, and the squashed version will show up in your post.
- Replace +photoUrl+ with +sourceUrl+
- Replace width=”‘+width+’” with width=”75″
- Replace height=”‘+height+’” with width=”75″
- If you don’t care about the other sizes and want it to always put the 75×75 pixel thumbnail in your post and show the medium-sized photo in the Light Box slide show, replace your inline-photos.html with this inline-photos.txt which I’ve modified. Change the file extension from .txt to .html and upload it to your site. When editing a post, simply click on the photo in the WYSIWYG Photos pane that you want to add to your post, and voila.
- Solution #2 above met my original goals, but I wondered if it would be possible to get what I wanted when dragging and dropping from the WYSIWYG Photos pane. Then clicking on the photos in the WYSIWYG Photos pane could still provide the original functionality. Everything worked except that an onclick tag in the image is required for the images in the “Photos” frame if you want to be able to select different sizes. That onclick carries over to the dragged-and-dropped photo and causes a Light Box failure. The end result is that the picture itself loads in the browser instead of in the Light Box slide show. Since I’m not a Java Script or PHP guru, I’m admitting defeat there and settling with solution #2.
One other funny behavior that I’ve noticed is that unless you want to shuffle the pictures after they’re already in your post, you should click them in reverse order. For some reason, after inserting a picture, the cursor moves to a position just in front of the newly-inserted picture.
The images in this post came to me via e-mail, and I only included those that didn’t appear to have a copyright. The others pointed me to ExtremePumpkin.com, so if you enjoyed these pictures, head over there to see some more fun and impressive work.