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!

For part two of “My Journey to Wordpress” I’m going to talk about setup and configuration. I mentioned that my host does a simplified installation of both wordpress and gallery. It made the first part of this really, really easy. I literally, log into my administration web-panel, then click install.

After about 5-10 minutes I had emails in my inbox letting me know that the software was up and running. Excellent! I logged into wordpress, and it was setup in no time flat, gallery was a little more cumbersome, but still quite simple to setup really.

With the gallery setup, a few of the plugins needed additional configuration so they didn’t work right out of the box. But that was no big deal. Now that gallery and wordpress were both independently working, it was time to hook them together and then pass off the site.

To install the WPG2 plugin, just download, unzip, ftp/ssh/sftp/whatever the files over to your wordpress plugins directory. After installing, enable the plugin then head over the to the WPG2 tab in the admin interface.

General configuration of the WPG2 was pretty straight forward. The URL rewrites section gave me a little bit of trouble, so make sure to enable and disable it in Gallery first. Then try it in WPG2. You’ll also need to download two additional Gallery plugins per the WPG2 docs. That process was very straightforward in the Gallery admin panel, click on plugins then the second tab , download, activate, enjoy.

Now the trouble begins…

I had this great setup all ready to go, Gallery 2 integrated with wordpress! It was perfect. I clicked on the WPG2 page and saw this horrible theme that didn’t fit into wordpress at all! Uh-oh

I figured that I must have missed something. Being the a developer type, and a guy, I didn’t bother to read the instructions, I just stared clicking and watching the error messages. So I figured, what the heck, let’s see what the docs have to say. A quick google for WPG2 takes me to the old plugin homepage, put luckily there was a link to the “new” homepage via wordpress.org. On the homepage I see a quickstart guide – perfect! Or not…

The quickstart said to to exactly what I did! I’ve got wordpress and gallery integrated, heck I can even use the snazzy gallery picker while writing my articles… but the page looks horrible!

I figure that it must be a theme thing or something, so now it is time to go and figure that one out. Back to google. I did a quick search for “wpg2 wordpress theme” and came up with a few interesting hits.

• The first a site with a bunch of modified wordpress themes that are “optimized” for gallery… I have no idea what that means, it wasn’t in the quickstart… I didn’t realize you needed to optimize for this integration… Bookmark it, comeback later.
• Next, that old help forum… it rules in the google search so be careful! Just a bunch of php nonsense. I don’t know php – and I don’t want to know it! That is what I loved about textpattern… wordpress is beginning to piss me off.
• Next, another site from the old forum… Didn’t they move all of this stuff?!!? Wait!! Something that might be useful!
  

Before you begin

• – if you need to modify the header.php file of the Wordpress theme to suite your needs, try to do this before proceeding
  - it’s recommended that you use a Gallery2 theme which is optimized for Wordpress integration, like the WordpressEmbedded Gallery2 Theme for Gallery 2.1 or the Wordpress Gallery2 Theme for Gallery 2.0.x.

Aha! There is some sort of wordpress embdeded Gallery 2 theme. That makes sense… Since I’m using a version of Gallery 2 that is above 2.1 that might just be the ticket. Download, install.

Okay, so now gallery has a new theme. It’s pretty boring, but what the heck, I haven’t seen it in wordpress yet. That site at the Gallery 2 old forum mentioned something about the header.php file… Whatever, lets see what we get

Not good… Okay, so it’s not totally plug and play. This is becoming painfully obvious. And what happened to the quick start, this isn’t feeling so quick now!

Stop! I’m working on my friends site… this isn’t going to work. The site looks like crap, I’m hacking a live version and this just isn’t good… Detour. Reset my development instance of ryanbarr.com. Install of the the files from my host, re-configure and walk through the steps I’ve taken so far… a while later… Resume, on my development instance of my personal site.

Now you see how I got roped into this whole mess… Since I’m already working on it to figure it all out…

Next step, lets try hooking into the “bookmarked” link I found earlier. I download a few of the “optimized” themes, activate and suddenly all is well in the world. The blog, and the gallery are working perfectly together – but why? I realize that I have no idea why this is suddenly working, the quick start guide wasn’t so quick and now I’m lost. Okay, time to read some more.

