Design Meme

Do you create a daily online comic, or post any other type of daily image file that you’d like to share with others? If you do, and you’d like people to be able to include your content on their webpages, the following script will help you get started.

To work properly, you’ll need to make sure you are saving your images in the same location each day. You should also make sure you use the same height and width for each image. If you are asking people to include your work on their webpages, you should give them an idea of how best to design around your images. If they are changing size each day, you may find people won’t want to include them as it interferes with their page designs.

Most importantly will be to adhere to the following naming scheme for your files. Year followed by month then date. For example, an image being syndicated on August 18th, 2001 would be named 20010818.gif or 20010818.jpg

If you miss a day, or if someone uses your script before you’ve had a chance to update your content, the previous day’s image will be displayed.

The Javascript Code for a Syndicated Daily Comic

Here is an example of a javascript file used to syndicate a daily webcomic. If you want to use this code, copy it into a text editor and make sure to change the variables where noted in the comments. Save the file as something like: dailycomic.js and FTP it to your web server.

// Daily comics should be saved in the format 20010818.gif or 20010818.jpg
// The variables below should be set to reflect the comic being syndicated.
var comicName = "Designmeme - The Daily Comic Strip";
var comicDir = "http://www.designmeme.com/comics/daily/images/";
var noImage = "http://www.designmeme.com/comics/images/noupdate.gif"; // Displays if no updates for 2 days
var comicUrl = "http://www.designmeme.com/comics/daily/";
var comicWidth = "652";
var comicHeight = "253";
var comicFormat = "gif";
// The following code should only be modified where specified
function lastComic() {
var prevDate = new Date(date - 24*60*60*1000);
var d = prevDate.getDate();
var day = (d < 10) ? '0' + d : d;
var m = prevDate.getMonth() + 1;
var month = (m < 10) ? '0' + m : m;
var yy = prevDate.getYear()
var year = (yy < 1000) ? yy + 1900 : yy;
// If you change IMG NAME below, you will need to change OnlineComic in the next line
document.images.OnlineComic.src = comicDir + year + month + day + '.' + comicFormat;
}
var date = new Date();
var d = date.getDate();
var day = (d < 10) ? '0' + d : d;
var m = date.getMonth() + 1;
var month = (yy < 1000) ? yy + 1900 : yy;
document.write('<a href="' + comicUrl + '">');
// You should change the IMG NAME below if you want to allow multiple syndicated comics on a single webpage
document.write('<IMG NAME="OnlineComic" ALT="' + comicName + '" BORDER=0 SRC="' + comicDir + year + month
+ day + '.' + comicFormat + '" WIDTH="' + comicWidth + '" HEIGHT="' + comicHeight + '" onError="lastComic()">');
// You might need to make sure the code after the comment above is all on a single line
document.write('</a>');

The code you’ll give to people to put into the HTML on their webpages will look like this:

<script language="javascript" src="yoururl/dailycomic.js"></script>