Rarebit is an open-source HTML/JavaScript webcomics template, which can be downloaded or viewed in a live demo here. Its basic premise is to allow authors to manage all pages of a comic within a single HTML file using JavaScript - pages are image files stored in a single subdirectory (labelled "pg1.jpg", "pg2.jpg" and so on), and are displayed by calling the function writePage.
I would like to modify Rarebit so that I can use it to display a multimedia webcomic—where some pages may include text in HTML elements after or between images, some pages may include or be videos, etc. I'm lost on how to do this. The template already includes support for multiple images to a single page - labelled "pg3_1.jpg", "pg3_2.jpg", so on and so forth.
Here is the function I'm looking at:
function writePage() {
let partExtension = ""; // Part extension to add to the URL if the image is split into multiple parts
let altText = ""; // Variable for the alt text
let path = (folder != "" ? folder + "/" : "") + image + pg + partExtension + "." + ext; //path for your comics made out of variables strung together
let page = ``;
if (pgData.length < pg) { // If the array is blank or not long enough to have an entry for this page
// Debug
console.log("page code to insert - " + page);
console.log("alt text to print - " + altText);
//
page = `<img alt="` + altText + `" title="` + altText + `" src="` + path + `" />`;
return page;
} else if (pgData.length >= pg) { // If the array is not blank, and if it's at least long enough to have an entry for the current page
altText = pgData[pg - 1].altText; // Set the alt text to the text defined in the array
if (pgData[pg-1].imageFiles > 1) { //if there’s more than one page segment
for (let i = 1; i < pgData[pg-1].imageFiles+1; i++) { // 'for' loop to put all the parts of the image on the webpage
partExtension = imgPart + i.toString();
path = (folder != "" ? folder + "/" : "") + image + pg + partExtension + "." + ext; // Reinitialise path (there has to be a less dumb way to do this)
if (i > 1) {page += `<br/>`} // Add a line break
page += `<img alt="` + altText + `" title="` + altText + `" src="` + path + `" />`; //add page segment
}
} else {
page = `<img alt="` + altText + `" title="` + altText + `" src="` + path + `" />`;
}
// Debug
console.log("page code to insert - " + page);
console.log("alt text to print - " + altText);
//
return page;
}
}
I didn't truly expect this to work, but I did immediately try including some other types of files in the normal "pg#.extension" format, like .gif, .mp4, and even .txt files. These all display as broken image icons.
In the comic settings JavaScript file it declares the constant const ext = "jpg"; //file extension of your comic pages ; if this is set to, for example, "gif" instead of "jpg", pages ending in .gif display and .jpgs don't. Ideally I would be able to declare multiple constants, and have been reading Stack Overflow answers about that (such as this one), but am struggling to understand them.
If I can figure out how to declare multiple constants for const ext= , my real question is how to include HTML elements after or between images within Rarebit.
I am fairly new to JavaScript and have only learned by doing and building, not by any formal education, so I apologize if I've been unclear or used the wrong words. I can read JavaScript code and understand what it does on a very basic level, but I'm more fluent in HTML/CSS, and don't know what I'm doing when writing it.
You can't specify more than one image extension as it is. In comic-settings.js there is a pgData object which defines some of the data for all the pages. You could add a new property to each object of pgData, "content", which would be a string containing the html content for that page. Then you would have to rewrite writePage to display "content" instead of the thing it's doing with images. Your images would then be <img> tags inside the new content properties so you could specify whatever filenames/extensions you like.