An Experimental Life

Note: Notice the yyyy-mm-dd format I use in the "comic for" field below. That's how we're going to tell Drupal to sort the comics (in a later step). Yes, there are other ways to do that, but this way is nice and neat. Also, depending on your theme and the width of your comics, uploading your comics may temporarily "break" your theme. Don't worry about it. If this happens, just take all the blocks out of one of your sidebars for now. Once you have everything else in place you can try out other themes and/or just commit to having either one or no sidebars.

Go to create content >> comic page, fill in whatever you want to name that day's comic.

Hit the "browse" button and navigate to the image you want to upload.

Then hit upload, and you should see a thumbnail of your image, like this:

Type anything you want in the body, or nothing at all. I'm a big fan of transcriptions, personally.

Now scroll down to Scheduling options and click on that field to expand it. If you want the comic to publish immediately, you can skip this step, but this is where you can set a future publication date For example, say you're going on vacation but want regular updates to continue while you're away. This little widget will save the day for you. If you want, you can set a comic to show as though it was published on a past date--This can be handy if you're migrating from another webcomic solution with a backlog of comics. Note that the published on field requires a time as well as a date.

Now, assuming you've been paying attention and have a few more comics to upload, instead of hitting save, hit "Save and create another."

You'll be sent directly back to the create page. If you don't have any more comics to upload, grab some other images for now. You can delete them later, but if you don't have a few comic pages created before you start the next step, you'll have no way to see whether things work. No need to go overboard--I recommend about five to finish getting things set up. Lather, rinse, repeat as needed.

When you look at one of the comic pages you've created, it should look something like this:

Congratulations. You've just uploaded your first few comics, Don't get too comfortable, though. We've got just a couple more steps to go through to make this a webcomic site.

Go to Administration >> Site building >> Custom pagers. None will be defined yet, so click the link that says, "Add a new custom pager."

Name your custom pager with whatever your comic name is, select whatever position you want for it--either above, below, or both (I like displaying it in both places)--and select "Comic Page," for the content type.

Scroll down and select the view you just created where it says, Use a view."

Scroll down some more and click "Reverse the list of nodes." This is so your most recent comic will show as the first thing people see on your comic page.

Hit "Save," and you'll be taken back to the Custom pagers list. Your custom pager is set up and will show in the list now, so you can move on to the next step.

Note: The version of the Custom Pagers module that I provided in the "What you'll need" section is already modified for traditional webcomic navigation. If you're using another version, you'll need to modify it.

There are, as of this writing, two oddities with the Custom Pagers module. One is that the .dev version works, but not the official release. The other oddity is that by default there are no first and last links. No idea why on either of these. I've attached the .dev version with the additional code, but just so you know what I've done so that you can do it too, once the official release becomes usable, see below.

Inside your sites/all/modules/custom_pagers directory, open the file named custom_pagers.module in a text editor and scroll down to find this code.

Replace this chunk of code with the following--Note that all I've done here is add the top line, for "first," and the bottom line for "last."

Good so far? Now from the same directory, open custom_pager.tpl.php and look for the following code:

Replace it with this code:

Again, note that all I've done is add code for the first and last links.

Lastly, in custom_pagers.css, style your pager. Here's the way mine is set up, but YMMV, and you may have to adjust it later:

You're almost done. Now it's time to make a few tweaks.

Things are still going to be a little wonky, so here are the finishing touches.

Go back to Views, find the view you just made in the list, and click edit. In the editing interface, click the display you created for that view earlier.

Under Basic settings where it says, "Row style:Fields," click on Fields, and in the form that appears below, change it from "fields" to "node," and hit update. Once you click the update button, you'll see some configuration options. Set to Full Node (as opposed to Teaser), and "Show comments." Again, hit the "Update default display" button.

Why didn't we set our display to nodes to begin with, you may ask? For some reason, custom views will only show up as an option in Custom pagers on a view with the row style set to fields, but once the pager is assigned, it will stay put even after changing the view row style to node. It took me quite a bit of time mucking about with things before I stumbled across this workaround, and I have no explanation why it works that way.

