Embedding MG2 in WordPress

The purpose of this document is to describe the process that I used to insert my MG2 (v0.5.1) photo gallery using the default rounded skin into my WordPress (2.0.1) based web site. You can see the final result @ http://okuda.ca/gallery/.

I started with the tutorial at the MG2 support site. Unfortunately, there have been some significant changes to how WordPress themes work between 1.5 and 2.0 so that was only used as a guideline. In some cases my process was slightly easier and there were some new steps to follow.

My site is organized with the WordPress blog in /blog and the photo gallery in /gallery. What I wanted to do was keep the photo gallery as stand-alone pages, but with the look and feel of the WordPress blog. This is instead of trying to truly insert the gallery into the WordPress blog through a plugin or in a page or with an iframe. This is how the original tutorial works.

The basic process is to put the WordPress header at the top of the page and the footer at the bottom with the least amount of changes to either WordPress or MG2.

Step 1

Create two new files in the MG2 gallery “/gallery” called wpheader.php and wpfooter.php. Here are their contents.

wpheader.php

<?php
  define('MG2_GALLERY', true);
  require('./../blog/wp-blog-header.php');
  get_header();
?>
<div id="content">

The file above will be used to include the WordPress header into the gallery. The define('MG2_GALLERY', true); line is to allow us to identify that the header is being used by the MG2 gallery. You will see why this is important later.

wpfooter.php

</div>
<?php get_footer(); ?>

The file above is used to include the WordPress footer at the bottom of the gallery.

Step 2

Include the prior two files into thumbnails_begin.php and thumbnails_end.php in /gallery/skins/rounded/templates. The first part is to replace this line of code

<body class="mg2body">

with the following lines

<body>
<?php include("/<path_to_gallery>/wpheader.php"); ?>
<div id="realbody" class="mg2body">

Where <path_to_gallery> is the valid path to your MG2 gallery folder. This has the effect of adding the WP header to the body of the page but keeps the CSS class “mg2body” only around the main page content so that it doesn’t affect the WP header.

Next, add the following code to thumbnail_end.php on the line before the <body> tag to close the <div> tag that we created in thumbnail_begin.php.

</div>
<?php include("/<path_to_gallery>/wpfooter.php"); ?>

Step 3

One problem that can come from embedding one server application inside another is conflicting CSS tags and this is no different. I first noticed that my WP header looked different when I was viewing it in the gallery pages. This was because the class “.navigation” is defined in both the WP CSS and MG2 CSS. To solve this I replaced all references of navigation in MG2 with mg2navigation.

Specifically in the following locations.

Line 135 of …/skins/rounded/css/style.css. Replace “.navigation” with “.mg2navigation”
Approximately line 16 (after apply the changes in Step 2) of …/skins/templates/thumbnails_begin.php. Replace
```
<td class="navigation">
```
with
```
<td class="mg2navigation">
```
Line 14 of …/skins/rounded/templates/viewimage_begin.php. Replace
```
<td class="navigation">
```
with
```
<td class="mg2navigation">
```
Line 16 of …/skins/rounded/templates/viewimage_slideshow.php. Replace
```
<td class="navigation">
```
with
```
<td class="mg2navigation">
```

Step 4

In order to view the gallery with the correct layout I decided to remove the sidebar from the right side of the theme. There may be a better way, but the best way I could come up with was to add some code to my WP theme in header.php. At around line 21 of the default theme’s header.php there is already a test to determine whether to show the sidebar or not. I changed it from this…

<?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single())) { ?>

With this line to check for the definition of MG2_GALLERY. We defined this in Step 1 for this purpose.

<?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single()) && (! defined('MG2_GALLERY'))) { ?>

Step 5

The first four steps were all that were required to make a functional gallery. However, it still doesn’t look quite right in the new surroundings. Below are some extra changes I made to the rounded style.css to cleanup the look.

I modified the .table-top class to include a width, margin-left, and margin-right as follows

.table-top {
   height:35px;
	background-image : url(../images/topnav.gif);
	background-repeat : repeat-x;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

I changed the .introtext class to be center aligned instead of left aligned. I just think it looked better that way.

/* FOLDER INTRO TEXT */
.introtext {
	text-align: center;
	color: green;
}

I also removed the background-color from the .mg2body class so it looks like this…

/* BODY PROPERTIES */
.mg2body {
	font: 10pt tahoma, arial;
	color:#737373;
	margin: 0;
   padding: 0;
}

Conclusion

As far as I can remember, these are all the changes I made to the scripts and css to make the gallery at okuda.ca fit within the WordPress 2 site. See it in action here.

My description is based on using the default WordPress theme and rounded skin for MG2. I would recommend that if you are using these skins that you make a copy and call it something else so you don’t modify the originals. In my case, I copied
.../<mg2_install>/skins/rounded/*
to
.../<mg2_install>/skins/myrounded/*
and set that as my skin from the admin page. I also copied the default WordPress them from
.../<wp_install>/wp-content/themes/default/*
to
.../<wp_install>/wp-content/themes/mytheme/*
and enabled that in the admin. As you can see I have made other changes to it as well.

You will also need to set the number of “Image columns” that MG2 uses for the images in the “Advanced” section of the admin area to 3. This is what I am using. Anything larger and the thumbnails will be wider than the default WordPress theme.

I also set the “Website link” setting to empty since the WordPress header has a link back to the main WordPres blog.

One thing that is missing from these changes is any changes to the pages that display the full size photos. Due to their width they may not fit within the WordPress theme and it was simplest to not enable the WP header in this page.

Please let me know if this works (or doesn’t work) for you and if you have any trouble with it. I am interested in feedback. Please feel free to leave helpful comments about it below.

Notions

A mental image or representation; an idea or conception

A mental image or representation; an idea or conception

Embedding MG2 in WordPress