Comic Fury Webcomic Hosting - Archive Thumbnails HTML

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

"Archive Thumbnails HTML", 10th Jan 2017, 3:14 PM #1
Dincorta♂

User avatar
Posts: 3
Referrals: 0
Registration date: 13th Aug 2016
Location: Cardiff, Wales
Hi, first time posting here.

I've been having major issues when trying to adjust my Archive page's HTML. I'm trying to make it so each Chapter has a little thumbnail image and all the page titles are grouped to the right of the image.

I'm not that savvy when it comes to HTML and code in general but I've been able to get by so far by just observing and learning. But what logically works in my head for what I'm trying to do just doesn't work when I test it. I'm definitely missing something and I'm hoping someone can help me.

I've been adjusting the default HTML for one of the pre-made templates, which I'll paste below, but everything I try just ends up looping with the whole archive. It even duplicates my footer dozens of times for whatever reason.

<div id="title"><h2>archives [c:ischapterarchive] - [v:chaptername][/]</h2></div>

<div class="center">
	<div class="textcontent">

		<table border="0" cellpadding="4" cellspacing="0" class="center">

		<tr><th>#</th><th>Title</th>
	
		[l:chapteredarchive]

		[c:l.newchapter]
			<tr class="chaptertitle"><td colspan="4"><h3>[v:l.chaptername]</h3>
				[c:l.chapterdescription]
					[v:l.chapterdescription]
				[/]
			</td></tr>
		[/]
		<tr><td>[v:l.number]</td><td><a href="[v:l.comicurl]">[v:l.comictitle]</a></td><td>[v:l.posttime]</td><td><a href="[v:l.comicurl]">[v:l.comments] Comments</a></td></tr>
		[/]
	
		</table>
	</div>

</div>


Thanks in advance!
10th Jan 2017, 6:42 PM #2
Robotwin.com

User avatar
Posts: 2420
Referrals: 0
Registration date: 22nd Sep 2010
Location: USA, Milky Way
I'm trying to make it so each Chapter has a little thumbnail image and all the page titles are grouped to the right of the image.


Welcome to the forum!

This looks like a pain in the butt because it's in a table. We would have to add additional cells on the left side to house the thumbnails. Like this:
<td rowspan="21"><img src="thumbnail.jpg" /></td>


However, we need some way to do this only on the first page of each chapter, and I can't remember if the layout reference guide has a conditional for that, and this would only work as long as all your chapters have exactly 21 pages. An alternate solution is to use JavaScript somehow.
11th Jan 2017, 3:49 AM #3
coldreave

User avatar
Posts: 62
Referrals: 0
Registration date: 7th Sep 2016
Location: Australia
Welcome!

As far as layout goes, an alternative to robotwin's rowspan suggestion would be using nested tables. Probably be fiddly to get all the tags closed at the end of each chapter, but it should be possible.

Something like:


<table class="OneRowPerChapter">
    <tr>
      <td>
        <table class="Empty">

  [l:chapteredarchive]
 
    [c:l.newchapter]
        </table>
      </td>
    </tr>

    <tr>
      <td><img src="thumbnail_[v:l.chaptername].jpg" />
      </td>
      <td>
        <table class="OneRowPerPageOrChapterTitle">
    [/]
      
     ... existing layout for listing pages ... 

  [/]
        </table>
      </td>
    </tr>
</table>


Of course, there's every chance I've stuffed it up or misunderstood the problem, but hopefully you get the idea.

Good Luck!
_______________________
image image image
11th Jan 2017, 5:03 AM #4
Robotwin.com

User avatar
Posts: 2420
Referrals: 0
Registration date: 22nd Sep 2010
Location: USA, Milky Way
... existing layout for listing pages ... 
equals
<tr><td>[v:l.number]</td><td><a href="[v:l.comicurl]">[v:l.comictitle]</a></td><td>[v:l.posttime]</td><td><a href="[v:l.comicurl]">[v:l.comments] Comments</a></td></tr>

This would have to fit inside the [c:l.newchapter] section, wouldn't it?

My brain melted. Nevermind. Nice solution!
11th Jan 2017, 9:26 AM #5
Dincorta♂

User avatar
Posts: 3
Referrals: 0
Registration date: 13th Aug 2016
Location: Cardiff, Wales
My brain melted. Nevermind. Nice solution!

Hey, thanks for the responses!

I tried out your suggestions and it didn't quite have the right effect, because the text was huge, and included the dates and comment numbers, and also the Chapter titles & descriptions disappeared. This was probably my fault for putting it in wrong - I wasn't sure whether I had to replace the whole code or just slot in the solutions where they seemed to fit...

Either way, I had a quick browse of the top comics on CF and found a layout similar to how I pictured it: http://bicycleboy.thecomicseries.com/archive/

I hope this helps illustrate what I was looking for, and if you can refine your solutions to do this, or just help me out with what goes where in the box, I'd be amazingly grateful!

Thanks for the help so far!

Merged Doublepost:

If it helps, here is a link to my archive currently: http://meridiansix.thecomicseries.com/archive/

That's how it looks with the following code:
<div id="title"><h2>archives [c:ischapterarchive] - [v:chaptername][/]</h2></div>

<div class="center">
	<div class="textcontent">

		<table class="OneRowPerChapter">
    <tr>
      <td>
        <table class="Empty">

  [l:chapteredarchive]
 
    [c:l.newchapter]
        </table>
      </td>
    </tr>

    <tr>
      <td><img src="thumbnail_[v:l.chaptername].jpg" />
      </td>
      <td>
        <table class="OneRowPerPageOrChapterTitle">
    [/]
      
     <td><a href="[v:l.comicurl]">[v:l.comictitle]</a></td><td><a href="[v:l.comicurl]"></tr> 

  [/]
        </table>
      </td>
    </tr>
</table>
	</div>

</div>
11th Jan 2017, 12:23 PM #6
coldreave

User avatar
Posts: 62
Referrals: 0
Registration date: 7th Sep 2016
Location: Australia

the Chapter titles & descriptions disappeared

Sorry, I assumed that would be part of the "Existing layout" stuff that I glossed over a bit too quickly.


a layout similar to how I pictured it: http://bicycleboy.thecomicseries.com/archive/

That actually simplifies things quite a lot. That page doesn't even use tables, but if CSS formatting isn't your thing, we should be able to do the same with just one table:

<table>
  <tr> 
      <td> 
  [l:chapteredarchive] 
    [c:l.newchapter]
      </td>
  </tr>
  <tr>
      <td>
        <img src="thumbnail_[v:l.chaptername].jpg" />
      </td>
      <td>
        <h3>[v:l.chaptername]</h3>
	[c:l.chapterdescription]
	  <p>[v:l.chapterdescription]</p>
	[/]
    [/]
     <a href="[v:l.comicurl]">[v:l.comictitle], </a>
  [/]
      </td> 
  </tr> 
</table>



Also, if your chapternames aren't convenient for use in the thumbnail filename, you should be able to change it to use the name of the first page in the chapter instead.

eg:

src="http://meridiansix.thecomicseries.com/files/thumbnail_[v:l.comictitle].jpg"

and name your images "thumbnail_1-0.jpg", "thumbnail_2-0.jpg" etc.



Hope this does what you need!
_______________________
image image image
11th Jan 2017, 2:40 PM #7
Dincorta♂

User avatar
Posts: 3
Referrals: 0
Registration date: 13th Aug 2016
Location: Cardiff, Wales
Hope this does what you need!

Thanks a lot for your help, it works perfectly!
Forum > Layouts, HTML, CSS & Javascript > Archive Thumbnails HTML
Pages: [1]