The template system embedded into the php photo gallery is designed to easily help you design your gallery the way you desire. You can create your own designs or embed your existing website design into the template system in order to have the look and feel you want.

The template system that you get with php photo gallery script is an advanced version of the php templating system tutorial that was published by Zeronese and found a successful ground. With over 20000 downloads in few months (up to the minute of writing this article), our php templating system proved ease and flexibility. This article will show you how to use the system to create your own designs and/or embed your website design to the photo gallery.

We have done all the coding and you do not need to learn any programming to use the template system of the photo gallery. All what you need to learn is how to place some little peaces of codes into the html pages to create unlimited designs and looks.

The template system of the photo gallery consists of pages, snapshots and tokens. For a template to work with your photo gallery, all the template files should be placed in the design folder of the script in their own folder. When your template is ready, you can go to the manager's page, click on "Settings" and choose your template from the design templates drop down menu.

   Pages: The photo gallery revolves around 5 pages. You can add your own pages at any time. The 5 pages that are needed to run the photo gallery properly are: the main page, the album page, the image page, the search page and the comments page.
Pages are stored in a pages folder inside your design template folder. For example, the pages in the simple_blue template are found under you-photo-gallery-script/design/simple_blue/pages/.
Each page can have design snapshots and tokens. Some snapshots or tokens are global, which means you can place them on any page such as the website title and image picks. Other tokens are local, which means you can place them only on specific pages such as the comment form token that can be placed on the image page.

   Snapshots: Snapshots are basically html codes that can be called by using the tokens. for example, comments_form.html is a snapshot that is called by using the token: !!COMMENTS_FORM!! on the image page. This means where ever you place !!COMMENTS_FORM!! on the image page it is going to be replaced by the contents of the comments_form.html snapshot.

   Tokens: Are place holders for snapshots. This is meant to help you design your pages with out having to modify lots of html when testing your design. Reading further will make things more obvious.

Global Tokens

The following tokens are the tokens that you can place any where on any page of the photo gallery pages. Furthermore, you can place these tokens on the pages that you create and add to the system.

!!COMMON_TAGS!!
Global Token and can be placed on any page.
The !!COMMON_TAGS!! token gets replaced with the contents of the "common_tags.html" file if it exists. The common_tags.html file is usually in the root of every template folder. The common_tags.html file is a good place to place any JavaScript's code or the links to your css files instead of having to add the code and/or the links to every page. You just add the !!COMMON_TAGS!! to any page and modify the common_tags.html as or when needed.

!!HEADER!!
Global Token and can be placed on any page.
The !!HEADER!! token gets replaced with contents of the "header.html" file if it exists. The header.html file is usually under the design folder in your template directory. This is the place where you design/redesign the look and feel of the header of your photo gallery.

!!LEFT_COLUMN!! and !!RIGHT_COLUMN!!
Global tokens and can be placed on any page.
!!LEFT_COLUMN!! and !!RIGHT_COLUMN!! gets replaced by the left_column.html and right_column.html files if they exist respectively. If you decide to have a left and/or right columns in your design, eft_column.html and right_column.html are the files to modify. These are good places to have codes such as adsense or links to other pages in your website if you have any.

!!FOOTER!!
Global Token and can be placed on any page.
The !!FOOTER!! token gets replaced with contents of the "footer.html" file if it exists. The footer.html file is usually under the design folder in your template directory. This is the place where you design/redesign the look and feel of the footer of your photo gallery. A good place to put your copyrights notice and similar information.

!!SEARCH_FORM!!
Global token and can be placed on any page.
The !!SEARCH_FORM!! token gets replaced by the contents of the search_form.html if it exists. Note that search_form.html contains the code for the search form that searches images. If you decided to change the design of this file, make sure that the search textbox id is "keywords" and the form action is set to go to the search.php file. Open the search_form.html file with your html editor to review the code and see how it works.
For example, you might want the button to say "Find Photo" instead of search. To do just that, replace
 <input type="submit" value="Search">
