Design Meme

Comic Gallery Tutorial

To help you get started using the Comic Gallery script I released earlier this week, I’ve put together a zip file including an example PHP webpage, CSS file, supporting images for the CSS, and a directory with 10 comic images. Special thanks to Michael Heilemann for the webpage template, and Les Gilpin and Ed Furness for the comic.

Download
ComicGallery.zip

Setting up your Gallery

Unzip the file and upload the files to a directory on your website as follows:

• YourWebsiteFolder
  • comicgallery.php
  • example.php
  • kubrick.css
  • images
    • Crusader01.gif
    • Crusader02.gif
    • Crusader03.gif
    • Crusader04.gif
    • Crusader05.gif
    • Crusader06.gif
    • Crusader07.gif
    • Crusader08.gif
    • Crusader09.gif
    • Crusader10.gif
  • kubrick
    • kubrickbg.jpg
    • kubrickbgcolor.jpg
    • kubrickheader.jpg
    • kubrickfooter.jpg

Visit the example webpage you setup at http://YourWebsite/YourWebsiteFolder/example.php and see the script in action!

You can now modify and/or rename example.php in your webpage editor, as well as replace the content of the images directory with your own webcomic or other artwork.

Changing the Settings

To change the settings for your Comic Gallery, open comicgallery.php in your text editor. The code at the top of the script includes the variables you can change to produce different types of galleries. Here are the variables and what changing them will do to your gallery:

$imagedir=”images”;

If you want to create a gallery from another directory, change this variable. For example if your images are in a comics subfolder you would change this line to:
$imagedir=”comics”;

$startimage=”first”;

If you have a daily webcomic or other type of gallery that it’s important to always display the last image in the directory, you would change this line to:
$startimage=”last”;

$copyright=” “;

By default, Comic Gallery does not include a copyright statement. Entering your name here will add “©Your Name” below the gallery:
$copyright=”Your Name”;

$creativecommons=” “;

Adding a Creative Commons license for your work can help you both protect your rights as a creator, as well as allow other people to redistribute or build on your work. If you have a Creative Commons license, you can enter the link to it here:
$creativecommons=”http://creativecommons.org/licenses/by/2.0/”;

$divider=”·”;

The default divider between your Back, Next or Numeric links is · which displays as “·”. To change the divider to something else, enter the code for it here:
$divider=”|”;

$arrows=1;

The default setup for Comic Gallery includes arrows for navigating back and next through the images. To turn arrows off, change this line to:
$arrows=0;

$backnext=1;

The default setup for Comic Gallery includes “back” and “next” text for navigating through the images. To turn this text off, change this line to:
$backnext=0;

$numbers=1;

The default setup for Comic Gallery includes numeric links to each image in your gallery. To turn them off, change this line to:
$numbers=0;

$linelength=10;

To change the number of numeric links per line in your galleries navigation, change this line:
$linelength=6;

$navplacement=”below”;

The default setup for Comic Gallery places the navigation below the image being displayed. To place the navigation above the image, change this line to:
$navplacement=”above”;

Changing the Appearance

Comic Gallery generates minimal, standards based markup so you can easily control the appearance of your gallery using Cascading Style Sheets. For example:

#example   { width: 500px; margin: 0 auto; text-align: center; }

#cg_img   { height: 480px; }

#cg_nav1, #cg_nav2  { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }

#cg_nav1 a, #cg_nav2 a  { text-decoration: none; }

#cg_nav1 a:hover, #cg_nav2 a:hover { text-decoration: underline; }

#cg_credits   { font-family:”Courier New”, Courier, mono; font-size: 11px; color:#999; }

#cg_credits a   { color:#666; text-decoration: none; }

#cg_credits a:hover { text-decoration: underline; }

.cg_arrow1, .cg_arrow2 { font-weight: bold; }

You can use these ID and CLASS names to create a custom style for your gallery, or just let the gallery pickup the default styles you’ve set for paragraphs, images and links on your page.

Tags: development, gallery, php, tools, tutorial, webcomic
Posted in tools | 21 Comments »