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
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
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
with the following lines
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.
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…
With this line to check for the definition of MG2_GALLERY. We defined this in Step 1 for this purpose.
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
I changed the .introtext class to be center aligned instead of left aligned. I just think it looked better that way.
I also removed the background-color from the .mg2body class so it looks like this…
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.
March 24th, 2006 at 10:50 pm
[...] See the tutorial here http://notions.okuda.ca/mg2-hacks/embedding-mg2-in-wordpress/ [...]
April 23rd, 2006 at 3:44 am
Hi
I just want to thank you for taking the time to write and publish this excellent tutorial.
I initially found your post on the subject at POTN and spent most of the weekend setting up my own site. It’s now up and running and I will probably try to come up with a different layout eventually.
I had a few problems with wrong characters for quotes and the page loaded with errors instead of header/footer. I figured out that it came from just copy and pasting the text from this page and i just went back and corrected this.
I also had to remove the “gallery” part from the links to make it work.
But now its all up and running – thanks!
April 29th, 2006 at 2:27 am
Hi there! I was checking this guide out, but I cannot get it to work and since I am a total noob with PHP I dont know what Im doing wrong?
Im running WP 2.0.2 and MG2 0.5.1 with the theme fMulti.
Any help wold save my day!
April 29th, 2006 at 3:00 am
This tutorial is specific to the default theme and rounded MG2 skin. It may require some other modifications if used with other skins and themes. If you have a specific problem it would be helpful to give as much detail as possible in order to help answer it.
If your problem requires more than a line or two to describe then I recommend asking the questions on the MG2 support forum here http://forum.minigal.dk/viewforum.php?f=8. I regularly read those forums as do others who can help with your problem.
May 19th, 2006 at 7:40 am
Help. I followed your directions, but keep getting this error. Can you offer any suggestions
Warning: Division by zero in /home/.bocelli/andylutz/www.blastedgourds.andylutz.com/gallery/skins/rounded/templates/thumbnails_begin.php on line 12
Warning: Division by zero in /home/.bocelli/andylutz/www.blastedgourds.andylutz.com/gallery/skins/rounded/templates/thumbnails_begin.php on line 12
Warning: Division by zero in /home/.bocelli/andylutz/www.blastedgourds.andylutz.com/gallery/skins/rounded/templates/thumbnails_begin.php on line 12
Warning: main(blastedgourdsandylutzphp?): failed to open stream: No such file or directory in /home/.bocelli/andylutz/www.blastedgourds.andylutz.com/gallery/skins/rounded/templates/thumbnails_begin.php on line 12
Warning: main(blastedgourdsandylutzphp?): failed to open stream: No such file or directory in /home/.bocelli/andylutz/www.blastedgourds.andylutz.com/gallery/skins/rounded/templates/thumbnails_begin.php on line 12
Warning: main(): Failed opening ‘blastedgourdsandylutzphp?’ for inclusion (include_path=’.:/usr/local/lib/php’) in /home/.bocelli/andylutz/www.blastedgourds.andylutz.com/gallery/skins/rounded/templates/thumbnails_begin.php on line 12
May 19th, 2006 at 10:07 pm
I’m not sure what might be the problem. Can you send me a copy of that file? Email it to notions at okuda dot ca.
August 19th, 2006 at 2:13 am
Thanks for sharing. Is it possible to make a pugin for wordpress to show slideshow or random photos from my MG2 gallery on blog side bar?
August 19th, 2006 at 10:19 am
Interesting, I hadn’t thought of that. Of course it is possible to write the plugin. As to who or how, well that’s another question. There are a lot of plugins and scripts available that can display random images. They would just have to be modified slightly to either pull images from your mg2 gallery (fortunately all the images are in one directory) or you could even select a random image from the mg2 flat file database. This might be a good start http://photomatt.net/scripts/randomimage and won’t even require a plugin, just insert an img tag in the appropriate location pointing to this script in your mg2 image folder.
October 13th, 2006 at 7:14 am
[...] http://notions.okuda.ca/mg2-hacks/embedding-mg2-in-wordpress/ [...]
February 12th, 2007 at 6:09 am
[...] Posted in WordPress | Trackback | del.icio.us | Top OfPage [...]
March 4th, 2007 at 8:58 pm
no matter what i try i can get the wpheader to work right.
This is what i get every time
Warning: include(./gallery/wpheader.php) [function.include]: failed to open stream: No such file or directory in /mounted-storage/home37c/sub001/sc30285-RDXD/oncegone.us/gallery/skins/rounded/templates/thumbnails_begin.php on line 12
Warning: include(./gallery/wpheader.php) [function.include]: failed to open stream: No such file or directory in /mounted-storage/home37c/sub001/sc30285-RDXD/oncegone.us/gallery/skins/rounded/templates/thumbnails_begin.php on line 12
Warning: include() [function.include]: Failed opening ‘./gallery/wpheader.php’ for inclusion (include_path=’.:/usr/local/lib/php/’) in /mounted-storage/home37c/sub001/sc30285-RDXD/oncegone.us/gallery/skins/rounded/templates/thumbnails_begin.php on line 12
and i have tried to change the absolute url to just about everything.
I have my blog uploaded to my main website folder named oncegone.us and my gallery is in a subfolder to that EXample:
oncegone.us
gallery
wp-admin
wp-content
wp-include
what would i put in as the url for the wpheader that i made.
thanks for the help and i cant wait to get this working.
March 5th, 2007 at 11:59 am
I really should fix the tutorial, but in general, you should be able to include “./../../../wpheader.php” from your thumbnail_begin.php. You must use the relative or absolute path from the file that is including it. I had a server once that wouldn’t let me include relative paths so I left up to each user to figure out what that path should be.
You might also be able to include it as an absolute path “/mounted-storage/home37c/sub001/sc30285-RDXD/oncegone.us/gallery/wpheader.php”.
March 20th, 2007 at 5:27 am
Hi ive been trying to integrate the album to wordpress but i get following errors:
Parse error: parse error in c:\appserv\www\mg2\wpheader.php on line 3
Fatal error: Call to undefined function: get_footer() in c:\appserv\www\mg2\wpfooter.php on line 2
What am i doing wrong?
site looks like this:
localhost/wordpress
localhost/mg2
wpheader.php looks like this:
Thanks for the tutorial!
May 28th, 2007 at 5:21 am
[...] Dette er en super kort vejledning i at benytte MG2 fotoalbum i Wordpress. Denne vejledning er egentligen oversættes af den engelsksprogede version af Okudas erfaringer. Jeg har blot efterprøvet, at den virker i Wordpress 2.2 og på dansk. [...]