Holy crap, this is getting long! I figured when I started writing about my journey it would maybe be 3 articles, max. I’m easily going to hit five now.

Well, onto the journey…

Customizing vSlider3

I’ll be totally honest here - I decided to make the switch after installing the vSlider3 theme. This thing has to be the coolest, most customizable theme I have ever seen. I was flat out blown away!

When you install this theme, there is an entire Options pane that allows you to change all of the colors, icons, headers, footers, sidebars and just about everything else! Not only that, you can setup “color schemes” for the site so that with a click of a button you can go from theme A to theme B.

It is very, very cool. However… not everything is completely customizable. So I hacked away a bit

The key things that you’ll likely want to change with the vSlider theme are the fonts. I wasn’t thrilled with the default package of fonts, so I went in search of the typography settings. Unfortunately they are buried in a bunch of different style sheets. The good news is that they are commented quite nicely. You’ll find the fonts in the default stylesheet.css file, along with all of the .css files in the styles folder in the theme. Most of the stuff you’ll be looking for will be in the style_post.css and style_header.css

Header

The vSlider3 theme has a ton of header customizations available. You can toggle the header border, enable the “rotating” header images and a bunch of other stuff. However, by default the navigation links at the top are not in the rounded border. I didn’t like the way this looked so I had to make a few tweaks.

In order to get the nav links in the right spot, you need to open up the header.php file as well as it’s supporting .css files. I’d be happy to send my copies out of you need a sample to support your needs, they are fairly specific to this site so I didn’t upload them. Click here to download the Header Files for ryanbarr.com.

These are very specific for my site, so please look through them and clean them up as you see fit.

If you want to include the rss link (as I did here on my site) make sure to copy the code out of the sidebar.php file to take advantage of the customizable icons. It is pretty nice when tweaking the theme.

Lightbox

Enabling lightboxing was a little trickier. The vSlider theme supports the lightbox script out of the box, WPG2 supports lightbox out of the box. However, vSlider and WPG2 don’t use the same lightbox configurations. If you download and install the lightbox plugin as recommended by the vSlider webpage, you’ll have a mess on your hands.

I’m sure this isn’t the best way to fix it - but this is what I did! Enable lightboxing in the WPG2 plugin -> lightbox configuration page. Turn it on for everything! Then, open up the file in theme.inc in your gallery vSlider3 theme. Do a search for $theme['lightbox_plugin_active']. Delete whatever is on that line and replace it with $theme['lightbox_plugin_active'] = true;

Handling multiple picture sizes in the lightbox…

Now, if you are uploading big monster files, you’ll probably notice right away that the vSlider theme is picking up your huge version for the lightbox. Here at ryanbarr.com I have gallery configured to create 3 versions of each file, a 640×480, 800×600 and 1024×768 version, I’d like to show the 800×600 version in the lightbox.

To accomplish this, you need to change two things.

In the theme.inc file you’ll need to add the following to the end of the loadWordpressOptions function, right after $theme['columnWidthPct'] = floor(100 / $params['columns']):

 /* Add resizedId to child values, required for Lightbox JS */
    if ( $theme['children'] ){
	foreach ( $theme['children'] as $key => $value ){
	if ( $value['id'] ){
	    list($ret,$resizedIds) =
    GalleryCoreApi::fetchResizesByItemIds(array($value['id']));
	    if ($ret)
	    return $ret;
	}
	$theme['children'][$key]['resizedId'] = $value['id'];
	if ( $resizedIds ){
	    /* Find the best resized option
	     *
	     * Use width/height max=800; */
	    $lboxMaxEdge = 800;
	    $resizedEdge = NULL;
	    $resizedId = NULL;
	    foreach ( $resizedIds[$value['id']] as $resize ){
	    $width = $resize->getWidth();
	    $height = $resize->getHeight();
	    $edge = ( $width > $height )? $width : $height;
	    if ( $edge <= $lboxMaxEdge ){
		if ( !isset($resizedEdge) ){
		$resizedId = $resize->getId();
		$resizedEdge = $edge;
		} else if ( $edge > $resizedEdge ){
		$resizedId = $resize->getId();
		$resizedEdge = $edge;
		}
	    }
	    }
	    $theme['children'][$key]['resizedId'] = $resizedId;
	}
	}
    }
/* end add resizedId to child values, required for Lightbox JS */

Then, make a copy of the album.tpl file (located in gallery/themes/vSlider3/templates) and put in in gallery/themes/vSlider3/templates/local.

In that file, change href=”{g->url arg1=”view=core.DownloadItem” arg2=”itemId=`$child.id`”}” on line 46 to href=”{g->url arg1=”view=core.DownloadItem” arg2=”itemId=`$child.resizedId`”}”

That should fix your the lightbox issues. If you’d like a size other than 800×600 as your lightboxed image, just change this $lboxMaxEdge = 800; to the right size in theme.inc.

Be careful when upgrading the vSlider3 theme! The theme.inc file has been changed, and your “local” copy of album.tpl will override the new copy that you download.

Another note…. somehow, my theme.inc had extra lines at the end of it. If yours does - delete them. They will only cause problems

More lightbox stuff

If you want to put a ton of pictures in a single post, but not show them all… You’ll need to do just a bit more work.

Add this to your stylesheet.css file:

.hidden_lightbox_image {
     display: none;
}

Then add hidden_lightbox_image as a custom class on the WPG2 -> G2Image options page.

Then… when you want to put all of those photos into a post do the following

• For the item that you want to show on the page. Click the G2Image button in your editor, pick the photo, chose your style (Normal, Left, Right etc…) and insert it.
• Then, for all of the rest of the photos… Somewhere in the post (at the end is probably best) select all of those photos from the G2Image chooser and set the style to hidden_lightbox_image.

I pulled this from the old Gallery Forums at this link.

Sidebar

I didn’t like the way that the theme setup the default sidebar. You can choose to either “disable” the default sidebar through the theme options, or go in and hack the php. I chose the php route as I liked a few of the things the vSlider3 theme did out of the box.

This one is really straight forward, so I’m not going to go into depth here. It was a case of delete this, keep that, move the other thing. Nothing big here, but plenty of tweaking happened. Again - upgrades beware!

Plug-ins…

Well, now that that theme is tweaked and I like what I see it’s time to deal with my stockquote stuff. In my next article on My Journey to Wordpress I’ll talk about plug-ins. Developing a plugin, tweaking an existing one to make it a widget and a few of the fun tools I’m using on ryanbarr.com

Stay tuned!

Categories: Web Development