Incorporating Gallery into Wordpress

By Katie Dixon - In on July 21st, 2004

I’ve received several emails wondering how I have incorporated Gallery into WordPress. Well, my Gallery installation is in no way related to my WordPress installation- the only similarity is the design.

Specs:
Gallery v 1.4.3
WordPress v 1.0.2

To accomplish the “integration,” you need to look at your code and figure out where the content on your pages starts and ends.
For instance, say your site is organized like this:
[header]
[menu]
[content]
[footer]

You will have to identify 2 parts:
- The code leading to the start of [content]
- The code that the follows [content]*

*Note that we will NOT be using the side menu in this example, so you will need to delete that code. By not using the menu, the gallery will take up the full area, rather than having a column on the right side. To accomplish this, you will have to modify your stylesheet so that #content expands the full width, rather than leaving room for #menu. More on that later.

Once Gallery is installed, there should be a folder called “html_wrap” which contains several files. We will be using “wrapper.header.default” and “wrapper.footer.default” to wrap our design code around the Gallery code.

If you open “wrapper.header.default” or “wrapper.footer.default” you will see some php code in the file. We will put our design code AFTER all of this, so when you start to add yours in, make sure you press enter a few times after ALL of that code that Gallery has written in that file.

A default install of WordPress should have something like the following on the “index.php” page. Using this as an example, I will show you what to trim out for use in our Gallery’s wrapper files.

Now, for our “wrapper.header.default” file, we need to remove the WordPress parts and keep the basic design skeleton. We need to include everything from the beginning to where our content would normally begin. Here is a trimmed down version of the previous example.

Alright, we have now broken up our code and put them in our correct Gallery files. Next, we need to make a copy of our CSS file. If you are using the default WordPress then yours is probably called wp-layout.css and in your main WordPress folder (the same folder as index.php was). Download that file and save it to your computer as we will be editing the #content section now. Make sure you save the newly edited stylesheet in the folder you have specified the link for in “wrapper.header.default”

In the default file, #content looks something like this:

#content {
margin: 30px 13em 0 3em;
padding-right: 60px;
}

We want to remove the padding on the right side, as well as make the widths on the sides of the content equal. We should now have:

#content {
margin: 30px 3em 0 3em;
}

That should be all of the steps now- trimming the original file, placing the top section in “wrapper.header.default” and the bottom section in “wrapper.footer.default,” and modifying the original stylesheet to stretch it across the page. Let’s see a screenshot of what we’ve got: Original WordPress Index.php and new Gallery following our same design and stylesheet.

If you have any questions, simply leave a comment here or use the contact page to email me.
If you are interested in what each part of the index.php page does in WordPress check out http://weblogtoolscollection.com/b2-img/index.phps
If you are wondering what each part of the css file does in WordPress check out http://blog.nuclearmoose.com/wp-docs/wp-layout-explained.htm


Tags: ,



