Comic Fury Webcomic Hosting - Adding Chapter Images in Archive

You are not logged in. Log in, Register, More info
Forum > Layouts, HTML, CSS & Javascript > Adding Chapter Images in Archive
Pages: [1]

"Adding Chapter Images in Archive", 11 days ago, 12:49 AM #1
gallopingcowgirl

User avatar
Posts: 2
Registration date: 30th Mar 2017
Location: USA
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.

Anyone have any advice?
10 days ago, 6:33 AM #2
coldreave

User avatar
Posts: 72
Registration date: 7th Sep 2016
Location: The Fuuuture!
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:

[c:!ischapterarchive]		
<table >
  <!-- Page numbers within each chapter are generated 
        by CSS counter variables; 
       Chapter numbers for thumbnail image filenames are 
        generated by the javascript function below.
      -->
  <tr> 
      <td> 
 [l:chapteredarchive] 
    [c:l.newchapter]
      </td>
  </tr>
  <tr>
      <td>
        <img src="/files/thumbnails/ch0.png" class="chthumb" />
      </td>
      <td>
        <h3>[v:l.chaptername]</h3>
	[c:l.chapterdescription]
	  <p>[v:l.chapterdescription]</p>
	[/]
    [/]
     <a href="[v:l.comicurl]" class="pagelink">, </a>
  [/]
      </td> 
  </tr> 
</table>

<script>
function setThumbnails()
  {
  /*
   * Replace dummy thumbnail names.
   */

  var i;
  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";
    }
  return 0;
  }
window.addEventListener("DOMContentLoaded", setThumbnails);

</script>
[/]



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:

td {
    counter-reset: chapterpage;
}

a::before {
    counter-increment: chapterpage;
}

.pagelink::before {
    content: "Page " counter(chapterpage);
}


If you want to see how it looks in action, it's here.
_______________________
image image
One week ago, 2:13 AM #3
gallopingcowgirl

User avatar
Posts: 2
Registration date: 30th Mar 2017
Location: USA
coldreave,
That outcome is exactly what I'm looking for! Your process seems simple enough to follow as well, I can't believe I didn't think of something similar... *sweat-drop*

Thanks so much for the examples as well!
Forum > Layouts, HTML, CSS & Javascript > Adding Chapter Images in Archive
Pages: [1]