Now that you've updated your view, hit save. You're nearing the end now. Go to your menu administration page to your primary menu and activate the menu item you created earlier. The only other thing you really need to worry about is that ugly "submitted by" stuff at the top of each comic. If you want to get rid of that, change those settings for your theme in your admin >> themes >> configure page.

At this point, if you've done everything right, you'll see something like the image below when you click on the link for your comic.

(Of course, the "first" link won't show up on your first page, since you're already there, nor will the "last" link show on the most recent comic, for the same reason.)

Depending on your theme, you may need to play with the CSS some to get it to display exactly the way you want. If you're not seeing this, retrace your steps and see what you missed--Finding your mistakes and correcting them is a good way to learn what you're doing. If things are still wonky, post a comment here and I'll see how I can help.

You're all set up with the basics for now. In other tutorials we'll explore making admin easier, beefing up security, and tricking out your site in general. Congratulations, and happy webcomicing.

This shouldn't take you more than a minute or two.

Go to admin >> content management >> taxonomy >> Add vocabulary and create a vocabulary called Comics. Assign it to the content type you just created (Comic page). Make it required. Hit save.

After you save, you'll be sent back to a page where you'll see your vocabulary listed. Click "add term" to the right of your new vocabulary, and add your comic name. If you plan to run more than one comic from your site, create terms for those, too. Save, and you're done with this step.

(No illustration for setting up your taxonomy because if you've been following instructions you already know how to do this.)

Next, we're going to upload some comics.

We'll cover suggested sizes, scanning resolutions, etc., here, with a little bit of advice for people who--however talented they may be--don't have experience with comic layout. Art size and format Before you can do your art, of course, you have to choose a size and format. Do you want to do a three or four-panel-across single-row comic? A two-column, two row? A full comic book page? Maybe even a single-panel comic like The Far Side? There is no right or wrong answer here, and when we get into templates and scanning we'll talk about factors that might influence your final decisions, but in general you'll want to keep your art at or a little under 13 inches wide. Any larger and you run the risk of losing all that detail you so painstakingly included. If you find you cannot fit all your envisioned panels in a space that wide, consider a multi-row layout. It may help in choosing a format (if you haven't already) to take a few of your scripts and rough them out with circles and blobs and notes to see what format you think will best serve your needs and to get a good feel for how much room you will need for dialogue. Standard newspaper comic size is 13 inches wide by 4 inches high (this obviously gets shrunk down later), but you're not limited to that, especially on the web. As I said, much larger than 13 inches in your original art is probably a bad idea, but the exact proportions are less important now than they used to be. More and more comics, both on and off the web, are breaking the old rules. You will want to work with proportions that will be conducive to layouts in standard book formats, though, if you ever intend to publish your work on dead trees. Pay attention to the order in which characters appear in the frame, and how their placement relates to your planned dialogue. You won't always be able to place the characters in order in which they'll speak, and you don't want to force it, but it is a handy thing to do whenever practiceable. Different people have different processes for actually drawing their art. Some do everything digitally, but most people still draw by hand. You'll develop your own workflow, but here's an example one. (YMMV.) We draw BCK at about 10.5 wide by 4 inches high. Once the pencils are done, we go over them carefully with a Sakura Pigma Micron 02 (.30mm) drawing pen. Then we take a plastic eraser--NOT a rubber one--that you can buy at pretty much any office supply store, and erase the pencil lines. After erasing the pencils, we go back over those pen lines to make certain we darken any lines that may have been "grayed out" by the eraser, and to vary the thickness of various lines to add dimension. The main reason for the plastic eraser is that rubber ones tend to smear more. Go ahead and get a couple of comics drawn, but don't do too many yet, as you'll want to do a couple of tests to see how everything works together. If for some reason you have to redo your art, the less you have done, the less frustrating it will be. You can do your frame lines either by hand or later on the computer. We often do them in light pencil as a guide and erase them before scanning. Go ahead and scan the comics you've drawn at 600 DPI. No, you're not going to post at 600 DPI, but it will be much easier to make any adjustments you need at high resolution, and you'll want high-res copies if you ever decide to go to print, since while 72 DPI looks fine on a computer monitor, it looks horrible in print. If you're scanning line art, use grayscale as opposed to black and white or color, even if you plan to add color on the computer later. Some lines. despite your best efforts, will get a little smudged or grayed out, and you still want to capture those. Once you have two or three comics scanned in, open them in Photoshop (or Gimp, or whatever you're using), and make any adjustments you need to. For instance, with line art--especially if you were paying attention and scanned in grayscale--Open your levels control (You can use contrast and brightness, but levels gives you more control), and adjust things until your art is crisp, clean, and smudge-free. If you're doing any computer coloring, now is the time. (If you scanned in line art, you'll convert to CMYK or RGB first.) If you don't have frame lines drawn, create a transparent layer on top and use the pencil tool (or whatever other method you prefer) to make them now. Don't worry about perfection yet--This is just a test run. Once you've got all that done, save a copy, reduce the resolution to 72 DPI, then reduce the image size to whatever size you plan to post at. Does it still look good? If so, optimize it (If you're using Photoshop select "Save for web") to get the file size down as much as possible without making it look horrible. Make a note of the width and height in pixels. You'll need that info later. If you're going to post black and white line art or block color, you'll want to save in GIF or PNG8 format. If you're using a lot of shading and blending of colors, you'll want to save in JPG or PNG24. If you're happy with the results so far, it's time to build a template file. The template file you are about to create will be a huge time-saver later on. Move on to the next page to see how.