28 Comments »

  1. Katie this is a nice tutorial, i’m going to try it, thanks for sharing!

    Comment by Abraham Irawan — 7/22/2004 @ 1:36 am

  2. Nice Article!

    Comment by Andreas Ortner — 8/30/2004 @ 9:24 am

  3. [...] he many great web designers who wrote how they were able to do it. In particular, I found Katie Dixon’s post in her site particularly helpful (after readi [...]

    Pingback by Allister Is A Geek : Personal Website of Allister Levi Sanchez » New Look and Site Improvements — 10/19/2004 @ 2:41 am

  4. Hi,

    I tried your method, which looks like it would be what I need, thanks for sharing, but I end up getting this message:

    Fatal error: Call to a member function on a non-object in /var/www/root/wp-includes/wp-l10n.php on line 37

    This is the same error message related on those 2 WP support posts:
    http://wordpress.org/support/3/7931
    http://wordpress.org/support/3/7885

    Do you have any idea what the issue is?

    Thanks

    Nico

    Comment by Nico — 11/1/2004 @ 3:10 pm

  5. Nico-
    I honestly haven’t a clue as to where or why you are getting that error. My instructions for incorporating Gallery in no way involve WordPress other than using the same style sheets that are used on the rest of one’s site so that it looks uniform with the rest of it. I looked over those links you posted as well and don’t know what to make of them- it should simply be a matter of using the same style sheets, not any WordPress includes or any other part of WordPress for that matter.
    Sorry that I can’t be of more help, good luck though.

    Comment by Katie Dixon — 11/1/2004 @ 10:36 pm

  6. hi katie

    great tutorial and thank you for taking the time to put it together. as i know very little about css, how difficult is it to have the right or left ‘frame’ of the wordpress template (which has the links, categories, etc) to appear in the modified gallery page (to keep the structure of the gallery page the same as wordpress)?

    Comment by john — 11/4/2004 @ 3:16 am

  7. John-
    Not sure about that one, I do know that your image from Gallery, if viewed full sized, would conflict with that menu area (left/right) most likely. I have seen it on a few sites already which is why I recommend not having it.

    Comment by Katie Dixon — 11/4/2004 @ 9:25 am

  8. katie

    the biggest issue is with internet explorer. firefox is fine, and leave the right column where the menu would be empty, but with ie, the gallery page and borders goes way off the right hand side of the screen, needing the use of the bottom scroll bar. your site looks fine, i imagine you have done extra work with the formatting. with firefox i have been able to get the menu items in their place (just need to work on the styling). any thoughts on fixing the run-off issue with ie?

    Comment by john — 11/10/2004 @ 6:14 am

  9. John-
    Depending on the size of the picture (i.e. a screenshot from my Gallery viewed full size at 1024×768 will totally overrun my design and just be hanging out there on the right side (this is in Firefox)). I use Linux so I don’t have access to IE at the moment, however I would imagine that IE will dump everything out of the box as it does now on Firefox. If you have a two column layout on your Gallery with the menus on one of the sides then I see no reason why you could not add side scrolling at the bottom if you have defined the “box/area/container/div” to be a fixed size and to scroll when someone views a large image. I have not attempted this and don’t particularly care to, but I see no reason as to why it could not be done and look quite good. Perhaps I will tackle it myself someday.
    Check this out and you will see what I’m referring to when it comes to viewing an image larger than the container you have Gallery in: http://dump.pibby.com/wpgallery/wayover.png

    Comment by Katie Dixon — 11/10/2004 @ 8:33 am

  10. thanks katie, i see what you mean. not a big issue for me as i keep all photos to 640 x 480 to be kind to those not on broadband :) a default gallery install in ie everything is fine, but once the wrapper.*.default files were modified to accomodate wordpress, ie loses its right hand margins (firefox is all right with it though). i played around with adding three columns as a table wrapped around Gallery which seemed to work with ie, was just trying to avoid using div tags and table/td/tr tags, kind of kludgy. thanks for your feedback. hopefully others may find this bit of conversation useful.

    Comment by john — 11/10/2004 @ 5:00 pm

  11. Katie–

    Good tutorial. However, John does bring up a good point. It works great in Firefox but at least on my site has some trouble when it comes to IE. After poking around for awhile, I think I have found the reason. Gallery sends its own header and body code before it ever gets to the custom code. So you basically end up with a page within a page. As a result, IE doesn’t play well with things like the “box model hack” that is used in some CSS designs. Check out my site at http://keimweb.homeip.net/press/gallery in Internet Explorer and you will see some of the problems. You can also do a “view source” on the page and see the problem with multiple headers.

    The bigger problem is that it seems that Gallery defaults to “Quirks Mode” when outputting a page in IE. One suggestion I have seen is to use the “Tanek Hack” to force IE into a standards compliant mode. Not sure how to do that yet but I am searching. Thanks for the article. It has forced me to become more familiar with my Gallery install.

    Comment by James Keim — 11/17/2004 @ 5:19 pm

  12. Another reason for everyone to ditch IE and use Firefox!

    Comment by Katie Dixon — 11/17/2004 @ 5:47 pm

  13. I would love for everyone to ditch IE. Unfortunately, it doesn’t seem as though that is going to happen very soon. After some digging here is what I’ve found. Tanek’s Hack doesn’t actually force the browser into standards compliance. It is actually “the box model hack” to which I referred in my previous comment and just works around some of IE’s problems. In IE6 standards mode works correctly and so it is not needed. Unfortunately, Gallery 1.4.x (not sure about 2.x) uses quirks mode. This is the reason my pages look fine in WordPress but are completely unaligned in Gallery.

    From what I can see, the proper way handle this would be to put our CSS into Gallery’s embedded_style.css file. Then don’t send the header tags again — just what appears between the body tag and the #content tag you mentioned. It doesn’t solve the IE issue but it is a cleaner way of sending your HTML. I said before that this structure doesn’t play well with the box model hack. I am going to revise that and say that one probably needs to employ the box model hack more liberally given how the fact that we can’t get Gallery out of quirks mode.

    I am just learning this stuff myself so take it for what it is worth. Here are some links I’ve found on these topics:

    Tantek’s Box Model Hack
    Avoiding Tantek’s Box Model Hack
    Integrating Gallery into MovableType
    Customizing Gallery Footers

    The next one is beyond me but I think holds the most promise for a good solution:
    Embedding Gallery in Existing Communities

    Comment by James Keim — 11/17/2004 @ 6:37 pm

  14. [...] Trying to integrate my gallery with the main wordpress site, with the help of some online resources. kinda tricky, but it’s kind of m [...]

    Pingback by smart brother » Blog Archive » Attempting some slight gallery integration | Don't Push Me, 'cause I'm Close To the Edge — 11/30/2004 @ 1:56 am

  15. I had the same problem that Nico talks about in his comment. The error will occur anytime you try to call a Wordpress function from within a Gallery page.

    The good news is that I have a solution. :)

    Comment by Ron — 11/30/2004 @ 2:33 am

  16. thanks!! It worked. great instructions.

    Now, how’d you like to tackle a wp customization tutorial :)

    Comment by joe s — 12/11/2004 @ 11:52 am

  17. Joe-
    Glad it worked out for ya! As for a WP customization tutorial, what are you looking to customize? XHTML and CSS? That I cannot teach you. A good place to start though is http://www.w3c.org (they have tutorials that will walk you through a lot of the basics) :)

    Comment by Katie Dixon — 12/11/2004 @ 5:03 pm

  18. hey nice tutorial, i’ll give it a bash tonight. i’ve been looking to do this for a while, but really couldn’t be bothered nutting it out myself.

    Comment by Slappa — 12/15/2004 @ 10:12 pm

  19. Leave head tags out of wrapper files. Insert meta tags and change doctype in util.php and it will work as it should. I’ve managed to integrate G1 into MT, WP and pMachine with no problems. There are a couple of tricks with WP and pMachine (involves Gallery’s util.php and init.php files), but not difficult at all.

    Comment by Gallery Diva — 12/24/2004 @ 3:11 pm

  20. This is good work. I’m having trouble with the width of my gallery. I have followed all the instructions but the gallery does not fit inside the content of the page. It is doing my head in. If anyone can suggest a fi for gallery I would greatly appreciate it.

    Comment by dude — 1/2/2005 @ 9:58 am

  21. Dude-
    You gallery looks fine other than the random image being shown based on one’s resolution I would assume (your background image that you have repeating). Only quick fix I can think of is to add more albums to fill up the Gallery. Once one enters an album it looks fine to me (on 1280×1024).

    Comment by Katie Dixon — 1/2/2005 @ 7:36 pm

  22. thanks for this. Theproblems was knowing what css file ot edit. I have moved to a new server and will start again from scratch. I did have big problems with IE that I will need to spend some time on . I did add lots mroe galleries, changed the res and it all looked perfect and consistent with my index page with firefox. On IE it was all over the place.

    Comment by dude — 1/11/2005 @ 7:25 pm

  23. [...] press installation. Alas, there’s no simple solution to this, but I found some nice step-by-step instructions to do it. I wish there was a Gallery plugin [...]

    Pingback by /usman/ » Photo gallery has been imported — 1/16/2005 @ 2:25 am

  24. Hi, came upon your tutorial via google search. I got it to work for me (after rereading it a few times). Thanks!

    Comment by Sandra — 1/20/2005 @ 10:41 am

  25. Anyone figure out a clean way for doing this under Wordpress v1.5 and Gallery2 (G2)?

    thanks

    Comment by niq silver — 1/20/2005 @ 3:04 pm

  26. Integrade Gallery into WordPress
    Some useful resources help to guide you integrade photo gallery into wordpress blog.

    Trackback by LiewCF.com - Tech Gadget Blog — 1/23/2005 @ 7:32 am

RSS feed for comments on this post. TrackBack URI

Leave a comment