Tutorials

Large image gallery

Large image gallery
Posted on February 3, 2004
Written by Sasha (view more by Sasha)
Comments (0)
Filed under Movable Type, Tutorials

This tutorial will show you how to create a Large Image Gallery in Movable Type. It uses some of the same techniques used in the Wallpaper Gallery Tutorial, but there are some significant differences. Most importantly, this tutorial will not require an Entry for every image, making it fit for larger galleries with hundreds or even thousands of images (think large scan galleries, Icon Archives, Screencap Sites, etc). The whole thing will be built up using categories (such as, for example, Actors, Actresses), and galleries inside these categories (such as Angelina Jolie, Sarah Michelle Gellar in Actresses). Each of these galleries will be one Entry, no matter how many images there are inside each. You can also determine how many images are displayed per gallery page.

This method does require you to name all your images along the same format though, otherwise it won’t work. I always name my full-sized images subject01.jpg, and the thumbnails for each subject01_tn.jpg. You have to find a similar system (or you can just do it the way I do) to get this to work. Also, all the images inside each gallery have to be in the same folder on the same webserver, and they have to be numbered consecutively, without missing a number.

For a real-life example of this, check out the Wallpaper Galleries at Fever Of Fate. They are completely powered by MT, using the method I’ll describe here.

You’ll need MT installed on the site you want to use this one (please note that this tutorial is ONLY tested in MT 2.x and is not guaranteed to work in MT 3.x). Your host also needs to support PHP, because I will be using that extensively in this tutorial. I will also assume that you’re using PHP Headers and Footers on your site, although you can easily use it without these… It’ll just make your site a bit slower and less easy to maintain. If you’re not using them, just put in the full HTML coding in wherever I refer to include("header.php"); and include("footer.php");

Log into your MT control panel and click the Create new Weblog link. Fill in the following information on the next screen:

