Hey everyone! I'm helping a friend by doing the layout and whatnot for his comic and have run into an issue on the archive page. Steam & Shadows - Archive
It looks alright, but I'm trying to get the image of the first page of each chapter to show up next to the Chapter title, description, and page list. So for each chapter, just 1 thumbnail picture. Not a picture for each page. Just to clarify.
I can get my test image to display where I want it, but I don't want to have to go in and update a new image link EVERYTIME he puts out a new chapter. I'm hoping someone knows a way to set up a looped piece that will display the first picture of each new chapter. Similar to how each time a new chapter or page is updated (ex: [v:l.chaptername]), the system knows to create a new heading automatically. I've browsed some of the coding help pieces and can't seem to find anything like this.
Yeah, that's a bit tricky. The actual comic image filenames aren't easily accessible.
Technically, I think it should probably be possible to do something with iframes to load the whole page (rather than just the image), but I haven't followed that path too far.
I settled for a compromise: when I start a new chapter, I upload a thumbnail of the first page with a filename that makes it easy to find (eg: /files/thumbnails/ch1.png), so the archive page code can be generic enough that you don't have to update it:
<!-- Page numbers within each chapter are generated
by CSS counter variables;
Chapter numbers for thumbnail image filenames are
<img src="/files/thumbnails/ch0.png" class="chthumb" />
<a href="[v:l.comicurl]" class="pagelink">, </a>
* Replace dummy thumbnail names.
var icons = document.querySelectorAll("img[src=\"/files/thumbnails/ch0.png\"]");
for (i = 0; i < icons.length; i++)
icons[i].src="/files/thumbnails/ch" + i + ".png";
I use CSS counters for page numbering because I prefer to number the pages within each chapter independently, rather than using the standard CF page numbers: