Comic Gallery Tutorial

by Stuart Robertson on May 26th, 2005 | tools

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.

22 Comments

  1. TeKK on February 12, 2006 at 7:30 am

    Just got round to finally using PHP to browse through my comics, and I came across your version while looking for tutorials. It was easy to install, configure and works fantastic!

    Great job and many thanks!

  2. Zeder on July 2, 2006 at 6:50 am

    I use your program for my gallery and is great but now i have problem with the pic n.100.
    the other are numered 1-2-3 ect

  3. LAMP Guru on July 18, 2006 at 5:31 pm

    links from Technorati Comic Gallery Tutorial | Design Meme

  4. Jen on August 6, 2006 at 5:57 pm

    Hello, can’t tell by looking at the code for your comic gallery.

    Will it rotate things and if so in order and how often? Please let me know, thank you very, very, much. Jen

  5. Chris on September 24, 2006 at 6:59 am

    Hey, I downloaded the script and configured it to how I wanted it, but now how would I get it on a webpage?

  6. Jon on October 16, 2006 at 4:45 pm

    How could this work (maybe a feature request) for multiple issues…

    so one dir is issue 1 (containing images)
    and a different dir for issue 2 (containing images)

    both of these dirs are in the images folder.

  7. Ree on January 3, 2007 at 12:15 am

    For some reason when I clicked for the next page in my comic it dosen’t show up but repeats the first page. Could you please help me fix this problem I really don’t know what is wrong.

  8. John on January 7, 2007 at 6:31 pm

    Hey! You’re comicgallery seems really cool, but I was just wondering, does it work if you have a freewebs.com account? Or do you have to be using a website-making program?

  9. Devynci on January 13, 2007 at 4:36 pm

    Hi, using your script on my site. It’s fantastic, all the other scripts are so difficult to install or make sense out of compared to yours.

    I’m curious though, is there a way to seperate the skiplinks away from the code? I want to stick them in atable below, but I’m having difficulty customizing them.

  10. Gray on February 8, 2007 at 9:50 am

    could this script be upgraded? one thing i hope it’ll have is RSS, and if it’s not too much to ask: as a Wordpress plugin? i see you’re using wordpress here…

  11. EdgeVerse on February 28, 2007 at 11:27 am

    I like your script. I was able to make my own template and code it. I use the script for my online webcomic called
    “Armored Carrier”

    check it out sometime.

  12. Jade on May 29, 2007 at 10:24 am

    Thank you for this script! :) Even though I want to stab it with many, many forks, I finally got it up in running and on my site. I have a question though. How can I move the “Powered by…” notice? I want to move it to the bottom of my site above my copyright info so that I can put something in its place.

  13. Samantha on July 10, 2007 at 11:42 pm

    I love it! Very easy to use. But I am also finding it a bit difficult to configure.

    Anyone know how to put navigation at both top and bottom?

  14. Dreamvagabond on July 17, 2007 at 6:42 am

    Thanks, this is really great! Just what I was looking for, especially because you only have to upload and alter the premade scripts.
    Simple to use, yet totally ingenious.

  15. Mekki on September 1, 2007 at 11:23 pm

    Great stuff.

    Easy to install and use. Basic and straightforward.

    Thanks for your efforts.

  16. Mekki on September 3, 2007 at 8:22 pm

    For those of you who were experiencing the “keeps loading the same image/page no matter what link I click” error, the problem for me was that the script does NOT support PHP version 5. Switching from PHP5 to PHP4 fixed the problem for me.

    Everything else works great.

    Cheers.

  17. AsraiLight on February 2, 2008 at 12:59 am

    Mekki, thank you! I was having the same problem with v1.2 of Comic Gallery…I changed my PHP to v4.4.7 and it worked! Thanks again for the tip! :D

  18. q-burger.com » Comic Gallery Software on April 14, 2008 at 6:16 am

    [...] Comic Gallery Comic Gallery Tutorial [...]

  19. designmeme.com Comic Gallery Tutorial | Design Meme - StartAid Reviews on April 24, 2008 at 11:46 pm

    Kramer auto Pingback[...] http://www.designmeme.com/2005/05/26/comic-gallery-tutorial   [...]

  20. Quinto Mundo • Ver Tópico - Melhores formatos e conceitos para webcomics on July 31, 2008 at 3:21 pm

    Kramer auto Pingback[...] dsartbr em Qui Jul 31, 2008 16:49 http://www.designmeme.com/2005/05/26/co … tutorial/FEITO O GALETO!Ou não?Exempro: http://www.realmofatland.com/ Daniel Pereira dos [...]