Integrating Gallery2 Into WordPress

Introduction

I have always been a big fan of Gallery1 because of its ease of use and how it automatically creates thumbnails and links them to the original pictures versus me having to use Photoshop to resize the thumbnails and link each picture manually.

Integrating Gallery1 wasn’t impossible, but was difficult and this was only from a design perspective. It took me a bit more than a month to fully figure out how the layout works and how to “hack” it to make it look similar to my website. With the release of Gallery2, there was a major emphasis on separation of content and design and database. This is extremely impressive because it makes integration much easier and more robust.

Then came along WordPress for me and I was sold. Especially when I found out that a project existed that integrated WordPress and Gallery2, WPG2. The coolest part is that I can pull pictures directly in from Gallery2 through my WordPress post or page creations with ease and apply styling such as floating it left, right, no float, etc.!

Most of everything I learned on how to integrate Gallery2 to WordPress is from a post by Aylwin on the Galleryembedded.com forums.

Requirements

  • WordPress fully installed and functioning.
  • Gallery2 fully installed, functioning, and using the same database as the WordPress install.
  • Download the WPG2 plugin.

Any Warnings?

Depending on what kind of theme you are using, it may or may not make integrating Gallery2 to your WordPress easy. In most cases, I code all my WordPress themes from scratch so integrating Gallery2 into my themes easier.

Directions

Making The Gallery Header

  1. Make a new file called wpg2header.php in your themes folder (e.g. wp-content/themes/my-theme/) and copy the exact and entire contents of your header.php file into wpg2header.php.
  2. Look for a line in wpg2header.php:
    <head profile="http://gmpg.org/xfn/11">
  3. Underneath that line, add:
    <?php if (isset($g2data['headHtml'])) { list($g2_title, $g2_css, $g2_javascript) = GalleryEmbed::parseHead($g2data['headHtml']);  foreach ($g2_css as $css) { echo "$css rn"; }  foreach ($g2_javascript as $javascript) { echo "$javascript rn"; } } ?>
  4. Next look for a line:
    <title><?php wp_title(); ?></title>
  5. In the middle where you see:
    <?php wp_title(); ?>
  6. Replace that with:
    ยป <?php echo $g2_title; ?>
  7. At the very end, you may or may not see:
    <div id="content">
  8. If you do, replace that with:
    <div id="wpg2content">
  9. If you do not see it, don’t worry, it’s most likely in the index.php file.

Editing The StyleSheet

  1. This is a matter of preference, but I usually like creating a new stylesheet (e.g. Gallery.css) versus adding all the new Gallery IDs and Classes to the existing theme’s stylesheet. I do it mainly to keep my stylesheet leaner and cleaner. Either way is fine.
  2. We need to add #wpg2content to the stylesheet and style it. Please note this code is a direct copy and paste from http://www.galleryembedded.com/forums/viewtopic.php?p=11572 post. The width: 510px is probably one the most important parts of that css code. That determines how wide your main Gallery page will be. Usually if you use the same width as your #content, it’ll look fine.
    #wpg2content {margin: 0; padding: 5px; float: left; width: 510px; overflow: hidden; display: inline; }
  3. The next step is to add the WPG2 alignment classes so that when you use the pretty editor (TinyMCE) G2 button and select image alignments, it will be styled correctly. I usually use the “default” css code, once again taken from the http://www.galleryembedded.com/ site and slightly modify it depending on my needs. Place this either inside your WordPress stylesheet or in the other stylesheet if you created a separate stylesheet for Gallery.
    /* WPG2 alignment classes */
    .g2image_normal {margin: 4px; }
    .g2image_float_left {float: left; clear: left; margin: 4px; }
    .g2image_float_right {float: right; clear: right; margin: 4px; }
    .g2image_centered {display: block; margin-left: auto; margin-right: auto; }

Bringing It All Together

  1. After you have made all those changes and uploaded them to your web server in their appropriate places, you need to revalidate the plugin by going into your Site Admin > WPG2 and Under the heading: WPG2 Plugin, reenter the URL to Gallery2. This will ensure that Gallery2 reloads using the wpg2header.php and the new stylesheet or additions to the existing theme’s stylesheet.
  2. Your Gallery2 page accessed via http://your-website.com/wp-gallery2.php should look very identical to the rest of your theme now. There might be some little tweaks here and there that you need to do in your index.php or footer.php for it fully appear 100% correctly, but for all intents and purposes it should really, really close to your theme.

5 thoughts on “Integrating Gallery2 Into WordPress”

  1. The best trick I know of for fixing little problems such as your footer is loading incorrectly or design is shifted is to validate the Gallery page. It will usually give you indication of the offending code which you can fix and it should make the page load correctly.

  2. Also if you notice that the font size in Gallery appears a bit small, open the Gallery’s theme’s stylesheet (usually located in /gallery2/themes/theme-your-using/theme.css) and do a search for #gallery {
    color: #333;
    background-color: #fff;
    font-size: 100%;
    } and change the font-size there!

  3. Hi Richard

    THanks for the great tutorial

    But I have a problem I think. If you click on this link, you will see my homepage http://www.thebreadcrumbtrail.org, and the way it is styled.

    I made the changes and created the css and php files on my server. But the problem is, my header file does not match the one you mention above since it is from a theme created by someone else. Therefore, I just copied the classic theme over since I didn’t know where to put the code in my theme.

    Anyway, as you can see from http://www.thebreadcrumbtrail.org/gallery2/main.php, it doesn’t seem to have made a difference

    Any ideas where i can go from here?

    Thanks

    James

Leave a Reply

Your email address will not be published. Required fields are marked *