Chris Curtis dot Org

This is my first attempt at a real pMachine tutorial.  This one is basically going to explain how I’ve created the Galleries section here on my site.  I decided to use the “categories” feature of the weblog to allow me to create more than one “gallery” within the same weblog.

I’ll try to make it a “step by step” kind of tutorial, but I make no guarantees.  This tutorial assumes that you are using the “Pro” version of pMachine and will have to create a new weblog.  It also assumes that you have a basic understanding of pMachine and how the various parts (PHP pages, templates, etc.) interact.

Set up the Template

First, you’ll need to create a new template to go along with your Galleries.  In your Control Panel, go to Edit Templates > Create New.  Give it a name such as “galleries” and hit Create New.  We’ll come back and customize the templates later.

Create the Weblog

In the Control Panel, go to Weblog Management > Create New.  Again, give it a name such as “galleries” and hit Create New.  Now, go into the Preferences for your new weblog.  You can see what I put for my preferences (pop-up).

A few things to note:

1. I’ve decided to put the galleries in a subdirectory off of my main directory.
2. I changed all of the names of the files.  Only the “Main Weblog page” and “Comments page” settings are really important, since the other two won’t come into play.  Note that the “Comments” file is renamed to view.php.
3. I set the weblog to use the new Template that was created earlier.
4. I changed the “Entry Display Order” to display by title.  This is simply personal preference, so any of the settings will work.
5. I changed the “Entries per Page” to 12.  Again, you can put what you want there.
6. The rest of the preferences can be left alone or set as you wish.

Create your Categories

Still in your Control Panel, go to Categories and click “Edit Categories” for the weblog you just created.  Here you can add new categories.  Each category will be a set of images—essentially a separate picture album.  Create at least one category.  Here you can see my Categories setup (pop-up).

Create “index.php”

In your “galleries” directory, create a new file called index.php.  I’m using this as sort of a gateway page; a way to allow people to access the different galleries/photo albums.  If you want the file to keep the same look and feel as the rest of your site, you can probably just make it a copy of one of your other files (such as your main weblog file).

(Remember that you’ll need to put a copy of the pm_inc.php file in this directory as well.  Be sure that the path settings inside the file reflect its relative location to the pM script directory.)

Open up index.php for editing.  Where you want the main content—the list of galleries/albums—to go, place this pM tag:

<?php weblog_categories($id,"galleries","text"); ?>

Create “galleries.php”

Also in the “gallaries” directory, create galleries.php.  As before, you can copy an existing file to more easily retain the look and feel of your site.  Open the file for editing.  Where you want the main content—the list thumbnails of the gallery images—to go, place this:

<?php weblog_entries($id,"galleries"); ?>

<div class="spacer">&nbsp;</div>

Create “view.php”

As before, create view.php, copying from an existing file for the look and feel if you like.  Open the file and place these pM tags where the main content goes:

<?php weblog_entry_ind($id); ?>

<h3>Comments</h3>

<?php weblog_comments($id); ?>

<h3>Leave a Comment</h3>

<?php weblog_comment_form($id); ?>

Obviously, you can alter this as needed; it is provided simply as a basis to work from.

Set up the “Multi-Entry” Template

In the Control Panel, go to Edit Templates > galleries > Weblog Multi-entry Templates.  In the first template, Master Date Heading, remove everything.

In the second template, Entries, place the following:

<div class="thumbnail">

<a href="%%comments_url%%" title="%%title%%">%%body%%</a>

</div>

Finally, in the Next/Previous Navigation template, place the following:

<div class="spacer">&nbsp;</div>

<table cellpadding="0" cellspacing="0" border="0" width="90%">
<tr>
<td>%%weblog_prev_page%%</td>
<td align="right">%%weblog_next_page%%</td>
</tr>
</table>

Set up the “Single-Entry” Template

In the Control Panel, go to Edit Templates > galleries > Weblog Single-entry Templates.  Place the following code in the Individual Entry template:

<div class="weblog">

<h3>%%title%%</h3>

%%blurb%%

%%more%%
</div>

Again, you may want to customize this to better fit your page.  The above is very basic and more just an example for you.

Update your Stylesheet

You may have noticed in the “Multi-Entry” template that we used two classes called “thumbnail” and “spacer”.  You’ll need to add these to your stylesheet.  Open your stylesheet in an editor—the sample pMachine site uses the file weblog.css.  In the stylesheet, you’ll need to add the following two styles:

.thumbnail {
border: 1px solid #000;
float: left;
margin: 3px;
padding: 3px;
}

.spacer {
clear: both;
}

The “border”, “margin”, and “padding” are all optional and you can change those as you like.  The important part here is the “float: left;”.  By using this, we’re going to force the thumbnails to display horizontally in a row.  The special thing, though, is that once they run out of room horizontally, they’ll automatically wrap to a new row and keep displaying.  This is one of the main tricks that is going to make your gallery succeed.

The “spacer” style is also needed so that the images don’t spill out of your main content area.

Preparing your Images

We’re almost ready to start adding your images to the gallery.  Before you can do that, though, you’ll need to prepare the images.  Basically, this just means that you’ll need to use some sort of image editing program (Photoshop, Paint Shop Pro, etc.) to create a thumbnail version of each image.

I personally like to just select a portion of each image and use that for the thumbnail.  I also make all of my thumbnails the same size, ragardless of the size of the full-size image.  I make my thumbnails 150px x 150px.  Of course, you can use any size you like and they don’t have to all be the same size, but it’s usually easier and better looking that way.

Creating an Entry

So, now that everything is set up and we have both the images and thumbnails, we can actually go in and create an entry to see how that’s done.  In the Control Panel go to New Entry.  The basics about how a new image is added to the gallery:

1. The Title holds the title you want to give the image.
2. Blurb holds the image tag for the main, full-size image.
3. Body holds the image tag for the thumbnail image.
4. More holds the description for the image.
5. For Display In (below “More"), select the “galleries” weblog and the category you want the image to appear in.

Here you can see how I created one of my entries (pop-up).  It’s probably easiest to just use the pMachine File Upload utility to upload your full-size and thumbnail images and have it automatically place the image code in the appropriate box (Blurb or Body).

Hit the “Submit” button and you’ll have your first image in your gallery.

Wrapping Up

You should now have a working Image Gallery.  As mentioned before, you can create new “albums” or groups of images by assigning them to a category.  My own Gallery is a bit more advanced than the one I’ve outlined in this tutorial, but largely it is very much the same.  The main difference on mine is that I have the individual entries/images load into a pop-up window.  Aside from that, the differences are nearly all cosmetic.  You can see my Gallery in action.

Enjoy your new pMachine-powered Image Gallery!

Posted Sunday December 29, 2002 in pMachine / ExpressionEngine by Chris Curtis

This is an older entry and as such, it may be by a guest author or contain formatting problems / extraneous code. If you notice something wrong with the entry, please use the Contact page to let me know the entry title and issue.