Kimler Adventure Pages (http://randsco.com)

Getting the Photo/Caption Zoom Working in your Blogs

Zoom Example: Clicking on the image zooms it and brings up a caption. Only one image file is used, it's XHTML-valid, a pure-CSS construct and easy to use.

When I posted the CSS Photo-Caption Zoom entry, it was meant for a larger web audience than just b2evolution users. However, since I posted an entry about it on the b2evolution forums, I've been getting some questions about how (exactly) to get it going in a b2evoution blog.

The nail was hit squarely on the head, when Bomani left a comment saying:

I've searched your site and I'm trying to find explicit instructions on "how" and "where" to enter the code to use the Photo-Zoom feature in b2volution.

I see the code (html, css), but I have no idea on where they should be inserted.

Please help!

If beaten about the head soundly enough emails, comments and the like, even I can take a hint!

To get the photo/caption zoom working on your b2evo blog, read on!

- -

Three Steps to Zooming

ONE: Insert the CSS

The first step is very easy. Just copy the CSS and insert it into the CSS file that you are using for your custom skin (or skins, if you allow skin switching). It doesn't matter where you place the code into you CSS file and inserting the CSS will not change your existing formatting at all (unless you're already using a class name of "Zoom", which is highly unlikely).

TWO: Add a Toolbar Button

Rather than type in the XHTML that's required each time you want to add a caption/zoom image to your blog, it's much easier to add a "Zoom" toolbar button that does the typing for you. To do this, all you need to do is edit the "_quicktag.toolbar.php" file in the /plugins/toolbars folder. Just insert the following code into the file, wherever you would like the toolbar to show up. I recommend a position next to the existing image button, like the following example. (Note: The light gray text just shows you WHERE you are in the file. Don't add that, just the middle section.)

You will want to change the highlighted section to the fully-qualified path to your blog image files. (If you use multiple directories, this will likely be the directory branch just above the this. Keep in mind, this is only to help keep you from typing all this stuff ... you can edit this to be whatever you like when you make your blog entry.)

You may wish to change the above code to your liking, by selecting a default image width that's different from 400px (w400), or a thumbnail width other than 100px (t100). Feel free to do this, but I'd recommend getting the thing working properly FIRST, then making personal changes LATER.

THREE: Usage & Considerations

Edit Window: After clicking the 'Zoom' button, your entry will look like this. Note that spacing doesn't affect image position.

With the CSS added and a nifty new toolbar button, you're ready to give the image/caption zoom a spin around the block. Go make (or edit) a blog entry like you would normally. To insert a zoomed image, all you need to do is place the cursor where (in the blog edit window) you want the image to show up in the final blog.

With your cursor positioned in the edit window, just click the new "Zoom" button (or press "ALT-Z" on the keyboard). Code will be added and your edit pane will look similar to this image.

• Using the "Zoom"
• To float the image left - delete the "Zright" class name.
• To float the image right - delete the "Zleft" class name.
• Input the image width - 100px to 600px, every 50px (where "w300" means "width=300px").
• Determine the thumbnail width - 100px to 600px, every 50px (where "t150" means "thumbnail-width=150px").
• Input the specific image directory, filename & extension (whatever isn't already filled out by the quicktag toolbar "Zoom" button).
• Add an ALT and/or TITLE attribute, as you see fit. (Note: ALT="" will pass validation, but for accessibility considerations, it is suggested you add some descriptive text, in case the image cannot be displayed, for whatever reason.)
• Add a comment title, between the "<strong>" and ": </strong>", then the caption description immediately after the "" closing tag. The default caption format looks like: "Caption Title: Whatever caption description you want to type."
• Considerations
• It's important to know that b2evo expects an absolute image path name (i.e.- "http://yoursite.com/image.jpg"). You will experience difficulty with the html-checker if you try and use relative path names (i.e. - "../../image.jpg").
• If your image is, say, 238px wide, you might get by using "w250". (The 12px "stretch" may not be visually displeasing and this saves you the effort of having to resize the image). Discrete image widths is one of the trade-offs with a pure-CSS solution, but I haven't found it too onerous. I edit most of my posted images anyway (cropping and reducing file size) so resizing to the nearest 50px is no big deal. You may define a finer increment (every 25px, say) in the CSS file, if this suits your needs.
• The smallest image width is pre-set to 100px and the largest to 600px. If you commonly work with images larger or smaller than this, you can modify the CSS file to allow for those sizes.
• Like the blog skins, you can customize the style of the image/caption zoom by modifying style properties in the CSS file. Change the border color, background color, border width, etc. It should be pretty obvious which properties control which elements and you are encouraged to customize the CSS to fit with your site.

That's it for the basic installation and operation of the image/caption zoom. I hope that you like it, that were able to understand the instructions and get it working in a quick and painless fashion. Your feedback is valuable for any fixes, changes and/or enhancements. Monetary donations are always accepted.

Addendum

This section contains answers to the questions brought up by people who were installing the photo/caption zoom on their system. It will also contain information regarding updates and/or changes to the code. The content here is driven by people like you, which is why feedback is so important.

(29-Apr-05) JPG -vs- jpg: One user had difficulty getting the code to work, because their images were saved with a "JPG" file extension (all caps). UNIX is case sensitive, so "image.JPG" is NOT the same as "image.jpg". The fix is easy: rename the file so it has a lowercase 'jpg' extension.

(29-Apr-05) Image Link: In order to do its zoom 'magic' in MSIE, the XHTML code needs to be placed inside of a link. By default, the image is linked to itself (which is why the image file must be written TWICE - first as the link, second as the link object). There is no reason why you must use the image as the link. You could have the image link to any website of your choosing, OR, if you want, it could be linked to a dead-end (i.e. go nowhere) using href="javascript:" or href="javascript:void(0)".

NOTE: IF you want to use the javascript 'dead-end' option, you will need to add 'javascript', to the $allowed_uri_scheme array in the /conf/_formatting.php file (around line 320), so that it will pass the HTML-checker without throwing a "Invalid URL" error upon save.