I know I've said it before, but it bears repeating: This tutorial assumes a basic working familiarity with a base installation of Drupal, as in you should already know how to install a module, how to assign roles and permissions, how to get around the admin section, how you prefer your comment settings, etc. It assumes no knowlege beyond that, though, so even if you've never created a new content type or built a custom View, you'll be fine here.

Additional note: Do not set your comic page content type to promote to the front page by default. You're not going to use the default front page for your comic, so there is no reason to. Plus, someday you may decide to do more than one comic, or use your default front page for something else, in which case you'd have to go through and demote all your comics.

Creating your Comic content type

Go to Content Management >> Content types >> Add content type.
Let's call our new content type Comic Page, since that's what it is, and give it a good machine-readable name, as well. Say, comic_page.

Some of the modules you've installed provide additional settings, so before you save, we'll set the necessary ones. First, click on the submissions settings link to expand that section and check "Submit again?"

You'll see two new options under Workflow settings, as well. Check the boxes to enable scheduled (un)publishing and Alter published on time.

Set everything else the way you normally would, and hit save. Your new content type should show in the list now.

On the Comic page line, click on "Manage Fields" to the far right. You'll see a list of existing fields (the default ones that Drupal defines) for your Comic page content type. At the bottom of this list you'll see a place to add new fields.

Give your new field the label of Comic image, and name the filefield itself comic_image, as shown below. The most important things to remember here are to set your data type to File and your widget type to Image. Click save.

On the next page you will want to change the Permitted upload extensions. The default is txt, but you want to upload images. You can either type in gif jpg jpeg png without the preceeding periods, exactly as I have it written here (In other words, png instead of .png), or do as I do and just blank it out.

While it isn't required, you probably should do something with your comic image file path to keep your files better organized. After three years of doing BCK, I had well over 700 comics all sitting in one directory. I still haven't gotten it cleaned up.

The settings here won't kick in until you create your comic taxonomy, but setting a path now will keep you from having to jump back and forth so much. This is how I would have done it to begin with if I were starting over, and how I plan to eventually restructure. I'd use the path: [vocab-raw]/[term-raw], and possibly refine that path even further.

There are a few more options you may want to look at in the global settings section at the bottom of the page. These are pretty much up to your preference. I generally make the comic image field required for comic pages to make sure I don't space out and end up skipping a step. As for how many comic images a single page holds, that is again up to you. I generally leave it set at one. If I want to display more than one at a time, I can do that without uploading a bunch to a single page.

I set List field to disabled, and description field to enabled. I never use it, but just in case.

Once you're done here, hit save, and you'll be taken back to the field listing page. You'll see that your Comic image field type shows up there now.

Now you'll set up one last field for more control over what order the comics will be displayed. There are other ways to do this, but trust me--It will make perfect sense later.

The process is similar to adding the Comic image field. Label this field Comic for, and name it comic_for. Set the type to Text and the widget to Text field.

As always, hit save.

Optional: If you want to publish several comic pages in one day and have them stay in sequence, you may want to create one additional field, identical to the "Comic for" field you just created, but name this one Time, and make it optional. This can be useful if you are participating in 24-hour comic day. (A day when many webcomicers create and post as many comics as possible in twenty-four hours. And making them in advance is cheating.) Unless you already know you're going to do this, don't worry about it yet. You can always add the "Time" field to your content type later if you want.

On the configuration page you are sent to when you hit save, make "Comic for" a required field, even if you didn't set the Comic image field to required. Leave everything else as it is and hit save.

Arranging your fields
Use the handles to drag the fields into the order you want them to show on the page, then hit save. I generally reccommend Title, Comic for, Comic Image, Body, and while I have my own preferences for the other stuff, arrange it as you see fit. Most of this will not be visible to the user--Only to you when you upload comics.

Once you have things arranged the way you want, hit save, then click on the Display Fields tab

I prefer to hide most of my labels in the Full node view. You may even want to hide the "Comic for" field. If you let it show, each comic will say "Comic for (date)" on it. Even with it hidden, though, we can still use it to sort. You can always come back and change these later if you want.

The one thing you will want to make sure of is that you select either "image" or "image linked to node" for comic image--What's the point of uploading them if no one can see them? It's also pointless to set Full node view to Image linked to node, since in full node view they're already at the node.

Hit save. If you like, you can set the RSS, Search, and Token options here, too, but odds are the defaults will be fine for now.

Aaaaaaand, you're done creating your custom content type.

If we stopped now, any and all content on your site would show up in your view, so we're going to add some filters. In the far right column, click on the plus sign next to Filters.

In the scrollable list under where it says, "Add filters," scroll down and click the checkboxes beside "Node: Published," and "Taxonomy: Term." Click "Add."

Click the "Yes" radio button that appears below and click update again.

In the settings controls that now appear, click the radio button for "is one of," and update. Next, settings for Vocabulary will appear. Select "Comic," and "Autocomplete." Click Update.

In the next set of options that appear, select "is one of," and type in the term you set in that vocabulary in the field to the right. Click Update.

Now we're going to rearrange the filters we just set. The reason? Every node filtered slows down your site just a tiny bit, so instead of having Drupal check for every published node and then for comics within that set, we want it to look for comics first, and then which ones are published. Scroll back up to the right colums where it says, "Filters," again. Click the button with the up and down arrows.

Below, where your filters appear, use the handles to rearrange the filters so that Taxonomy is first, and hit Update.

Now we need to tell Drupal how we want the comic pages sorted. The default would be by the order in which you enter them, but there will almost certainly come a day when you'll upload some out of order, or miss one and have to go back. This is what we created that comic order field for earlier. Click the plus sign beside "Sort criteria," in the far right column.

We are only going to set one criterion. In the "Groups," dropdown, , select, "Content: Comic for (field_comic_for)
Text - Appears in: Comic page." Click Add. In the radio buttons that appear now, click "Descending" for order and update again.

Just to get an idea of whether everything is set right before you hit save, scroll down to "Live Preview," further down the page. Select the name of the page display you've been working on and hit the "Preview" button.

You're done with the Views page for now--We'll revisit it later. Go to admin >> site configuration >> site information, and at the bottom of the page, change the field, "front page," to the path for your new view.

Now it's time to set up your actual navigation.

