Movable Type and Gallery integration :: home :: Adding now playing live affiliate links
* Movable Type and Gallery integration *
comments
Very interesting....
Dlugosz.net » Integrating Gallery into MovableType
Integrating Gallery into MovableType
Filed under: Technology? ryan @ 5:20 pm
Gallery is a very nice PHP-based online photo album. It runs well on its own & also easily integrates into a few weblog frameworks. Unfortunately, it doesn?t appear that anyone has documented how to easily integrate it into MovableType, which is what I?m using here on my site. Click on the link below to read my quick and dirty tutorial on how to integrate Gallery into MovableType.
The first key the integrating Gallery is to understand (at least rudimentally) how it builds it?s individual screens. The main place you?ll want to look is the gallery/html_wrap directory. In this directory, you?ll find a bunch of files called blah.header.default and blah.footer.default. When displaying each type of page: Main index, Album view, Photo view, Search view, or Slideshow view, Gallery looks in the html_wrap directory and will look for the files it needs to format it?s content. If you make copies of the *.default files and put them in this directory (named blah.header instead of blah.header.default), Gallery will use your custom files when wrapping the content.
Note that this tutorial is going to assume that you already have Gallery and MovableType installed and working properly on their own. There are plenty of web resources available for general installation questions.
Now we need to look at how MovableType builds it?s index files from the template files. If you go into the Templates section of the MT management software (i.e. ? /cgi-bin/mt.cgi), you?ll see that you can click a link to ?Create a New Index Template?. These templates are files that contain MT directives that are translated into static HTML content when MovableType ?Rebuilds? your site. In order to fully integrate Gallery into MT, we?re going to have to create 11 new Template files! Don?t worry though ? each of the templates is pretty small & they?re pretty repetitive.
First, let?s create the Gallery Main Page Template. Click on the ?Create New Index Template? link & you will see an empty form. First, let?s name our template something descriptive like ?Gallery Main Header?. Next, we need to tell MT where we want the results written after MT evaluates the template on a rebuild. On my system, the gallery/html_wrap directory is stored under /var/www/html/, so in my ?Output File? field I have: /var/www/html/gallery/html_wrap/gallery.header. This will probably be a little different on your system, depending on where you have installed Gallery.
Now that we have the basics filled in, we need to put the Gallery default header code in the text area of the form. Open up the gallery/html_wrap/gallery.header.default file in a text editor & copy all of it?s contents. Now, head back over to MovableType & paste this text into the ?Template Body? field of our new template. At this time, click the ?Save? button, but we?re not quite done yet.
We now have a template that will produce a file called gallery/html_wrap/gallery.header on a MT rebuild, but it only contains the Gallery defaults. We need to get our MT code integrated into this template so that our MT look-and-feel is wrapped around our Gallery. To do this, click on the ?List Templates? link to get back to the main MT Templates screen and click on the ?Main Index? template. Scroll the Template Body field down until you see the <body> tag. We need to grab the stuff inside the <div id=banner> block so that we get the header on our gallery page. Switch back to the ?Gallery Main Header? template that we just created and paste this DIV block into the Template Body field before all the other Gallery code.
One last thing to insert here ? if you looked just ahead of the MT header DIV block that we copied, you would see the <div id=content> tag. We need to insert this just after the header block that we added to our new template. Hit the Save button once again.
Now that we?ve created this header, we need to create the footer. Follow the same procedure as above to create yourself a new Template, this time calling it ?Gallery Main Footer? and outputting it to /var/www/html/gallery/html_wrap/gallery.footer. Copy the contents of the footer default file and paste it into the Template Body. Now, drop back into the contents of the MT ?Main Index? template and scroll down until you get past the <MTEntries> tag and see two closing DIV tags. Start copying at the second close DIV tag (this is the one that ultimately closes the Content DIV that we opened in the Header) & grab the various DIV blocks that you?d like to have on your Gallery main page. Paste the DIV blocks into your new Gallery Main Footer template after all of the Gallery default stuff that we started with. Be sure that you don?t include the MT code that closes the BODY tag or the HTML tag! Gallery does this in various other files after including the gallery.footer file so we?d better not include it here!
The basic idea here is that we?re using the MT template system to dynamically create the header and footer wrappers that Gallery will insert around it?s content. Once you understand how it all gets put together this approach will make a lot of sense & it?ll be easy to customize.
We?ve come a long way so far so let?s take a look at how it?s working out. Rebuild your entire site in MovableType and verify that the gallery/html_wrap directory now contains the files gallery.header and gallery.footer. Launch your browser and head to the URL that you normally go to for Gallery. If everything worked the way it was supposed to, you?ll see your MT header, followed by Gallery?s main page, followed by the rest of the MT stuff that you put in the footer? But it looks terrible!
Of course, what we?re missing here is the MT CSS file. We can?t just include it in our header template though, because Gallery includes this file after the opening of the BODY tag! Fortunately, Gallery uses the same paradigm for CSS files as it does for headers and footers. The easiest way to fix this is to create a new template that outputs to the gallery/css directory and writes to a file called embedded_style.css. In the body for this template, copy the contents of your MT Stylesheet Template (styles-site.css). You can also selectively append to this the elements that are in the gallery/css/embedded_style.css file to get some control over Gallery?s components. Save this template and Rebuild.
Now your site should look pretty good ? Gallery should be sitting nicely inside of your MT site look-and-feel in the spot where your Blog entries used to be. I?m still tweaking the CSS a bit, and it looks great in Mozilla right now, but not quite as good in MS Internet Explorer. Right now I?m attributing this to the fact that MSIE simply does not implement CSS correctly, but I?m open to suggestion as to how to overcome this. Perhaps the error is my own. Since IE doesn?t quite get this stuff right, I?d recommend leaving the MT Calendar off the screen. I?d also leave off the MT Search dialog, since gallery provides it?s own search features and it could make things confusing.
To complete our integration of Gallery into MovableType, we need to create MT Templates which will generate the remaining headers and footers that Gallery uses. To do this, simply follow the procedure that we went through for the Main template, only this time change the following:
On the DIV tag in the header just before the Gallery code, make the ID ?container? instead of ?content?. We (at least I do) want the remaining gallery pages to look more like the MT Archive & individual article pages than the main Blog-style page.
Use the default text that comes with Gallery which corresponds to the new template that you are making.
In your footers, you probably don?t want to display any of the ?side? elements (like the archive links, etc.) so that there?s more area available for picture viewing.
Please feel free to make any comments or to ask questions by emailing me at: ryan@dlugosz.net. I searched the web a bit to see if anyone else has previously integrated Gallery into MovableType but I didn?t see anything. Hopefully this will prove to be useful for someone! -Ryan
You can view my Gallery if you?re interested in the results of this tutorial!
18 Comments »
pthree of diversionmary.com sent me the following about what he?s doing with Gallery and MT. He?s also posted this on his site.
It grabs the last 5 images
from my nested album and displays them acrossed my movable type blog.
pthree
http://diversionmary.com
Blog is here http://diversionmary.com/dmblog/
Gallery is here http://diversionmary.com/gallery/art
This is what it looks like in raw php form
http://diversionmary.com/dmblog/test.php
And the php/source to do this is such:
http://diversionmary.com/dmblog/test.phps
Comment by Ryan ? 3/19/2003 @ 12:51 pm
Gallery 1.3.3 ? trials and tribulations
It?s installed, it?s working, it?s being tweaked?
Trackback by dreaming sea ? 4/8/2003 @ 10:27 am
Nice tutorial! I just integrated my gallery into my blog this way.
FYI, I simplified things slightly by creating only two boilerplate files:
gallery-boilerplate-header
gallery-boilerplate-footer
I had MovableType generate those using your instructions above, then in the html_wrap directory I just created symbolic links to them from the all the other wrap files (album.header, gallery.footer, etc, etc). This only works on Unix, of course, but it makes the setup a lot easier to create and maintain. Of course you still need to do the css files by hand.
Comment by Bharat ? 4/26/2003 @ 1:34 am
Thanks for the tutorial. Got it partially integrated tonight, will proceed with the rest soon. I was just chopping the templates up by hand before . . . using MT didn?t even occur to me
Comment by Kris ? 8/25/2003 @ 12:24 am
IE 6 does implement CSS corectly but you may have troubles if your pages are in Quirks mode and your pages are ?
which means you are getting the box model problem where IE counts all the sizes of the elements as the width ? margin + border + padding + content + padding + border + margin. Complient browsers set only the width of the content and the padding, border and margin do thier own thing. You can get round this using the Tanek (ironically a Microsoft employee!) hack which tricks IE. On the other hand you could use the Strict doctype.
There is a great chapter in Zeldmans book Designing With Web Standards that explains all of this. However there is no easy answer other than understanding the box model, doctypes and what css you can use with them. Don?t look at my site for the answers!! Have a look on www.zeldman.com and wwwalistapart.com ? which I am sure you are already familiar with!
Great article buy the way ? when I have time I will give it a go!
Comment by Simon ? 8/29/2003 @ 6:39 am
Got most of the integration, but it doesn?t look like all the CSS is getting picked up in the headers. The proper looking blog page is http://www.involvu.net/moveable/epicenter and the Gallery home page is http://www.involvu.net/gallery Can someone take a look at this and let me know if you have any ideas?
Comment by Greg Scher ? 10/21/2003 @ 1:18 am
weird, my banner in gallery is the same as in MT (same tags, same css), but the look is different.
mt: http://www.instrumentofchoice.net/index.php
gallery w/ banner:
http://www.instrumentofchoice.net/gallery/albums.php?mt=y
as you could see, the banner in gallery is larger than in movabletext.. any ideas?
Comment by roy ? 11/6/2003 @ 4:39 pm
In order to fix the gallery / blog css differences, you have to play with the css to get things right. For some reason, when you add the css of your blog inot the extended-css file, it doesn?t render 100% correctly, so you have to tweak the setting until they look the same. I hope you?re good with CSS. Good luck
Comment by Greg Scher ? 11/6/2003 @ 5:48 pm
Do you have solutions for .db users? I ain?t using mysql, so can?t employ your last step? ...which I just remved the codes in the footer to make Gallery more presentable again.
Comment by James Tan ? 12/2/2003 @ 8:49 pm
MT + Gallery = MTG?
ntegrating Gallery into MovableType ? a tutorial . Another project pointer. The discussion in the forum is about getting recent or random images from Gallery and displaying them inline on MT, a pretty cool idea but not quite what I?m looking for. The t?
Trackback by mike.whybark.com ? 1/23/2004 @ 4:46 pm
Integrating PHP Gallery with MT
If you are running MT and Gallery it may be a good idea to integrate the two to some degree. Prior to reading this tip I only used MT interface to write to Gallery?s CSS stylesheet to achive the same?
Trackback by わさび ? 1/26/2004 @ 7:04 am
Gallery Links
This is really for my edification for later, but just so I don?t lose them now, here are a couple?
Trackback by RandomThink.net ? 1/26/2004 @ 4:51 pm
MovableType Conversion Complete!
Now that Gallery has been integrated into the MovableType admin interface on my site using the instructions I found on Dlugosz.net, I can now concentrate on adding new content?
Trackback by Damon?s Daemon ? 2/24/2004 @ 12:24 am
Gallery and Movable Type
Dlugosz.net: Integrating Gallery into MovableType?
Trackback by Shivers Family Journal ? 4/11/2004 @ 10:40 am
Does this work with Movable Type 3.01D?
Thanks
harvey
Comment by harveyjoseph ? 8/29/2004 @ 5:01 pm
I?ve since stopped using MT, so I cannot provide any help with MT3. If anyone has useful tips though, please post a link here! Thanks!
Comment by ryan ? 8/29/2004 @ 8:38 pm
Thanks for the tutorial. I tried it and it works great.
Comment by Dan ? 9/11/2004 @ 10:52 pm
I didn?t want to have this high degree of integration. All I wanted to have was a simple way to use thumbnails and links already created in the Gallery to write up my post quickly. I used Javascript to do this and it should work for other blogging tools.
http://pil.servebeer.com/pil/blog/archives/2004/10/movabeltype_and.html
So my routine now is
1. upload photos to Gallery
2. write up a post putting a short script wherever I want to put the picture.
Comment by pil ? 10/4/2004 @ 8:01 pm
Post Your Comments (scroll down). Jump back to archived comments or the top.
