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

Random Sidebar Image linked to Blog Entry

Concept

We wanted to add a random picture to our sidebar, but we took it a step further because we like to add 'depth'. A static picture is lifeless, so we linked the picture to the journal entry where the photo could be found.

As far as changes to b2evolution go, it turned out to be a fairly easy. There are, no doubt, other ways of accomplishing the same task, but we chose the method outlined below. The nice part about this modification is that it only affects one file in your custom skins folder (_main.php), which means that there's no fear of overwriting the modification next time you upgrade the software.

This modification was implemented and is currently (Feb05) used on this site, with version 0.9.0.11. (The "At Random" section of the sidebar, on the right.)

Method

What the code below does is create a temporary b2evo table, which we fill with blog entries that contain any <img> tags. We then count the total number of entries that contain images and randomly choose one. Then we count how many images are contained within the randomly chosen entry and randomly choose one of those. Then a link to the randomly chosen blog entry is made and the image is displayed. Formatting of the image (width, border, margin and so on) and <div> containing the image is done externally, via the CSS file.

Code

Implementation

To use this random image code, all you have to do is cut-n-paste it into your _main.php file, wherever you want the random image to show up, change the blog number to your own, add style="yyy" (immediately before src="[whatever]") in any image files you want to include.

Note: Items in blue, you must do. and Items in mint, are up to you.

Change the blog number to one (or more) of your blogs that you want to be considered for pulling random images. Near the bottom of the code, feel free to alter the class, title and alt text, in the <a href> tag, to your liking.

The yyy text is touchy and let me explain what it does. When I finished the intial trial, I tested it out and quickly realized that not ALL images were worthy of including in a random selection. Hmmm. How do I indicate a choice?

Unfortunately, the way the code works, images are chosen by inclusion, so I couldn't say, "Exclude these." Instead, I have to say, "Include all <img> tags with (and I chose) a bogus class name of 'yyy'." The reason I settled on "yyy" because I had chosen "yes" at first, but then realized that there are words that end in "y-e-s" that MIGHT cause a problem. Because I'd already done all the string placement using a 3-letter word, I just kept it at 3 letters and chose the most odd letter combination: "yyy".

IMPORTANT: Only pictures with an <img> tag of the following contstruction will be chosen as random pictures.

In the current configuration, the class attribute must immediately preceed the src attribute AND end with a bogus class name of "yyy". You may change "yyy" to be whatever you like, but keep in mind that if what you choose is longer (or shorter) than 3 characters, the +10 number in the substr function will need to be increased or decreased accordingly.

I have made a quick-tag toolbar button in the back office that generates my <img> tag code (and includes a style="yyy" by default). Easy.

Credits

The original b2evo forum post for this concept can be found HERE. I have a fellow b2evo user, by the name of ¥åßßå, to thank for getting me pointed in the right direction and helping me over a few rough spots. (If it weren't for him, I'd never have managed!) Thanks ¥åßßå! He's from Blackpool, England and his website can be found HERE.

If you use the code, I'd appreciate some feedback. If you have problems getting it going or have questions, feel free to drop me a line.