Again, remember that this is a tutorial on how to turn a working Drupal site into a webcomic site. You should already know how to do things like install modules, etc. Still, I'll give you a hint here--contrib mods do not go into yoursite/modules. They go into yoursite/sites/all/modules.

Obviously, you will need Drupal

And here are the contrib mods you will need:

Content Construction Kit (CCK)

FileField

ImageField

FileField Paths

Token

Scheduler

Views

Custom Pagers Use the version attached to this page, since as of this writing there is something wrong with the official release.

Submit Again

The below are not technically required, but I promise they will make your life easier.

Administration menu

Admin menu dropdown

Advanced help

Admin Role

Put all of these in sites/all/modules directory in your drupal directory and extract them, then go to your admin/modules page. Read both the online documentation and any readme files that come with them.

Enable the following:

Under CCK
Content
Filefield
Filefield Paths
Imagefield
Options Widgets
Text

Under Other
Advanced Help
Custom Pagers
Scheduler
Submit Again
Token

Under Views
Views
Views UI

(If you installed Admin Menu, Admin menu dropdown, and Admin role, enable those, too.)

Although the defaults may be okay with most of these, you should at least look at the configuration pages at the admin by module page. In particular, you may want to adjust the settings for admin menu so that it is shown by default and stays at the top of the page when you scroll down, and you will definitely want to configure the "admin role" module.

Again--and I cannot stress this enough--RTFM.

There is a second file attached below (in addition to the Custom Pager module). This is a visual aid so that you can see which sub-modules to enable under each module you've just installed.

This tutorial, at least for now, will just focus on getting a basic webcomic setup going. Later on, though, you may want to trick out your site. The easiest an most efficient way to add features while keeping everything integrated is to use a CMS.

Drupal is the premiere open source CMS (content management system) available. It is free, and has been around for ten years now, with the same person overseeing overall development. Among numerous other awards, Drupal has won the Packt Publishing Open Source CMS Awardsfor two years running, and CNet's Web Top 100 awards for three years running.

Beyond the basics, there are thousands of actively supported add-on modules to let users build anything from the most basic blog or forum site all the way on up to sophisticated ecommerce and wiki sites. It is the most versatile open-source CMS available. In fact, a partial list of those using Drupal for their sites includes Sony Music, MTV UK, Warner Brothers Records, the New York Observer, Popular Science... and the list goes on. Even The Webmaster Forums have switched to Drupal from vBulletin.

Here are just a few of the things you can do with Drupal and a few contrib mods (you by no means have to do all or any of them, of course--and this is barely scratching the surface of the possibilities.):