Back to the official homepage of the plugin. Under WPG2 Operations I finally find a few pieces of what I’m looking for. But it is sparse to and sort of fragmented. Again, no mention of this elusive Gallery 2 theme I found while googling, the only thing close was a page that was “under construction,” it linked back to the place I found my Galley 2 theme… So I guess if you look hard enough it is there, not not obvious.

Well, At this point I’m still a little lost, and don’t really have any desire to learn php (I do happen to know about 13 other programming/scripting languages, so i guess another one can’t hurt). What I really want it a customizable theme that doesn’t require me to re-do all of the work I just did in textpattern!

The support forums… Lets see, click, click, click, there we go… Found them! The support forums are located here. There are three options, if your looking for help with themes etc… go to WPG2 CSS/Layout Support. Don’t bother with the other areas, they will help if you have other integration issues

The forums are excellent! The guys that work the plugins seem to have answered all of the questions quickly and I was able to find what I needed… My theme vSlider3 this particular theme seemed to have it all. Customization, integration into gallery, options, configuration, no php required! Download, install!

Why didn’t I start at the support forums… Oh yeah, they are buried in the google results! That will work itself out with time…

Now I’ve installed vSlider3 and have a working site! Excellent!

Okay… now that this is all working, lets see about getting all of our content back into wordpress like it was in textpattern. Off to the admin panel, manage -> import -> textpattern -> oh crap.

In my next installment… Read about the joys of importing data from textpattern, and what I did about sections… What do you mean wordpress doesn’t have sections?!?!?!

Wow…

I never thought I would do this, but I’ve dumped textpattern. It actually came about rather quickly and I’m quite happy after doing it. Just a few weeks ago, Megan and I began the process of re-vamping the website. She really wanted to start blogging some more, and well, I needed to stop slacking off and start really blogging again. We talked about the options and figured that a re-design of ryanbarr.com was the way to go. It’s been quite a journey. One that I’ll probably split over a few posts so that this one isn’t obscenely long!

Anyhow, here is the story… I started off by completely re-doing the site in textpattern. I nabbed a pretty nice theme from textplates.com, and then dove in. After working out with Megan how we should manage the whole site, we decided to move a ton of content around (which of course wreaked havoc on my google placements) and totally reset the way a bunch of things were handled. I installed a ton of new textpattern plug-ins to try and make the administration a little more user friendly and even wrote a few myself to handle some stock quote functionality I was looking for. After spending a few weekends working on it, we finally had it ready to go.

Then a good friend of mine asked me to help her setup a new website – michellerenephotography.com.

My response: No problem! I’d be happy to help you out. Lets get a domain setup, I’ve got a great host that you can work with etc…

Then the kicker… “We’ll you know, it’s a photography site. I’d really like to have some serious image management. Really, I’d like it to be a gallery first, then a blog second.”

Serious image management?

I wasn’t quite sure how to approach it. I’ve been using textpattern for quite some time, and have built quite a few client sites using it. Textpattern is a great CMS, but serious image management is not it’s strong point. So, like any good open source kinda guy I went in search of an existing project. I happened to stumble upon a project called Gallery 2, and a wordpress plug-in called WPG2. Interesting… a full image management studio with pre-existing integration into wordpress. This could be worth a try.

The only hangup that I had was, well… I’d never used wordpress, and the last time I looked at it customization and theme’s were all handled through php hacks. Not nearly as elegant a design as textpattern.

I was a little more than skeptical, but I figured what the heck.  It’s her site and  if I can get her started I’m sure she can finish it off.  So, after a bit more research, I was ready to install. Given that michellrenephotography.com is a brand new site, I put the tools up and started hacking away.

My host does a cool quick install of both wordpress and gallery2 so we were off to the races quickly.  I got the two systems up and running, did a bit of quick configuration and then went about getting the plug-in working.  That is when I realized that there was no way on earth she was going to get this all figured out without some serious help.  Permissions, themes, configuration, ssh, linux and a ton of other things that are way to geeky for her to understand.  Well, I figured I’d better dig in…

As I worked on getting things working, I found that wordpress had evolved quite a bit since the last time I took a look.  Quite frankly, I was  downright impressed with it!  I’ll walk through my challenges and learning through this hole process over the next few posts…

Stay tuned to hear about the configuration and setup of the WPG2 plug-in.  The core of the blog/gallery setup that runs ryanbarr.com