with
 <input type="submit" value="Find Photos">
Save the search_form.html file and refresh!

!!WEBSITE_URL!!
Global token and can be placed on any page.
Gets replaced with the url of your photo gallery which you placed in the settings in the manager's page.

!!PICKS!! and !!PICKS#!!
Global token and can be placed on any page.
The !!PICKS!! token is replaced by photo picks from your gallery. You can tell this token where to pick the photos from by going to the settings page in the manager. Picks can be picked from any specific album or by random. The extended !!PICKS#!! token helps specify the number of picks to show. For example, to show 10 picks you replace the number sign here by the number of picks you want. So, !!PICKS10!! will show 10 picks. The number of picks in each row is the "Number of Columns" that you set in your settings.

!!ALBUMS!! and !!ALBUMS#!!
Global token and can be placed on any page.
As you might have guessed, the !!ALBUMS!! token shows the albums in your gallery in a similar way to !!PICKS!!. The albums design uses a snapshot file which is the album_snapshot.html. The number that you replace the number sign here in !!ALBUMS#!! is the number of columns that the albums should be organized within. For example if you have 6 albums in your gallery, !!ALBUMS3!! will result in two rows (lines) of albums with 3 albums on each row.

!!DESIGN_DIRECTORY_URL!!
Global token and can be placed on any page.
Gets replaced with the url to your design template directory.
For example to link to an image in your design template directory, you would link to it as:
!!DESIGN_DIRECTORY_URL!!images/yourimage.gif
Look at the album_snapshot.html in simple_blue directory as a reference.

!!WEBSITE_META_DESCRIPTION!!
Global token and can be placed on any page.
Gets replaced with the meta description of your photo gallery which you placed in the settings in the manager's page.

!!WEBSITE_META_KEYWORDS!!
Global token and can be placed on any page.
Gets replaced with the meta keywords of your photo gallery which you placed in the settings in the manager's page.

!!WEBSITE_TITLE!!
Global token and can be placed on any page.
Gets replaced with the title of your photo gallery which you placed in the settings in the manager's page.

Note that the tokens are executed and replaced in the order they were introduced above. This means that for example, you can have the !!WEBSITE_TITLE!! included in the keywords to get it replaced by the website title. However you can not put the  !!COMMON_TAGS!! in the footer.html!

Pages and Local Tokens

Local tokens of the photo gallery template system are the tokens that are specific to each page. Local tokens are executed only and only if they are placed on their respective pages. If a local token is placed on the wrong page it will not get replaced by it's respective code. Pages are found in the pages folder in the design template directory.
The following are the pages and their respective local tokens.

The Album Page

You can find the album page in the pages directory in your design template directory. For example if you are using simple blue, albums page is the albums.html file which is in design/simple_blue/pages/album.html
album.html controls the design of the albums on your photo gallery website. You can design the look and feel of your albums by modifying this file. You can also add some template tokens that are specific to the album pages (in addition to the global tokens):   
    !!ID!!: can be placed on the album.html and gets replaced by the album id.
    !!NAME!!: can be placed any where on the album.html file and gets replaced by the name of the album.
    !!IMAGES!!: gets replaced by the images/photos in the album. the number of images/photos that will sow on a page of the album is the number of results in your settings. For example, if you have the number of results set to 30, the number of columns set to 5, and the album contains 75 photos, the album will be divided to 3 pages, first and second page will have 6 lines with 5 thumbnails on each line. the Third page will have 15 photos divided to 3 lines with 5 photos on each line.
    !!DESCRIPTION!!: Gets replaced by the description of the album when placed in the html of the album.html page.
    !!KEYWORDS!!: Gets replaced by the keywords of the album when placed in the html of the album.html page.

The Photo/Image Page

