This site uses the excellent WordPress Gallery2 plugin (WPG2 for short) to handle the integration between blog and photo gallery. Mostly it does a great job, but there have been one or two niggles I’ve run into trying to get everythng to run ‘perfectly’
One fairly major hurdle I found was the wp-gallery2.php file dumps all of Gallery2′s header information into the body of the document, rather than the head. This is a problem because it could mean that style information isn’t picked up by the browser, as well as being non-compliant with xhtml 1.0.
Because this site uses a custom wpg2header.php the instructions below assume the same configuration. It should be easy enough to retro-fit these instructions into a fix for the standard behaviour of wp-gallery2.php.
First, open wp-gallery2.php in your favourite editor, then find and comment out the line that says:
echo $g2data['headHtml']; //Include the gallery header
Next, open your custom wpg2header.php file and add the following code to just inside the head tag
if (isset($g2data['headHtml'])) {
list($g2_title, $g2_css, $g2_javascript) = GalleryEmbed::parseHead($g2data['headHtml']);
}
This gives you three variables to play around with in your wpg2header.php file. The first, $g2_title, is a string which contains the value for the title of the Gallery page. You can combine this with any wordpress title magic you have working. For example, my title is:
<title>< ?php bloginfo('name'); ?> » < ?php echo $g2_title; ?></title>
The other two variables, $g2_css and $g2_javascript return arrays containing entire <link rel=”stylesheet”> … </link> or <script> … </script> lines. Because they’re arrays, you need to loop through the variable somehow – a simple foreach works well
foreach ($g2_javascript as $javascript) {
echo "$javascript \\r\\n";
}
foreach ($g2_css as $css) {
echo "$css \\r\\n";
}
Finally, here’s the <head> section of my wpg2header.php
<head profile="http://gmpg.org/xfn/11">
<?php
if (isset($g2data['headHtml'])) {
list($g2_title, $g2_css, $g2_javascript) = GalleryEmbed::parseHead($g2data['headHtml']);
}
?>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> » <?php echo $g2_title; ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<?php
foreach ($g2_css as $css) {
echo "$css \\r\\n";
} ?>
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
<?php
foreach ($g2_javascript as $javascript) {
echo "$javascript \\r\\n";
} ?>
</head>
Congratulations! If you’ve made it this far then you’ve knocked down one obstacle to making your WordPress and Gallery2 site standards complaint.
Coming up soon – a simple edit to the wordpress gallery2 theme to fix an XHTML nesting bug.
My wpg2header.php head looks like the below prior to changes. I notice it has a bunch of CSS and yours does not. Before I delete this and replace with yours I wanted to understand why I am deleting out all the CSS.
; charset=” />
” />
/* The Basics */
* {
margin: 0;
padding: 0;
}
a {
color: #A73A02;
text-decoration: none;
}
a:hover {
color: #D88207;
text-decoration: none;
border-bottom: 1px dotted #D88207;
}
a img {
border: none;
}
p {
padding: 5px 0 5px 0;
}
/* Heading */
h1 { font: normal 28px Georgia, “Times New Roman”, Times, serif; margin-left: 300px; padding-top: 15px; }
h1 a { color: #fff; text-decoration: none; border: none; }
h1 a:hover { color: #fff; text-decoration: none; border: none; }
/* Layout */
body {
margin: 10px 0;
font-size: 62.5%; /* Resets 1em to 10px */
font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
background-color: #dda;
color: #444;
}
.description {
font-family: Georgia, “Times New Roman”, Times, serif;
color: #fff;
margin-left: 300px;
}
#footer p {
color: #666;
}
#container {
width: 750px;
margin: 0 auto;
background-color: #fff;
padding: 20px 20px 0 20px;
border-right: 2px solid #C2C295;
border-left: 2px solid #C2C295;
border-top: 1px solid #c2c295;
border-bottom: 2px solid #c2c295;
}
#wpg2content {
width: 750px;
float: left;
}
#footer {
clear: both;
border-top: 1px solid #ddd;
padding-bottom: 8px;
text-align: center;
}
#header {
height: 300px;
margin-bottom: 35px;
background: url(“/images/masthead.jpg”);
text-align: center;
}
” />
” />
” />
” />
Hmmm – your html seems to have been filtered out by wordpress (badly). If you email me (phil AT drphilth DOT com) with the contents of the file I’ll try to fix up your comment.