Integrating mg2 into Wordpress
Links- This tutorial will not cover how to setup and configure WordPress 1.5 or mg2, that topic is outside the scope of this document.
Author: Chris Payne
Last update: 2005-03-11 12:40
- I cannot be held responsible for any damage done to your machine, if you follow closely, you should have little trouble integrating mg2 to have wordpress display your photo gallery wrapped within its content space.
- In the following example, I have wordpress installed on its own partition called /web and mg2 installed in /web/photos so your configuration might be different, so take the possible path name differences into account.
- For my installation, I am not using the default theme installed with WordPress 1.5, I am using a modified theme that doesn't use the exact files as a default installation but you should be able to get it going based on the information presented below.
- First thing we need to do is touch (create file in Linux) /web/photos/mg2header.php and /web/photos/mg2footer.php
- Then we need to copy some information from /web/wp-content/themes/chris/index.php (the index.php in my custom theme path - NOT the index.php in the main wordpress directory!). What we want to copy is everything from the top of the file down to and including where wordpress starts to display its content. In my case, I copied the following information from index.php:
/* Don't remove this line. */
style="font-family: Courier New;"> ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<!-- leave this for stats please -->
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
<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'); ?>" />
<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 //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
<?php get_header(); ?>
and pasted all of this into /web/photos/mg2header.php
- You will probably want to edit the following line that just got pasted in so you can tweak the css for the mg2/wordpress view. In my case when I am displaying the photo gallery on my Wordpress page, I don’t have sidebars (it gives you a little more room for the images) so with this css file, you can play with the content size, margins, etc) and not affect your overall WordPress pages look.
style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
Replace the @import line with something like:
@import url("http://yourdomain/wp-content/themes/themename/mg2style.css"); ?> );
Now save and exit the mg2header.php file. Now copy /web/wp-content/themes/yourtheme/style.css to /web/wp-content/themes/yourtheme/mg2style.css (or whatever you chose as the path to your custom view css file above).
- We can then edit /web/photos/mg2footer.php and just add the following lines:
<?php get_footer(); ?>
Save, and exit the file.
- Now we have to figure out which skin we want to use (configuration is on a per skin basis as the values are hard coded for each skin. If we go into the /web/photos/skins directory we see the list of skins currently available. There are more available at: http://www.minigal.dk/addons.php?searchfor=&type=skin&orderby=added&direction=DESC&prpage=10
- In my case, I am using rounded but before I get into changing code, I want to make a backup first... Just in case! What I do is copy (not move) the rounded directory and all of its subfolders to something like myrounded. Now go into the newly created directory and then go into the templates subdirectory.
- The files we are concerned about right now are thumbnails_begin.php (controls the initial gallery view, a header file), thumbnails_end.php (a footer file) and viewimage_begin.php (defines the settings for displaying the one big image, a header file) and viewimage_end.php (the footer file).
- In both of the header files ( *_begin.php ) we edit them and at around line 11, right below the line that says: <body class="mg2body"> we want to insert a line that says:
<?php include("/web/photos/mg2header.php"); ?>
- In both of the footer files ( *_end.php ) just before the </body> statement, we insert a line above the body statement saying:
<?php include("/web/photos/mg2footer.php"); ?>
- Last, we will probably have to tweak the .css files found at /web/photos/skins/myrounded/css/style.css and /web/wp-content/themes/yourtheme/mg2style.css to make some adjustments so that all of the images are displaying to your satisfaction.
- Fire up your browser and go to mg2 Admin (or you can just edit the config file at /web/photos/mgs_settings.php) and make sure that activeskin has the correct value of the name you want it to use.
- Then, surf to http://yourdomain/photos (or whatever your path is) and tweak as required!
- I hope this helps you out.
MG2 and Minigal © 2005 by Thomas Rybak