Home » The tutorial » The Portfolio Pages

The Portfolio Pages 

Of course Bob needs a way to show potential clients work that he has done in the past.  We'll do this with a simple script that pulls graphics out of a folder.

First, create a file called gallery.php and insert the following code.

<?php
if ($_GET['size']!='fullsize')
    {
    $cols = 4;

    if ($image_folder=='') $image_folder='images/wedding';

    $dir = opendir($image_folder.'/fullsize');
    $directory=('/'.$base_dir.'/');
    $pattern=".(gif|jpg|jpeg)$";

    $counter = 0;
    echo '<table class="image_table"><tr>';
    while ($file = readdir($dir))
        {
        if ($file !='..' && $file!='.')
            {
            if ($counter%$cols == 0)
                {
                echo '</tr><tr>';
                }
            echo '<td><a href="'.$_SERVER['PHP_SELF'].'?size=fullsize&filename='.$file.'"><img class="gallery_thumb" src="'.$image_folder.'/thumbs/'.$file.'"></a></td>';
            $counter++;
            }
        }
    echo '</tr></table>';
    closedir($dir);
    }
else
    {
    echo '<img class="gallery_fullsize" src="'.$image_folder.'/fullsize/'.$_GET['filename'].'">';
    }
?>

Notice the $image_folder variable.  You'll be able to specify this before you include gallery.php, but you can also set a default.  That's what I have done with 'images/wedding'.  

The graphics
You'll need to upload your graphics to a folder (ex: images/wedding) and save them in 2 sub folders.  Fullsized images need to go in images/wedding/fullsize and thumbnails need to go in images/wedding/thumbs.  Of course, change the folder to where ever you are saving them, but leave fullsize and thumbs on the end.  Do not put any other files in these two folders.

Using it
This is the code for the portfolio_wedding.php page.  The portrait portfolio page will be similar, but should probably point to another folder.

<?php
$pagetitle = 'Wedding portfolio';
include('header.php');
?>
<h1>Wedding Portfolio</h1>
<?php
$image_folder = 'images/wedding';
include('gallery.php');
?>

<?php include('footer.php');

Notice that we set a variable for $image_folder before including gallery.php.  This allows us to reuse gallery.php for different folders.  

A little CSS
Like many of the other sections, you'll need to add a little bit to your style.css file. This addition is for the thumbnail and fullsize images.

img.gallery_fullsize    {
    border:         1px solid black;
    display:        block;
    margin-left:    auto;
    margin-right:   auto;
    }
img.gallery_thumb   {
    border:         1px solid black;
    }

On to version 12
Here is the wedding portfolio page from Bob's current site.