GalleryEmbedded Please Read Before Posting

Please note that I did not write this. This is reprinted from GalleryEmbedded written by Aylwin. The only thing that has been changed is formating, all else is exactly as the author written. This is here for my personal reference.

This is reprinted from the GalleryEmbedded “Please Read Before Posting” advice that I found very, very helpful in implementing Gallery2 into my custom design.

Theme optimization guide (UPDATED: 2006-07-03)

This guide aims to standardize how we integrate the WordPress and Gallery themes. It’s applicable to all existing and new WPG2 installations. If you have any theme layout or XHTML validation issues, I recommend that you first follow the instructions described in this thread before posting your problem.

IMPORTANT: It’s highly recommended that you follow this guide if you’re using WPG2 2.0.

The following instructions are mostly taken from this article.

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.

Create wpg2header.php

  • make a copy of your WordPress theme’s header.php file and name it wpg2header.php
  • open wpg2header.php and look for:
    <head profile="http://gmpg.org/xfn/11">
  • below this 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"; } } ?>
  • look for a line like:
    <title><?php bloginfo('name'); ?><php wp_title(); ?>
  • in the line, replace
    <php wp_title(); ?>
  • with
    <php echo $g2_title; ?>
  • at the end of the file look for something like:
    <div id="content">
  • If the code doesn’t exist, no problem. It’s probably in the index.php file.
  • replace it with or add:
    <div id="wpg2content">

Update the style.css file

  • open style.css and look for something like:
    #content {
    width:510px;
    float:left;
    padding:5px;
    margin:0;
    overflow:hidden;
    display:inline;
    }
  • create a copy of this block called #wpg2content:
    #content {
    width:510px;
    float:left;
    padding:5px;
    margin:0;
    overflow:hidden;
    display:inline;
    }
    #wpg2content {
    width:510px;
    float:left;
    padding:5px;
    margin:0;
    overflow:hidden;
    display:inline;
    }
  • in most cases, the width of #content is the width of your theme minus the sidebar. Usually, we don’t include the WP sidebar in the embedded gallery to have more space for the photos. So, we can make #wpg2content as wide as the theme:
    #wpg2content {
    width:740px;
    float:left;
    padding:0px;
    margin:0;
    overflow:hidden;
    display:inline;
    }

Note: The above code for #content and #wpgcontent are just examples. The actual code will depend on your particular theme. Also, other parameters (like padding or margin) may need to be tweaked.

Add the WPG2 alignment classes

  • at the end of style.css, add:
    /* 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;
    }

Revalidate

  • go to WordPress Site Admin and click on the WPG2 menu

* * * THAT’S IT! STOP HERE! * * *

IF you are using WPG2 version 1.0 (with WordPress 1.5.x & Gallery 2.0.x), then continue:

Only for WPG2 version 1.0:

Modify wp-gallery2.php

  • open wp-gallery2.php and look for (around line 73):
    echo $g2data['headHtml'];    //Include the gallery header
  • replace this line with:
    if ( $g2_option['g2_externalheader']=="No" ) {
    echo $g2data['headHtml'];    //Include the gallery header
    }

Activate the custom header

  • In WordPress’ Site Admin, go to Options -> Gallery2 -> Style Options
  • Set ‘Use WP Custom Header’ to ‘Yes’ and click ‘Update Options’

Leave a Reply

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