• Upload a bunch of comics ahead of time and set them to automatically publish themselves (or unpublish) on the dates and times you choose.
• Have character bios automatically link to and from every comic they appear in.
• Install a WYSIWYG editor for text spaces.
• Automatically create as many or as few different image sizes as you want when you upload, and have the site automatically know where to display each of them.
• Customize views (and have multiple views) of any kind of content. Automatically.
• Use a single login for users to comment on your comic, post to your forums, etc., instead of running a separate piece of software for everything.
• Make your site multi-lingual.
• If you want your users to be able to submit fan art, you can set it up so they can upload it at the touch of a button, instead of having them upload it to someplace and linking to it.
• Set up as coarse or as fine-grained permissions as you like. For example, maybe you only want to let trusted users upload fan art--No problem. Or you want to let someone administer one thing on the site without giving them access to anything else. Also no problem. Set up a user role with the permissions you want, and click check boxes on a list of users to assign them to that role. You can even set things up so that users are automatically promoted when they fulfill certain requirements.
• Just about anything you can do with phpBB, WordPress, Topsites software, MediaWiki, or ecommerce software, but all in one.
• Let users vote content up or down. For instance, if you want to have a reader-judged fan art contest, there are a number of contrib mods that will allow you to re-order the entries as the votes come in.
• Look for contrib mods in an organized fashion at Drupal.org, view issue ques and usage statistics, etc., to help you decide which module( you want to use. There are multiple modules for most situations. For example, there are several well-maintained image handling modules, and reading the descriptions gives you a pretty good idea of which will work best for you.
• Let users be notified by RSS, email, Instant Messenger, or whatever they want, when content they subscribe to updates.
• Basically, if you can imagine your website doing it, you can probably make it happen with Drupal.

Right now you have no really good way of showing your comics. If we had clicked the box on the create content form that said "promote to front page, they'd have shown up there, but don't worry--We're gong to set things up so that they do.

Go to Administration >> Site building >> Views. You'll see a list of various views that are, as of now, grayed out and disabled. That's okay. Later on you'll want to go through the "getting started" page, but for now I'm just going to take you through the steps to build your comic view. So click "Add."

Note: Pretty much any time you change something and an "update" button appears, click it. Not save--update. Feel free to save now and again to be safe, but until you've hit the update button, clicking save won't actually save your changes. This is to streamline the process so that you're not waiting for a save at every single one of a couple of dozen steps.When you save, make sure that before you continue editing, that you select the "Display" (covered below) that you're building (as opposed to default display).

We're going to give our new view the View name of comicnav_view, the View description name of Comic Navigation View, and make sure that "Node" is selected (which it should be by default).

Now click "Next." You'll be taken to a page at which you have the option to create a new display for your view.

Page should be selected by default, but make sure of that, and click "Add display." At this point, you should see something that looks like the picture below.

As with everything else, we'll go through this step by step, so even without illustrations you should be able to follow along. Just to make things more clear, though, I've included a screen shot below with all the areas that we're going to change highlighted. Note: Make sure that "Page" display is selected while you're editing.

For a little while you'll see several errors lower down on the page, but don't worry about those. We're about to fix them.

Under "Basic settings," where it says, "Name: Page," click on "page." The field to enter your page name will appear underneath the section shown above, as will all the other settings options and fields we'll go through. (Now that you know this, and given the highlighted page above, I don't think we need an illustration for every single field and setting.)

Change "Page" to whatever you want and hit "Update." For my comic, I called it BCK main page. This is only to help you make sure you're choosing the right display in the admin interface.

Where it says "Title: None," It's up to you what you want to do. If you set a title, say your comic name, it will show on all your comic pages. Go ahead and change it if you think you might want that. You can always change it back later if you don't like the way it looks. If you do change it, remember to hit Update.

Note: For many settings, the Update button will read "Update default display," or "Add,"(Which I'll just call Update for brevity), and another button will appear to the upper left of the settings fields section that says, "Override." Don't touch the "Override" button while we're doing this--Just use the Update button.

Now click up above where it says, "Items to display: 10." Scroll down again until you see something like the picture below. Change the 10 to 1. This will set things up so that your comics will display one to a page. Hit Update. Remember, we're not worried about any errors we see yet.

Now go to Page Settings, and where it says, "Path: None," click None and enter a path in the field that appears below. Change it to something like, view/mycomicname (with the actual name of your comic in place of "yourcomicname." No spaces, no starting or trailing slashes, and in all lower case. If it's a long name, truncate it.)

Click on "Menu: No menu." Using the fields and radio buttons that appear below, set this up as a normal menu item with your comic name for the title (or if you like, just put "comic" if you're only running one comic on your site). Description is optional. Anything you enter in Description will pop up when someone hovers over the link. Choose Primary Links in the dropdown, since you'll probably want the link to your comic at the top of the page. You can set the menu item weight either here, or do it later through the normal menu administration page.

Notice that we've skipped over "Row style: Fields," under Basic Settings, even though I have it highlighted above. This is intentional. We'll deal with it later.

Now in the center column where it says Fields, click the plus sign. Note: Remember that this is not the same as "Row Style: Fields" under Basic Settings in the first column.

From the dropdown menu that appears, select "Content: Comic image (field_comic_image)." We're going to change this later for reasons I'll explain when it's time to do so. When you hit update here, you will see come configuration options. Go down to "Format," select "Image," and hit update again.