Coding Sweet Navigation Menus with SomeryC

When many artists publish comics, they worry more about the content itself than the way people read it; however, if your site's navigation is clunky and unintuitive, readers can become frustrated, flaccid and dismayed even if your comic is up to snuff. This tutorial is designed to teach the novice how to use the functions available in SomeryC to create the perfect navigation menu. If you don't already have SomeryC, go ahead and download it now to follow along with this tutorial.

Basic Text Navigation

Open up the "index.php" file. This is your default template, and is loaded every time a comic is viewed. This file defines the look and feel of every page of your site, making it a very important file.

Scroll down and look for a block of code that looks something like this:

<ul>
  <li><?php firstPost("First","");?></li>
  <li><?php previousPost("Previous","No Older");?></li>
  <li><?php dropArchive("---Archive---");?></li>
  <li><?php nextPost("Next","No Newer");?></li>
  <li><?php lastPost("Last","");?></li>
</ul>

This is the default navigation menu that comes with SomeryC. It is very basic, but it does it's job very well. It creates four links and a drop-box, and they function exactly as expected. What if, however, your comic is about time travel and you want a more flavorful navigation system? It is easy to change the look and feel of the page when using the SomeryC functions: Simply modify the words that it displays to the user!

<li><?php firstPost("The Beginning of Time","");?></li>
<li><?php previousPost("To The Past!","");?></li>
<li><?php dropArchive("---Chronolog---");?></li>
<li><?php nextPost("To The Future!","");?></li>
<li><?php lastPost("The End of Time","");?></li>

So we've changed some words. Big deal. Let's talk a bit more about what is really going on.

I Know the Breakdown

If we dissect each line, we can find out more about them, so let's do it.

<ul>

This line begins an unordered list. Since a navigation menu is a list of links, it only seems natural to put them in a list, right?

<li><?php firstPost("First","");?></li>

We can break this down further.

<li> ... </li>

These are list item tags and should surround each item in the list.

<?php ... ?>

These tags define a block of PHP code. Everything inside these tags will be executed by the server when the page is loaded, so they are useful for dynamic elements on the page (like comic title, comic number, et cetera).

firstPost("First","");

Now we are getting somewhere. This is a PHP function, namely the one that creates a link which takes the user to the first post in the comic. The function takes two arguments (words) and uses them to generate a link.

firstPost("argument1", "argument2");

Argument1 is the link text when the link is active (when it is possible to go to the first post). Argument2 is the text when the link is inactive (when you are already at the first post). You could put something like this:

firstPost("Go to first post", "Already at first post");

This will make the link say "Go to first post" when the user is not at the first post and "Already at first post" when the user is at the first post. Simple? Great. Let's get a bit more advanced.

Navigation With Images

When I said, "Let's get a bit more advanced," I wasn't serious. This is going to be just as easy as before.

What if we want a picture of a silver unicorn to be the link to the first post and once there, it is replaced with a picture of Gary Coleman giving two thumbs down? First, you are going to need two images (we will use "silverunicorn.png" and "garycoleman.png" as our images). Upload them to your server wherever you wish (I like to create a folder just for site images I call "images") and make sure you know where they are ("/images/silverunicorn.png" and "/images/garycoleman.png").

Remember when we talked about the arguments and how they were just text? Well, HTML is just text, too. So, let's throw some of that in there.

<li>
<?php
firstPost(
  "<img src=\"/images/silverunicorn.png\" alt=\"first\" />",
  "<img src=\"/images/garycoleman.png\" alt=\"at first\" />"
);
?> </li>

...wow. That was easy, huh? Notice that there are forward slashes (\) in front of the inner double-quotes ("). Why? If you didn't escape them with the forward slash, then the function would think the string was over. Now, what if you wanted to make a larger image into a link? Say, we want to turn the actual comic into a clickable link to go to the next comic. What should we do?

The Comic Knows the Way

Since the comic is also a function, it's a bit trickier than just replacing the word "next" with an image. Yes, you guessed it: We have to replace it with a function.

Wait, a function within a function!? Is that even possible!?

Yes.

<?php nextPost(comic(), comic()); ?>

Yeah, this stuff is rocket science. Notice I dropped the list item tags. The comic shouldn't be in a list, so I figured we didn't need them. What this code does is it displays the comic if there is a newer comic and displays the comic when it is the newest comic.

Wriggity Wrap-up

Armed with the simple knowledge of arguments and how to win them, it is easy to customize your web comic however you wish. If you want to learn more about the functions in SomeryC, or just what the arguments do, look at the "FUNCTIONS.txt" file that came with the software or ask over at the SomeryC Headquarters.