stripShow
version 1.6.1 by Brad Hawkins
While this software has been tested to the extent of my abilities, as with any WordPress plugin, you should back up your WordPress database before installing, just in case it destroys you and everything you hold dear.
Table of Contents
- About stripShow
- Features
- Installation
- Adding Comics
- The Theme
- Storylines
- Transcripts
- Changelog
- Support and Help
stripShow is a plugin for WordPress blogging software, one of the most popular blogging packages in the world. This documentation assumes that you are familiar with how to set up a working WordPress installation (blog). If not, WordPress's website has some very good documentation.
The purpose of stripShow is to make simpler the use of WordPress as a webcomics automation service. The goal is to provide easy navigation between comics, as well as a full-featured non-comic blog using the same WordPress database.
stripShow grew out of modifications I made to Tyler Martin's ComicPress, which is a theme-only addition to WordPress. Tyler's method of arranging comics and blogs differed from my needs, however, with one category dedicated to all blog posts that weren't comics, and all other categories assigned to comics. This is the reverse of what I wanted, so I started hacking ComicPress to suit my needs. This plugin grew out of those hacks.
- Supports GIF, JPG, PNG, and even HTML and Flash (SVG) files as comics.
- Comic files can be named in a date format of your choosing.
- Supports either stripShow-style categories (one category for comics, all others are blog posts) or ComicPress-style categories (one category for blog posts, all others are comics).
- Template tags for showing first and last comic in an archive.
- Bulk-import of existing comics files into your Wordpress blog.
- Comics appear in RSS2 feeds of your blog.
- Support for nested storylines
- Storyline dropdown menu
- A working installation of WordPress. stripShow has not been tested with WordPress versions lower than 2.2.
- MySQL 4.1 or later
These instructions assume you have a working WordPress installation already. Installing and configuring WordPress is beyond the scope of this document.
- If you're upgrading from a previous version of stripShow, deactivate the plugin in the Plugins pane of your WordPress administration page.
- Unpack the stripShow archive into the Wordpress root folder. This is the folder in which all the files and folders beginning with wp- are kept. Unpacking the archive here will put the stripshow.php plugin and the stripshow theme folder into the proper directories.
NOTE: This behavior happens when the archive is unzipped using the command line, which on Unix and Mac machines will not overwrite the wp-content folder (I have no idea what happens under Windows)... it will just put the right files in the right place. If you use a GUI to unzip the file, you may want to unzip it somewhere else and move the files into themes and plugins manually
- Create a folder, off of the WordPress root, that will hold your comics. Most people call the folder comics, but you can call it whatever you like.
- If you plan to customize the stripShow theme (and I recommend that you do -- it's very, very ugly), then I suggest renaming the theme. To do so, rename the stripshow directory to a name of your liking, and edit the theme name in style.css within. This way, when new versions of stripShow are released, the default theme won't destroy the changes you've made to yours.
- Activate the stripShow plugin from the Plugins pane of your WordPress admin page.
- Navigate to the Presentation screen, and set your current theme to stripShow, or whatever you renamed the theme to in step 4.
- Navigate to Options->StripShow. Here you will find the following options:
-
- Comics directory
- This is the folder, relative to the WordPress root, that your comic files are stored in. It's comics by default, but you can change this to whatever you named your folder in step 3.
-
- Date format
- There are many ways to name your comics files, and stripShow hopes to accommodate most of them. This field is the format for dates in your comic filenames, using the PHP date format.
For example, if your comic for April 1, 2007 is named "20070401.gif" then this field should read "Ymd" and if it's named "2007-04-01.gif" then the field should read "Y-m-d".
-
- Comics category
- This is the WordPress category that all your comics are stored in. If you are using "ComicPress mode," (see below) then this is merely the category that automatically-imported comics will be filed in.
-
- Non-comics category
- If you are using "ComicPress mode," then this is the WordPress category which stores all your non-comic blog posts.
-
- Category mode
- This option selects the "operating mode" of stripShow. The only difference between the two modes is the way stripShow regards categories. The two modes are:
- Multiple-category mode - This is the mode familiar to users of ComicPress and is included here to support sites that have been migrated from that software. One category is designated as "non-comic" (blog posts), and all other categories are considered to contain nothing but comics.
- Single-category mode - This is stripShow's native and default mode -- one category is designated as being for comics, the others are all for blog posts.
- Once these options are set to your liking, navigate to your main WordPress page -- your system is now ready to add comics, if you haven't already got some.
- (OPTIONAL) If you haven't already got some, stripShow comes with a few example comics in the folder called comics. If you wish to see these, move that folder into your WordPress root.
The instructions are the same as for installing a new installation, but remember to disable the StripShow plugin from Wordpress before installing. Then you can activate the plugin once the stripshow.php plugin is in place.
If you are just switching to WordPress from another webcomics-automation package, and already have a number of comics in your archive, then manually making blog entries for each comic can be tedious. For this reason, stripShow includes a function to automatically import any comics files it finds in your Comics Directory.
Please take note of the following limitations:
- At present, the auto-import feature can only recognize files in the following formats: YYYY-MM-DD and YYYYMMDD. (It will, however, recognize files that begin with one of these date forms, but have addition text thereafter, like "2007-04-01-april-fool.gif")
- At present, the auto-import feature will only recognize files with the extensions GIF, JPG, PNG, HTML, or TXT. (these extensions are not case-sensitive.)
- The titles of all the bulk-imported comics will be similar. For instance, the comic for 2007-04-01 will be titled "Comic for Sunday, April 1, 2007". The slug for that comic will be "2007-04-01" and the content of the post will read "This is the comic for Sunday, April 1, 2007." Of course, these can be edited after the fact.
Adding comics to stripShow is a two-part process. First, you must put a comic image file in whatever directory you've specified for comics in the Options window. It's most common to use an FTP program to do this.
The second part of the process is creating a blog post, using the category you specified as being for comics. If you are, like a good webcomics artist, uploading your strip ahead of time, you can set the timestamp of the blog post to a time in the future (this is a WordPress feature) and the comic won't show up until that time.
The stripShow default theme is based upon ComicPress 2.0beta, and, with the changes I made, is currently pretty ugly. It should be changed in the manner that you see fit to make it appear as you would like.
stripShow makes use of template tags (similar to WordPress's) to access functions of the plugin. These tags can be put in your theme files, and in theory should be able to be placed anywhere.
- show_comic()
- This tag displays the comic for the date being viewed. I have placed this tag in index.php and single.php
- is_comic()
- A conditional tag returning TRUE if the current entry being displayed is a comic, and FALSE if it is not. I like to use this tag to wrap all the navigation functions in the sidebar, which are meaningless if the reader is reading a non-comic page (such as an About page for instance), so they don't appear.
- first_comic(link text, title text (optional), always (optional))
- Provides a link to the first comic in your archive. This link will not be displayed if you are already at the first comic. This tag takes one argument, which is the text you want to display as the link (this can also be any HTML, such as an <img> tag, which is what I used in the default theme). The title text argument provides the text that shows up as a tooltip (via the HTML TITLE argument for the <img> tag) when the reader mouses over the comic.The always argument will force the link to display whether the reader is viewing the last comic or not.
- previous_comic(link text, title text (optional), always (optional))
- Provides a link to the comic immediately preceding the one you're viewing. This link will not be displayed if you are already at the first comic. This tag takes one argument, which is the text you want to display as the link (this can also be any HTML, such as an <img> tag, which is what I used in the default theme). The title text argument provides the text that shows up as a tooltip (via the HTML TITLE argument for the <img> tag) when the reader mouses over the comic.The always argument will force the link to display whether the reader is viewing the last comic or not.
- next_comic(link text, title text (optional), always (optional))
- Provides a link to the comic immediately following the one you're viewing. This link will not be displayed if you are already at the last comic. This tag takes one argument, which is the text you want to display as the link (this can also be any HTML, such as an <img> tag, which is what I used in the default theme). The title text argument provides the text that shows up as a tooltip (via the HTML TITLE argument for the <img> tag) when the reader mouses over the comic.The always argument will force the link to display whether the reader is viewing the last comic or not.
- last_comic(link text, title text (optional), always (optional),absolute (optional))
- Provides a link to your index page. This link will not be displayed if you are already at the last comic. The first argument for this tag is the text you want to display as the link (this can also be any HTML, such as an <img> tag, which is what I used in the default theme). In addition, this particular tag takes two optional boolean arguments -- the absolute argument will make the link point to a permalink rather than the index page. The title text argument provides the text that shows up as a tooltip (via the HTML TITLE argument for the <img> tag) when the reader mouses over the comic. The always argument will force the link to display whether the reader is viewing the last comic or not.
- first_comic_url(),previous_comic_url(),next_comic_url(),last_comic_url()
- If you'd like to write your own PHP functions that use the addresses of the first comic, next comic, etc, then use these functions. They just return the URL of the comic in question, in absolute format (including http://), for use in PHP commands.
- random_comic_link(link text)
- This displays a link to a randomly-chosen comic.
- storyline_dropdown()
- Displays a drop-down menu of all storylines.
- the_story()
- Displays the name of the current storyline.
- story_part()
- Displays the current part of the current story. This is returned as a number.
- story_parts()
- Display the number of parts in the current story. Used in concert with "story_part()," above, can be used to display "Part 1 of 5" etc. If the current story doesn't have an ending (for instance, if it's an ongoing, not-yet-complete story), then a question mark is returned, as in "Part 1 of ?"
- get_current_comic_blog()
- To display the blog entry associated with a particular comic, put this before the Loop on your index.php page. This acts much like wp_query() but unlike that command, won't mess up the other tags on the page. It really only needs to be on index.php -- the other pages do fine without it.
- get_noncomic_posts()
- You can put this tag on your index.php page, and it will basically run a Wordpress query for non-comic blog posts, which you can then access using a regular loop.
- end_noncomic_posts()
- If you choose to display recent non-comic blog posts on your page, you must follow up that loop with end_noncomic_posts(), or any template tags you use thereafter, like comic navigation links, will be all wrong.
- recent_comics(number, before, after)
- Shows a list of links to the number most recent comics (defaults to 5). If you enter values for before and after, that text will be put before and after each link (useful for wrapping links in things like <li> tags).
- recent_noncomics(number, before, after)
- Same as recent_comics(), but shows the most recent non-comic blog posts instead
stripShow 1.0 adds the ability to group comics together in what we call storylines. stripShow allows storylines to be nested inside one another.
For example, you might choose to group your stories into volumes, or chapters. Your stories might be organized in a tree like the following:
- Volume 1: The Early Life of Vito Corleone
- Vito's life in Italy
- Vito as a young man in New York
- Vito becomes a don
- Volume 2: The Mob War
- Vito stands against Tattaglia
- Michael's revenge
- Michael in Sicily
- Michael takes power
You get the idea. You can have as many nested stories as you want.
After installing stripShow, you will have a new option in the Manage menu in your WordPress administration page. This option, Storylines, allows you to add or edit storylines. (At present, you can't delete storylines using this interface. But all aspects of a storyline can be changed, and the order in which storylines are entered does not matter.)
To create a storyline, enter a name and start date for that storyline. If this storyline is to be nested within another storyline, then that storyline can be selected as your new storyline's parent. Then hit "Update" -- your new storyline appears in the list below.
Only start dates are entered manually -- end dates for storylines are calculated automatically based on other stories in the list.
Below the entry fields which are used to add a storyline is a list of all current storylines. You can select Edit on the line containing a storyline to edit it. The information to edit appears above. Press Add when you've made your changes.
Also on the line containing the storyline's name is a link to delete the storyline. Be careful with this, as deleting a storyline will delete all of the storylines nested within it as well.
Note that adding and deleting storylines do not affect your comic strips in any way.
So you've got a big archive of comics, containing some of the wittiest, most profound dialogue known to man. But you're never going to find that dialogue by searching in Google, since your dialogue is trapped in GIFs and JPEG files. You can't search an image.
That's where transcripts come in. As of stripShow 1.5, you have the option of putting the strip's dialogue (and any other text you'd like) in the body of the entry, and search engines will be able to access it just like any other Wordpress blog text. However, stripShow includes some template tags which determine how this information is shown to actual readers -- it can be hidden entirely, or shown in a format of your choosing, or both.
To add a transcript to your blog post, simply type whatever text you normally would into the blog entry, then add your transcript in the following format:
{{transcript}}
{{character=Character 1}}Hey, how's it going?{{/character}}
{{character=Character 2}}Hey, what's up?{{/character}}
{{/transcript}}
As you can see, two tags are used in the above example: {{transcript}} and {{character}}. The closing tags are not optional, nor is the equals sign after "character." However, you do not have to use {{character}} -- you can use anything you like, like "soundeffect" for example. {{character}} is a special tag that stripShow knows. When it finds a {{character}} tag, whatever follows the equal sign is printed as the character's name, and it's followed by a colon.
| Character 1: | Hey, how's it going? |
| Character 2: | Hey, what's up? |
In addition to tags that "belong" to a character, you can make tags that don't. For instance:
{{description}}The old house on the hill is dark, run-down, and foreboding.{{/description}}
How these transcripts appear on your actual pages is determined by template tags. stripShow has the following tags that relate to transcript:
- has_transcript()
- A conditional tag returning true if there is a transcript associated with this comic, and false if not. In the example theme, I use this tag to determine whether to show the other tags.
- the_transcript(style)
- Shows the transcript. The single optional parameter passed to the function can be "table" to put the resulting transcript in a table, or "css" to put the transcript inside <span> and <div> tags. The exact nature of these tags will be described below. The default is table.
- transcript_toggler(hidden or shown)
- Displays a little clickable link saying "Transcript" with a cute little disclosure triangle. The reader clicks the link, the transcript appears. By default, the transcript starts off hidden, unless you specify "shown" as a parameter to this function.
When a transcript is shown to the reader, stripShow marks it up in a way that can be easily formatted using stylesheets. There are two options for formatting: table and css.
Let's take a look at an example. Here's some transcript code, like you might put in your blog post for a comic:
{{transcript}}
{{character=Dracula}}Good evening, my dear...{{/character}}
{{character=IRS Auditor}}Good evening, Count... now, about your 2006 tax return...{{/character}}
{{description=}}Dracula bites the Auditor on the neck.{{/description}}
{{character=IRS Auditor}}Hey! I'm supposed to be the one sucking YOUR blood!{{/character}}
{{/transcript}}
Table style
When table is selected as the transcript style (it is the default), then a simple table is created, with one column for character names and one column for dialogue. Each tag in the table has a class parameter, as you can see from this code:
<table cellpadding="0" cellspacing="0" border="0" class="transcript" id="transcript_2007-04-02" style="display:none;">
<tr class="transcript_line">
<td class="transcript_character">Dracula:</td>
<td class="transcript_dialogue">Good evening, my dear...</td>
</tr>
<tr class="transcript_line">
<td class="transcript_character">IRS Auditor:</td>
<td class="transcript_dialogue">Good evening, Count... now, about your 2006 tax return...</td>
</tr>
<tr class="transcript_line">
<td class="transcript_description" colspan="2">Dracula bites the Auditor on the neck.</td>
</tr>
<tr class="transcript_line">
<td class="transcript_character">IRS Auditor:</td>
<td class="transcript_dialogue">Hey! I'm supposed to be the one sucking YOUR blood!</td>
</tr>
</table>
As you can see, the table itself is given a class of transcript. Each row in the table is given a class of transcript_line. The names of characters are given the class transcript_character and their dialogue is given a class of transcript_dialogue. Description is given the class transcript_description, but I'll let you in on a secret. You can substitute any word you want for "description" in the original transcript tags (like {{sfx=}}Boom!{{/sfx}}) and whatever you put in there will also be used as a class (in the aforementioned example, transcript_sfx).
The reason you see display:none in the <table> tag above is that, by default, transcripts are hidden from view. They can still be found by search engines, however. Usually, you'll want to put the transcript_toggler() tag above the transcript so people can choose to show or hide it.
CSS style
In addition to laying out your transcript in a table, you can use the CSS method: divs and spans. This is the same transcript as above, this time in div style:
<div class="transcript" id="transcript_2007-04-02" style="display:none;">
<div class="transcript_line">
<span class="transcript_character">Dracula:</span><span class="transcript_dialogue">Good evening, my dear...</span>
</div>
<div class="transcript_line">
<span class="transcript_character">IRS Auditor:</span><span class="transcript_dialogue">Good evening, Count... now, about your 2006 tax return...</span>
</div>
<div class="transcript_line">
<span class="transcript_description">Dracula bites the Auditor on the neck.</span>
</div>
<div class="transcript_line">
<span class="transcript_character">IRS Auditor:</span><span class="transcript_dialogue">Hey! I'm supposed to be the one sucking YOUR blood!</span>
</div>
See? The CSS classes are just the same as they are for the table style. It's just made up of divs and spans, is all.
- 1.6.1
-
- Added the get_random_comic() tag.
- Rewrote transcript code to be more tolerant of whitespace. In addition, equals sign is no longer required for non-character transcript tags.
- 1.6
-
- Added optional parameter to all navigation tags to provide text for the <title> tags that are now part of those elements.
- Added optional parameter to all navigation links to tell the system to display them whether appropriate or not.
- Added optional parameter to last_comic() to allow users to choose whether to direct to a permalink or to the index page
- Improved XHTML 1.0 Strict compatiblity
- Fixed bug where comment link was not shown on index page
- Fixed bug where same blog entries were shown on every page when linked from index page
- Current comic now has alt text encoded as HTML entities for validation
- Overhauled storyline code to only do one MySQL query and to speed up operations. Previously, things got seriously bogged down the more stories and strips you had in your archive.
- 1.5
-
- Added transcript feature
- Added support for WordPress 2.3
- Various bug fixes which I will try to keep better track of in the future.
I'm looking for feedback on this software. Any questions or problems, please contact me at my stripShow Support Forum.