Weblog name: Image Gallery
Local Site Path: [the absolute path to your site should already be filled in, like /home/user/public_html/mt. Replace everything after the public_html bit with articles: /home/user/public_html/gallery
Site URL: [the URL to your site should already be filled in, but replace everything after your site’s URL with articles: http://yourdomain.com/gallery/
Local Archive Path: Fill in the same here as you put down for Local Site Path.
Archive URL: Fill in the same here as you put down for Site URL.

Click the Save button. Your blog has now been created.
Open up your FTP program, and connect to your website. Create a new folder named gallery, and CHMOD this folder to 777. This is needed to allow MT to put files in that directory.
Switch back to MT. After you clicked the Save button in step 1, you should now be in the Weblog Configuration Screen for your new Articles blog. Click on the Preferences Link near the top of the screen. Change the following things:

Default Text Formatting for new entries: Set this to None.
Default Post Status: Set this to Publish.
File extension for archive files: Set this to "php" (without quotation marks).
Allow Comments default: Set this to Closed.

Leave everything else the way it was and click save.
Now click on the link next to Preferences that says Archiving. Make sure the Individual and Category boxes are ticked (untick the box for the Monthly Archives, too). Under Archive File Template, fill in the following for Individual:
```
<MTEntryCategory dirify="1">/<MTEntryTitle dirify="1">.php
```
For Category, fill in:
```
<MTCategoryLabel dirify="1">.php
```
Under Index templates, delete all templates except for the Main Index. Under Archive-Related Templates, delete the Date-Based Archive.

Click on Main Index Template, delete all the coding currently in there and put the following code into it:

<?php include("../header.inc"); ?>

<h1>Image Gallery</h1>

<p>Click on a category below to see all galleries available in that category.</p>

<ul><MTCategories>
<li class="lists"><a href="<MTCategoryArchiveLink>"><MTCategoryLabel></a> (<MTCategoryCount> <? if (<MTCategoryCount> >1) { echo "galleries"; } else { echo "gallery";} ?>)</li>

</MTCategories></ul>

<?php include("../footer.inc"); ?>

Put in "index.php" under Output File, and click save. The code above assumes you have your PHP header and footer in the folder above the gallery one, if this is not the case, remember to change the path.

Go back into Templates, and click on the Category Archive Template. Delete all the coding in there, and replace it with the following:
```
<?php include("../header.inc"); ?>

<h1>Pick your gallery from <$MTArchiveTitle$>!</h1>

<ul><MTEntries>

<li><a href="<MTEntryLink>"><MTEntryTitle></a> (<MTEntryExcerpt>)</li>
</MTEntries></ul>

<?php include("../footer.inc"); ?>
```
Click save. If you had to change the path to your PHP header and footer in step 6, do it here as well.

Go back into Templates again, and now choose the Individual Entry Archive template. Delete all coding in here as well, and replace it with:

<?php include("../header.inc");
$img_number ="<MTEntryExcerpt>";
$img_url ="<MTEntryBody>";
$img_tag ='width="150" alt="<MTEntryTitle>" border="0" class="thumb"';
$img_tn ="_tn";
$img_limit ="10";

?>

<h1>Image Gallery</h1>
<p><a href="/wp/">Wallpapers</a> > <a href="<$MTEntryLink archive_type="Category"$>"><$MTEntryCategory$></a> > <MTEntryTitle> > <b><MTEntryExcerpt></b> found</p>

<div align="center"><table>
<?php
$table = 1;

if (!$start){ $start = 0; $nav=0;
} else { $nav = $start; }

$startend = $start+$img_limit;
function NAV($start, $img_limit, $img_number)
 {
 if ($start == 0) {
 echo "&#8226;";
 } else {
 $start2 = $start-$img_limit;
 echo "&#8226; <a href=\"" . $_SERVER['PHP_SELF'] . "?start=$start2\">Prev</a> &#8226; &#8226;";
 }
 $pages=intval($img_number/$img_limit);
 $left= $img_number % $img_limit;

 if ($left){
 $pages = $pages+1; }
 $page = 1;
 while ($page <= $pages) {
 $start4 = ($page-1)*$img_limit;
 echo "&nbsp;<a href=\"" . $_SERVER['PHP_SELF'] . "?start=$start4\">$page</a>&nbsp;";
 $page++; }

 $start3 = $start+$img_limit;
 if ($start3 < $img_number){
  echo "&#8226; &#8226; <a href=\"" . $_SERVER['PHP_SELF'] . "?start=$start3\">Next</a> &#8226;";
 } else {
 echo "&#8226;";
 }
}

if ($img_number > $img_limit){
echo "<div align=\"center\">";
NAV($start, $img_limit, $img_number);
echo "</div>"; }

while ($nav < $startend) {
 if ($nav >= $img_number){
 break; }
++$nav;

if ($nav <=9) { $formatnav = 0; $formatnav .= $nav; } else { $formatnav = $nav;}
if ($table == 1) { echo "<tr>"; }
?>

<td><a href="<?=$img_url?><?=$formatnav?>.jpg"><img src="<?=$img_url?><?=$formatnav?><?=$img_tn?>.jpg" <?=$img_tag?>></a></td>

<?php if ($table == 1) { $table = 2; }
elseif ($table == 2) { $table = 3; }
elseif ($table == 3) { echo "</tr>"; $table = 1; }
}  ?></table>

</div>

<?php include("../footer.inc"); ?>

This will put your images in a 3-column table. You can change the variables at the top of the page.
The $img_tag variable lets you insert anything inside the image tag. I’ve used it to specify the width of the thumbnail (the height varies for my thumbnails, but if it’s the same for all of yours, feel free to add that), the alt text, the border and to add a CSS class to it that’ll give all my thumbnails a nice black border plus some padding.
The $img_tn variable should be the same as what you tack onto the end of your thumbnail image filenames to distinguish them from the full-sized ones.
And the $img_limit variable determines how many images will be shown per page. You can set this to any number you want. In general, 10 is a good number, but if you’re using this tutorial to, for example, display a screencap gallery of hundreds of images, you might want to set the number a bit higher.

The same goes again here for the headers and footers, change them if they’re in another folder, and click Save when you’re done.

Now you are ready to start adding galleries to your Image Gallery. Click on the New Entry Icon in the navigation bar. Type in the name of the gallery into the Title Field (for example: Angelina Jolie). Choose a category from the dropdown, or if there are no categories there yet, click the Add New Category option. Following the Angelina Jolie example, you’d type in Actresses here. Under Entry Body, type in the URL to the folder where the images are stored, plus the general file name (without the number or extension though!). For example, if your images were stored in yourdomain.com/actresses/angelina, and they were all named jolie01.jpg, jolie02.jpg, etc, you’d put http://yourdomain.com/actresses/angelina/jolie in the Entry Body. The rest of the file names (the image number, the .jpg extension) will be added by MT automatically.
And under Entry Excerpt, put in the number of images in this folder (like, 3, or 56). Click Save. And that’s all! New gallery added!

There are many other functions you could add to this Image Gallery. For example, if this was for an Icon Archive, you could open up comments on the entries so people could comment to let you know which ones they were taking. Or you could install the Related Entries Plugin to generate a list of other galleries in this subcategory. And I’m sure there are many more possibilities I haven’t even thought of yet.

Again, the way I created an Image Gallery in this tutorial is not the only way to do this. I’m sure there are many other ways to accomplish something similar in MT. But hopefully this tutorial taught you a bit more about the different uses MT is great for, and hopefully it’ll be of some use to you.

Comments

Comments are closed for this entry.

CodeGrrl - taking the grr out of coding!

Tutorials

Large image gallery

Comments

Categories