You can also find the image.html file in the pages directory in the design template directory of your template. This is the file that controls how your images show on your photo gallery. The image.html can use the following local tokens:
    !!ID!!: Gets replaced with id of the photo/image
    !!IMAGE!!: Gets replaced with the large version of the photo/image.
    !!DESCRIPTION!!: Gets replaced with the description of the photo/image.
    !!KEYWORDS!!: Gets replaced with the keywords of the photo/image
    !!IMAGE_NAME!!: Gets replaced with the photo/image name.
    !!COMMENTS_FORM!!: Gets replaced with the comments form. If you do not want to allow comments, you can remove this token from the image.html file.
    !!COMMENTS!!: Gets replaced with the approved comments posted on the photo.
    !!IMAGE_NAVIGATION!!: Gets replaced with the previous and next links for browsing images in the same album.
    !!MORE_IMAGES!!: Gets replaced with more images from the same album in the photo gallery.

The Search Page

The search page has the following local tokens:

!!SEARCH_TERM!!: Gets replaced with the search term that was entered into the search box to perform the search.
!!SEARCH_RESULTS!!: Of course, gets replaced with the search results.

The Comments Page:

The comments page does not do much. It is used to communicate with commenter. It will tell him whether his comment was successfully posted, whether it is waiting for approval or if there was an error. So the only local token for the comments.html page is:
    !!MESSAGE!!: Gets replaced with the message after posting a comment to a photo.

Snapshots

Snapshots are chunks of html code that completes the design of the photo gallery. Snapshots are used to give more control over the design, so we are not tied to any standardization. Using snapshots, you are able to modify how forms and repeating patterns such as thumbnails look.
Snapshots are html files that you can design and modify as you wish. Snapshots are found in the root of every design template directory.
Because the snapshot can be dynamic, such as the album snapshot, snapshots can have their own local tokens. This is a list of snapshots with their local tokens:
    album_snapshot.html: This is the snapshot of the album. Note that this is different from the album.html page. The album snapshot is the mini version of the album. It is used to present an album when the !!ALBUMS!! token is called. album_snapshot.html has the following tokens:
        !!URL!!: is the url to open the album and view the photos.
        !!NAME!!: is the name of the album
        !!THUMB!!: a random thumbnail of an image selected from the album and linked to the album's page.
        !!DESCRIPTION!!: the description of the album.

    comment.html: This is the design of each posted comment under the photos. It starts showing when a photo has an approved comment and the !!COMMENTS!! token is called on the image.html page. The commnt.html snapshot has the following local tokens:
        !!COUNT!!: Is the number of the comment.
        !!NAME!!: is the name of the person who have posted the comment.
        !!POST_DATE!!: the date the comment was posted.
        !!COMMENT!!: The comment posted.

    comments_form.html: has no local tokens, but you can modify it to change the look and feel of the comment form. This snapshot is called by the !!COMMENTS_FORM!! on the image.html page.

    image_navigation.html: is the navigation that is added to the image.html. it has the following local tokens:
        !!PREVIUOS_LINK!!: provides a link to the previous photo of the album. Shows nothing if this is the first photo in the album.
        !!NEXT_LINK!!: provides a link to the next photo of the album. If this is the last photo in the album, it will show nothing.

    search_form.html: no local tokens, but you can modify to change the looks and feel of the search form.

    thumbnail.html: Is the last and one of the most important snapshots because it appears all over the place in your photo gallery such as in the albums, image picks, more images, search result...etc. This is the design of how a thumbnail image should look. It has the following local tokens:
        !!THUMB_LINK!!: is the link to the image/photo that corresponds to this thumbnail.
        !!THUMBNAIL_SRC!!: is the link to the thumbnail image.
        !!THUMBNAIL_NAME!!: is the name of the image that corresponds to this thumbnail.

 

By understanding and using this template system, you can have an unlimited number of designs to your photo gallery. You are not tied to the templates that are provided with the php photo gallery script. However, these free templates are a good start if you can not wait to create your own design.
Also, by creating your own designs and adding them to the list of templates, you can surprise your visitors with a new look every few weeks, every season or on different occasions.

If you still did not get your copy of the php/mysql photo gallery... Get It Now