So in this tutorial, we will create a gallery class, and also a template class that will work together with the gallery class.
This is the structure of the files:
| -> index.php
|
| -> includes
|
| - -> config.php
|
| - -> classes
|
| - - -> gallery.php
|
| - - -> template.php
|
| - -> templates
|
| - - -> index.tpl
|
| - - -> gallery.tpl
|
| - - -> view.tpl
|
| - - -> desc.xml
|
| -> img
|
| - -> folder.gif
|
| -> images
|
| - -> example folder 1
|
| - - -> 0.jpg
|
| - - -> 1.jpg
|
| - - -> 2.jpg
|
| - - -> 3.jpg
|
| - -> example folder 2
|
| - - -> 0.jpg
|
| - - -> 1.jpg
|
| - - -> 2.jpg
|
| - - -> 3.jpg
So let's start!
gallery.php
Located in /includes/classes/gallery.php
php Code:
class gallery {
// The total of everything.
private $totalPages;
private $totalPics;
private $maxColumns;
private $maxHeight;
private $maxWidth;
// The current value of everything.
private $currentPicture;
private $currentFolder;
private $currentPage;
private $currentPath;
private $currentFolderPath;
private $currentColumn = 1;
private $currentSpan;
private $currentFormat;
private $currentXML;
private $currentIndex;
// Arrays of available files.
private $folders = array();
// How many images shown per page in the gallery; set in config.php.
private $imgPerPage;
// The first of everything
private $firstImage;
private $firstPage = 1;
This is just basic variables that are needed.
php Code:
php Code:
public function setImagesPerPage($imgPerPage) {
$this->imgPerPage = $imgPerPage;
}
public function setIndex($index) {
$this->currentIndex = $index;
}
public function setMaxCol($max) {
$this->maxColumns = $max;
}
public function setSpan($span) {
$this->currentSpan = $span;
}
public function setFormat($format) {
$this->currentFormat = $format;
}
public function setXML($xml) {
$this->currentXML = $xml;
}
public function setMaxWidth($width) {
$this->maxWidth = $width;
}
public function setMaxHeight($height) {
$this->maxHeight = $height;
}
I wrote this script before I read about __call, so obviously, you can make this ALOT nicer and less code, by making a __call function for this.
I might edit that later after I've written the tutorial, maybe ;)
php Code:
// Fetches the current value of $_GET['folder'] and sets the currentFolder to it.
public function getFolder() {
$folder = $_GET['folder'];
if($folder != "." && $folder != "..") {
$this->currentFolder = $folder;
}
}
Ofcourse, the folder shouldn't be . or .., so we take those out.
Now after reading more PHP tutorials, I've kind of realized that this isn't very safe either as they can still go up one directory and then go into another folder. So maybe you can come up with a nice preg_match function in this code piece, to take out all the dots if there exists.
php Code:
// Fetches the current value of $_GET['page'] and sets the currentPage to it.
public function getPage() {
$page = $_GET['page'];
if (isset($page) && is_numeric($page)) {
$this->currentPage = $page;
}
else {
$this->currentPage = 1;
}
}
We now also have to check the value of the pic, by doing this:
php Code:
// Fetches the current value of $_GET['pic'] and sets the currentPicture to it.
public function getPicture() {
$pic = $_GET['pic'];
if(is_numeric($pic)) {
$this->currentPicture = $pic;
}
}
php Code:
// Scans through the current image path, set in config.php, for folders.
// If the folder set in $_GET['folder'] exists in the directory, the currentFolderPath is set to a value. Returns true or false.
public function setPicFolder() {
$folders = scandir($this->currentPath);
foreach($folders as $folder) {
if($folder != "..") {
$this->folders[] = $folder;
}
}
$folderkey = array_search($this->currentFolder, $this->folders);
if($folderkey) {
$this->currentFolderPath = $this->currentPath.'/'.$this->folders[$folderkey].'/';
return true;
}
else {
return false;
}
}
php Code:
$folders = scandir($this->currentPath);
If the folder in the current loop, is called "..", we don't include it.
If it's anything else than "..", we put the name of that folder in the array $this->folders.
After we've scanned through the directory, we do an array search.
We search for $this->currentFolder (set in the $_GET['folder']), in the array $this->folders.
If it finds it, we can set the currentFolderPath to
php Code:
$this->currentFolderPath = $this->currentPath.'/'.$this->folders[$folderkey].'/';
The next function gets the total amount of pictures in the currentFolderPath:
php Code:
Then it checks if false is not the same type as $file, if $file = readdir
readdir reads through the directory, and loops through all of the files in it.
If the file isn't called "." or "..", the variable $this->totalPics gets 1 value added to it.
After the loop looped through all files, $this->totalPics would then contain the amount of all the pictures in the current folder.
Now, I hope you're as smart as I am with maths(I'm just joking, I'm not very good >.< ), because there will be alot of maths from now on.
php Code:
// Gets the total amount of pages based on totalPics and imgPerPage.
public function getTotalPages() {
$totalPages = $this->totalPics / $this->imgPerPage;
$this->totalPages = ceil($totalPages);
}
The total amount of pictures, is devided with how many images are allowed per page. We then get the amount of pages. But in order not to have like 11,6 pages.. we ceil it, meaning, round it up. So it would then be 12 pages instead of 11,6.
We then set the $this->totalPages to the value of the total pages.
php Code:
// Gets the first image on whatever page the user is currently viewing.
public function getFirstImage() {
$this->firstImage = (($this->currentPage * $this->imgPerPage) - $this->imgPerPage);
}
So, let's say we have 10 images per page.
On page 1, it would show the first 10 images.
On page 2, it would show up to the (2 * 10)th image.
With me so far?
Page 1: 0-9
Page 2: ?-19
Now, we can pretty easy realize that the first image should be 10, on page 2. But in order for the script to get it, we need to subtract $imgPerPage from (2 * 10), leaving us with:
(2 * 10) - 10 = 20 - 10 = 10
Wow, even I didn't get my own explenation. But I hope you get it anyhow!
Because we're moving on!!
The next function isn't really the best coded function, but it gets the work done that it's supposed to!
php Code:
// Prints out a list of available folders.
public function printFolders() {
$folders = '
<img src="img/folder.gif" /> <a href="'.$this->currentIndex.'">Index</a><br />
';
foreach($this->folders as $folder) {
if($folder != "." && $folder != "..") {
$totalPics = 0;
if ($handle = opendir($this->currentPath . $folder . '/')) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
$totalPics++;
}
}
closedir($handle);
}
$folders .= '
<img src="img/folder.gif" /> <a href="' . $_SERVER['PHPSELF'] . '?folder=' . $folder . '">' .$folder. '</a> ('.$totalPics.')<br />
';
}
}
return $folders;
}
Then it just makes a nice link, with a folder image. The rest of the function is pretty self-explenatory, messy, but easy to understand.
php Code:
public function getFolders() {
$count = count($this->folders);
if($count == 1) {
$msg = 'There are no folders in the gallery yet!';
}
return $msg;
}
Returns that message.
The next function, is getting the page links. This is REALLY hard to explain. I don't even know how to begin.
The function itself is also very long. I'll take it in parts.
Here is the whole function:
php Code:
// Prints out the links to the pages in the current folder.
public function printPageLinks() {
if($this->totalPics > 1) {
if(($this->currentPage - ($this->currentSpan-1)) > $this->firstPage) {
$links = '<a href="'.$_SERVER['PHPSELF'].'?folder='.$this->currentFolder.'&page='.$this->firstPage.'">
<< '.$this->firstPage.'</a> .. ';
}
// Prints a list of available pages
for ($i = ($this->currentPage-($this->currentSpan-1)); $i <= ($this->currentPage+($this->currentSpan-1)); $i++) {
// If it's not too low, and not too high
if (($i >= $this->firstPage) && ($i <= $this->totalPages)) {
// Show it
$links .= '<a href="'.$_SERVER['PHPSELF'].'?folder='.$this->currentFolder.'&page='.$i.'">';
$links .= ($i == $this->currentPage) ? ("<b>" .$i . "</b>") : $i ;
$links .= '</a> ';
}
}
if(($this->currentPage + ($this->currentSpan-1)) < $this->totalPages) {
$links .= ' .. <a href="'.$_SERVER['PHPSELF'].'?folder='.$this->currentFolder.'&page='.$this->totalPages.'">
'.$this->totalPages.' >></a>';
}
$links .= '<br /><br />';
// Back page link
if($this->currentPage > 1) {
$links .= '<a href="'.$_SERVER['PHPSELF'].'?folder='.$this->currentFolder.'&page=' .($this->currentPage-1). '">
Previous Page</a> ';
}
// Next page link
if($this->currentPage+1 <= $this->totalPages) {
$links .= ' <a href="'.$_SERVER['PHPSELF'].'?folder='.$this->currentFolder.'&page=' .($this->currentPage+1). '">
Next page</a>';
}
$links .= '<br />';
}
else {
$links .= 'There are no images in this folder yet!';
}
return $links;
}
php Code:
public function printPageLinks() {
if($this->totalPics > 1) {
if(($this->currentPage - ($this->currentSpan-1)) > $this->firstPage) {
$links = '<a href="'.$_SERVER['PHPSELF'].'?folder='.$this->currentFolder.'&page='.$this->firstPage.'">
<< '.$this->firstPage.'</a> .. ';
}
Then it checks if the current page, minus (current span - 1), is larger than the firstpage.
The firstpage, is always 1.
If the currentpage, is 5, and the span is set to 3.
It will then check if 5 - (3 - 1 = 2) > 1 and that is simplified like the following:
5 - 2 = 3
if 3 > 1, which it is, it will print a link to the first page.
So even if you're at page 10, and the span is set to 3:
7 8 9 10 11 12 13
It will show a link to the first page:
<< 1 .. 7 8 9 10 11 12 13
Jesus, how will this tutorial continue... :confused::confused: Hard to explain maths :S
Anyways.
php Code:
// Prints a list of available pages
for ($i = ($this->currentPage-($this->currentSpan-1)); $i <= ($this->currentPage+($this->currentSpan-1)); $i++) {
// If it's not too low, and not too high
if (($i >= $this->firstPage) && ($i <= $this->totalPages)) {
// Show it
$links .= '<a href="'.$_SERVER['PHPSELF'].'?folder='.$this->currentFolder.'&page='.$i.'">';
$links .= ($i == $this->currentPage) ? ("<b>" .$i . "</b>") : $i ;
$links .= '</a> ';
}
}
php Code:
$i = ($this->currentPage-($this->currentSpan-1))
And the loop will run, as long as
php Code:
$i <= ($this->currentPage+($this->currentSpan-1))
And at the end of each loop, we add 1 to $i.
php Code:
if (($i >= $this->firstPage) && ($i <= $this->totalPages)) {
php Code:
$links .= '<a href="'.$_SERVER['PHPSELF'].'?folder='.$this->currentFolder.'&page='.$i.'">';
php Code:
$links .= ($i == $this->currentPage) ? ("<b>" .$i . "</b>") : $i ;
The last line in the loop I don't think I have to explain. It just closes the link.
php Code:
if(($this->currentPage + ($this->currentSpan-1)) < $this->totalPages) {
$links .= ' .. <a href="'.$_SERVER['PHPSELF'].'?folder='.$this->currentFolder.'&page='.$this->totalPages.'">
'.$this->totalPages.' >></a>';
}
if the span is set to 3, and we're on page 1 of 20.
It will echo: 1 2 3 4 .. 20 >>
And if we're at the page 10, as the previous example:
It will echo: << 1 .. 7 8 9 10 11 12 13 .. 20 >>
Pretty neat huh? :D
Next thing, we just echo out some basic breaklines, and then this:
php Code:
// Back page link
if($this->currentPage > 1) {
$links .= '<a href="'.$_SERVER['PHPSELF'].'?folder='.$this->currentFolder.'&page=' .($this->currentPage-1). '">
Previous Page</a> ';
}
So the number link menu, is more if you wanna jump several pages at the time. And the "previous page" link will be for those who wanna scan through all the pages.
php Code:
// Next page link
if($this->currentPage+1 <= $this->totalPages) {
$links .= ' <a href="'.$_SERVER['PHPSELF'].'?folder='.$this->currentFolder.'&page=' .($this->currentPage+1). '">
Next Page</a>';
}
Whoa! That was one long function. And messy. But hopefully, you'll just grasp the idea of this class, and will probably come up with your own solutions for some of the things here!
The next function, prints out the actual images in the current folder.
This function really deserves a whole topic of its own, because it's so much code!! :eek:
php Code:
// Prints out the images on the current page in the current folder.
public function printImages() {
$images = '<table border="1" cellpadding="5"><tr>';
for($i = $this->firstImage; $i < ($this->firstImage + $this->imgPerPage); $i++) {
if (file_exists($this->currentFolderPath . $i . $this->currentFormat)) {
if($this->currentColumn >= $this->maxColumns) {
$xmlstring = simplexml_load_string(file_get_contents($this->currentXML));;
foreach($xmlstring as $folder => $pic) {
if($pic['folder'] == $this->currentFolder) {
if($pic['id'] == $i) {
$title = $pic['title'];
}
}
}
$image = $this->currentFolderPath . $i . $this->currentFormat;
$images .= '<td><a href="'.$_SERVER['PHPSELF'].'?folder='.$this->currentFolder.'&page='.$this->currentPage.'
&pic='.$i.'" border="0" title="'.$title.'"><img src="'.$image.'" height="'.$this->maxHeight.'" border="0" /></a></td></tr><tr>';
$this->currentColumn = 1;
}
else {
$xmlstring = simplexml_load_string(file_get_contents($this->currentXML));;
foreach($xmlstring as $folder => $pic) {
if($pic['folder'] == $this->currentFolder) {
if($pic['id'] == $i) {
$title = $pic['title'];
}
}
}
$image = $this->currentFolderPath . $i . $this->currentFormat;
$images .= '<td><a href="'.$_SERVER['PHPSELF'].'?folder='.$this->currentFolder.'&page='.$this->currentPage.'
&pic='.$i.'" border="0" title="'.$title.'"><img src="'.$image.'" height="'.$this->maxHeight.'" border="0" /></a></td>';
$this->currentColumn++;
}
}
}
$images .= '</tr></table>';
return $images;
}
php Code:
for($i = $this->firstImage; $i < ($this->firstImage + $this->imgPerPage); $i++) {
And as long as $i is less then the first image + imgPerPage, it should do the loop.
And at the end of each loop, it should add 1 to $i.
php Code:
php Code:
if($this->currentColumn >= $this->maxColumns) {
php Code:
$xmlstring = simplexml_load_string(file_get_contents($this->currentXML));;
foreach($xmlstring as $folder => $pic) {
if($pic['folder'] == $this->currentFolder) {
if($pic['id'] == $i) {
$title = $pic['title'];
}
}
}
Foreaches it, and if the folder id in the XML file is the same as the current folder, we check if the id is the same as the $i (pic id).
We then set the $title to the value of the title="value" found in the XML file.
php Code:
$image = $this->currentFolderPath . $i . $this->currentFormat;
$images .= '<td><a href="'.$_SERVER['PHPSELF'].'?folder='.$this->currentFolder.'&page='.$this->currentPage.'
&pic='.$i.'" border="0" title="'.$title.'"><img src="'.$image.'" border="0" /></a></td></tr><tr>';
$this->currentColumn = 1;
At the end, we reset the currentcolumn to 1.
php Code:
else {
First we just do the XML thing again, and gets the title from it.
We then get the same link as before.
The difference is at the end, where we don't start a new <tr>
Also, we add one value to the currentcolumn.
After the loop, we end the <tr> and the <table>.
Then we return $images.
I then have some really bad coded functions, but I'm too lazy to rewrite them.
php Code:
public function is_set($variable) {
if($variable == 'folder') {
return isset($this->currentFolder);
}
elseif($variable == 'pic') {
return isset($this->currentPicture);
}
}
public function getValue($variable) {
if($variable == 'folder') {
return $this->currentFolder;
}
elseif($variable == 'pic') {
return $this->currentPicture;
}
}
Whoa, after reading through the next function, I realize that this function that's comming up, is far more longer, than the printImages().
php Code:
// Checks which picture the user is currently viewing and prints out the image.
public function printImage() {
if($this->is_set('pic')) {
$img = $this->currentFolderPath . $this->currentPicture . $this->currentFormat;
if(!file_exists($img)) {
$image .= '<br /><br /><br /><br />';
$image .= '<a href="'.$_SERVER['PHPSELF'].'?folder='.$this->currentFolder.'&page='.$this->currentPage.'">
Back</a><br /><br />';
$image .= 'This picture does not exist!';
$image .= '<br /><br /><br /><br />';
}
else {
$image .= '<a href="'.$_SERVER['PHPSELF'].'?folder='.$this->currentFolder.'&page='.$this->currentPage.'">
Back</a><br />';
if(($this->currentPicture - 1) < $this->firstImage) {
$nextImage = $this->currentFolderPath . ($this->currentPicture - 1) . $this->currentFormat;
if(file_exists($nextImage)) {
$image .= '<a href="' .$_SERVER['PHPSELF']. '?folder='.$this->currentFolder.'&page='
.($this->currentPage - 1). '&pic=' .($this->currentPicture - 1). '">Previous Picture</a> ';
}
}
else {
$nextImage = $this->currentFolderPath . ($this->currentPicture - 1) . $this->currentFormat;
if(file_exists($nextImage)) {
$image .= '<a href="' .$_SERVER['PHPSELF']. '?folder='.$this->currentFolder.'&page=' .$this->currentPage. '
&pic=' .($this->currentPicture - 1). '">Previous Picture</a> ';
}
}
$maxImage = ($this->currentPage * $this->imgPerPage);
if(($this->currentPicture + 1) >= $maxImage) {
$nextImage = $this->currentFolderPath . ($this->currentPicture + 1) . $this->currentFormat;
if(file_exists($nextImage)) {
$image .= '<a href="' .$_SERVER['PHPSELF']. '?folder='.$this->currentFolder.'&page='
.($this->currentPage + 1). '&pic=' .($this->currentPicture + 1). '">Next Picture</a>';
}
}
else {
$nextImage = $this->currentFolderPath . ($this->currentPicture + 1) . $this->currentFormat;
if(file_exists($nextImage)) {
$image .= '<a href="' .$_SERVER['PHPSELF']. '?folder='.$this->currentFolder.'&page=' .$this->currentPage. '
&pic=' .($this->currentPicture + 1). '">Next Picture</a>';
}
}
$image .= '<table border="1" cellpadding="10">';
list($width, $height, $type, $attr) = getimagesize($img);
$image .= '<tr><td>';
if($width > $this->maxWidth) {
$image .= '<a href="'.$img.'" target="_blank">';
$image .= '<img src="'.$img.'" width="'.$this->maxWidth.'" height="'.$this->maxHeight.'" ';
$image .= 'style="cursor: pointer" title="Click for original size!" ';
}
else {
$image .= '<img src="'.$img.'" ';
}
$image .= 'border="0" />';
if($width > $this->maxWidth) {
$image .= '</a>';
}
$image .= '<br />';
$xmlstring = new SimpleXMLElement($this->currentXML, null, true);
foreach($xmlstring as $folder => $pic) {
if($pic['folder'] == $this->currentFolder) {
if($pic['id'] == $this->currentPicture) {
$image .= '<center>' . $pic['info'] . '</center>';
}
}
}
$image .= '</td></tr></table>';
}
}
return $image;
}
If it is, we check if it exists.
If it doesn't, we echo out an error msg!
Pretty straight forward..
php Code:
else {
First we just print a link back to the page in the folder they were previously viewing.
This is a bit tricky:
php Code:
if(($this->currentPicture - 1) < $this->firstImage) {
so..
index.php?folder=test&page=3&pic=20
the previous picture, must have:
index.php?folder=test&page=2&pic=19
If you get what I mean, so that's why we need 2 different links for previous pic.
We check if the nextimage exists:
php Code:
$nextImage = $this->currentFolderPath . ($this->currentPicture - 1) . $this->currentFormat;
php Code:
The code in the "else" brackets, is the same as the one in the if, except for this:
if
php Code:
page='.($this->currentPage - 1).'
php Code:
page='.$this->currentPage. '
The rest is the same.
The next piece of code decides the next pic link.
php Code:
$maxImage = ($this->currentPage * $this->imgPerPage);
php Code:
if(($this->currentPicture + 1) >= $maxImage) {
After that we basicly do that same thing we did with the previous pic link.
We get the path to the pic, we check if it exists, and then we get the <img> link for it.
Also, notice the difference between the code within the if brackets, and the code within the else brackets.
And notice the difference between these, and the ones for the previous pic link.
We then start a basic table, pretty easy.
php Code:
php Code:
if($width > $this->maxWidth) {
Here we check if the width of the pic is larger than the maxwidth.
If it is, we add a link to the original picture.
And we also resize it because we don't want the full size of the picture to cover up the whole screen.
If it's not larger than the maxwidth, we just get the normal image.
Then we close the image tag, with a border set to 0.
And if the width was larger than max width, we close the link aswell.
After that we do the XML thing again, and checks for the string in the XML file, that matches foldername, pic id, and get the info from that pic.
We then close the table, and then return all of that.
I'm not gonna go in-depth with this class, because there's already a tutorial for this class!
php Code:
class template {
private $template_dir = 'includes/templates/';
private $file_ext = '.tpl';
private $buffer;
public function load($file) {
if(file_exists($this->template_dir . $file . $this->file_ext)) {
$this->buffer = file_get_contents($this->template_dir . $file . $this->file_ext);
return $this->buffer;
}
else {
echo $this->template_dir . $file . $this->file_ext . ' does not exist';
}
}
public function output($input, $array) {
$search = preg_match_all('/{.*?}/', $input, $matches);
for($i = 0; $i < $search; $i++) {
$matches[0][$i] = str_replace(array('{', '}'), null, $matches[0][$i]);
}
foreach($matches[0] as $value) {
$input = str_replace('{' . $value . '}', $array[$value], $input);
}
echo $input;
}
}
This is pretty easy to understand.
php Code:
// The path to the image folder.
$path = 'images/';
// What format is all the pictures.
$format = '.jpg';
// How many pictures per row on each page.
$maxcol = 2;
// How many pictures per page.
$imgPerPage = 8;
// Name of the XML file which holds all the description data of all pictures.
$xml = 'includes/templates/desc.xml';
// Sets the max height for images in gallery view.
$maxHeight = 200;
// Sets the max width for images in image view.
$maxWidth = 700;
// How many pages to display in each direction IF they exists.
$span = 3;
// Set this to whatever name you have on the gallery index page.
$index = 'index.php';
That is the editable variables in the config.
The next part of the config, is just setting things up with the class:
The next part of the config, is just setting things up with the class:
php Code:
// Includes the class file.
include('classes/gallery.php');
// Creates a new object from the class.
$gallery = new gallery($path);
// Sets the format of all pics.
$gallery->setFormat($format);
// Sets the index page.
$gallery->setIndex($index);
// Sets how many images per page.
$gallery->setImagesPerPage($imgPerPage);
// Sets how many images per row.
$gallery->setMaxCol($maxcol);
// Sets max height in gallery view.
$gallery->setMaxHeight($maxHeight);
// Sets the max width in image view.
$gallery->setMaxWidth($maxWidth);
// Sets the span.
$gallery->setSpan($span);
// Sets the XML file.
$gallery->setXML($xml);
// Includes the class file.
include ('classes/template.php');
// Creates a new object from the class.
$tpl = new template;
Pretty easy to understand.. it just creates the object, and sets some variables in the class.
desc.xml
Located in /includes/templates/desc.xml
This is the structure of the XML file.
The long lines with "-" is not neccessary, but it does make it easier to find certain folders if you have alot of folders.
Pretty self-explenatory.
id: The id of the picture
folder: The foldername where this picture is located
info: The text that will appear below the picture when you view only that pic.
title: This is the text that will appear when you hover the picture in the gallery.
Located in /includes/templates/desc.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<folder>
-------foldername 1--------------------------------------
<pic id="0" folder="foldername 1" info="Testing0" title="bla" />
<pic id="1" folder="foldername 1" info="Testing1" title="test" />
<pic id="2" folder="foldername 1" info="Testing2" title="testing" />
<pic id="3" folder="foldername 1" info="Testing3" title="test" />
<pic id="4" folder="foldername 1" info="Testing4" title="Testing more" />
<pic id="5" folder="foldername 1" info="Testing5" title="testing title" />
-------foldername 2--------------------------------------
<pic id="0" folder="foldername 2" info="Testar" title="testar title" />
</folder>The long lines with "-" is not neccessary, but it does make it easier to find certain folders if you have alot of folders.
Pretty self-explenatory.
id: The id of the picture
folder: The foldername where this picture is located
info: The text that will appear below the picture when you view only that pic.
title: This is the text that will appear when you hover the picture in the gallery.
template.tpl
Located in /includes/templates/templatename.tpl
index.tpl
view.tpl
gallery.tpl
It's pretty basic! But this is how it looks. You can change where the pagelinks are shown, etc etc.. by just changing the order of them in the html code.
Located in /includes/templates/templatename.tpl
index.tpl
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="author" content="Tanax"> <title>{title}</title> </head> <body> {folders} <center> {content} </center> </body> </html>
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="author" content="Tanax"> <title>{title}</title> </head> <body> {folders} <center> {image} </center> </body> </html>
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="author" content="Tanax"> <title>{title}</title> </head> <body> {folders} <center> {pagelinks} {images} </center> </body> </html>
Index.php
Located in root folder
So finally, the last piece of script!
The script that pulls everything together, and uses all the classes and everything!
Let's see how it looks:
First thing we do, is include our config file. We then load the index.tpl file for our template.
After that we set a bunch of variables. You should be able to read the comments in the code to see what they do.
Actually, everything is pretty explained in the code.
Just read the comments.
One thing though. We do not parse the site until the very end of the script.
Because if the user is viewing a gallery, we load another file instead of the index.tpl.
And if they're viewing an image, we load another file.
Also one other thing!
You can see, $image variable only exists if the user is viewing a special picture. But we still assign that to the $array in the end, and outputs it with the loaded file.
The way it works is, that if the value is empty, it won't echo out anything, and we haven't included {image} in any other .tpl file than the one the viewer is using when viewing a specific picture, which is view.tpl
I really hope you've learned something about at least something.
It's really a MAJOR tutorial, and probably most of you won't bother reading through the whole thing.
But if you do read through it, maybe you can come up with a way so the functions in the gallery class only returns DATA, and no actual HTML output. And then you can decide exactly how to format the things, within the templatefiles.
But that's for you to figure out!
NOTE!
The images in the different folders, have to be named in numeric order, such as:
0
1
2
3
4
5
The fileformat can be other than .jpg, but all images must have same fileformat!
You can just edit the fileformat in the config.php
Signing out, hope you had a nice read.
Thanks
// Tanax
Located in root folder
So finally, the last piece of script!
The script that pulls everything together, and uses all the classes and everything!
Let's see how it looks:
PHP Code:
include('config.php');
// Loads the default HTML page.
$page = $tpl->load('index');
// Initiate the array of content.
$array = array();
// Gets the current folder from the URL.
$gallery->getFolder();
// Gets the current page from the URL.
$gallery->getPage();
// Gets the current picID from the URL.
$gallery->getPicture();
// Sets the folder to load picture from, based on what the current folder is set in the URL.
$gallery->setPicFolder();
// Gets the total amount of pictures from the current picFolder.
$gallery->getTotalPics();
// Gets the total amount of pages based on how many pictures there exists in the picFolder.
$gallery->getTotalPages();
// Gets the first image on the current page based on what page the user is viewing.
$gallery->getFirstImage();
// Gets the folder links.
$totalFolders = $gallery->printFolders();
// Checks if there isn't any folders.
$noFolders = $gallery->getFolders();
// Assigns the key "folders" the value of the returned value from the folder links.
$array['folders'] = $totalFolders;
// If the user is viewing the index.
if(!$gallery->is_set('folder')) {
$content = 'Welcome to the gallery! Click on one of the folders to the left in order to view the images!';
$content .= $noFolders;
$array['title'] = 'Gallery | Index';
}
// If the user is viewing the gallery.
elseif(!$gallery->is_set('pic')) {
$pages = $gallery->printPageLinks();
$images = $gallery->printImages();
$array['title'] = 'Gallery | ' .$gallery->getValue('folder');
$page = $tpl->load('gallery');
}
// If the user is viewing a picture.
elseif($gallery->is_set('pic')) {
$image = $gallery->printImage();
$array['title'] = 'Gallery | ' .$gallery->getValue('folder'). ' | Picture ' .$gallery->getValue('pic');
$page = $tpl->load('view');
}
// Assigns values in the array.
$array['image'] = $image;
$array['pagelinks'] = $pages;
$array['images'] = $images;
$array['content'] = $content;
// Outputs the page.
$tpl->output($page, $array);
After that we set a bunch of variables. You should be able to read the comments in the code to see what they do.
Actually, everything is pretty explained in the code.
Just read the comments.
One thing though. We do not parse the site until the very end of the script.
Because if the user is viewing a gallery, we load another file instead of the index.tpl.
And if they're viewing an image, we load another file.
Also one other thing!
You can see, $image variable only exists if the user is viewing a special picture. But we still assign that to the $array in the end, and outputs it with the loaded file.
The way it works is, that if the value is empty, it won't echo out anything, and we haven't included {image} in any other .tpl file than the one the viewer is using when viewing a specific picture, which is view.tpl
I really hope you've learned something about at least something.
It's really a MAJOR tutorial, and probably most of you won't bother reading through the whole thing.
But if you do read through it, maybe you can come up with a way so the functions in the gallery class only returns DATA, and no actual HTML output. And then you can decide exactly how to format the things, within the templatefiles.
But that's for you to figure out!
NOTE!
The images in the different folders, have to be named in numeric order, such as:
0
1
2
3
4
5
The fileformat can be other than .jpg, but all images must have same fileformat!
You can just edit the fileformat in the config.php
Signing out, hope you had a nice read.
Thanks
// Tanax
discuss this topic to forum
