"New and improved archive page", 7th Jun 2022, 4:03 PM #1
Hello! Happy pride month!
I've done a bunch of updates to the archive page! At first I was just going to add pagination, but I kept going further and further. So if you're enjoying the cool comfort of a default layout or a layout made with the simple layout editor, you have these changes available to you! Right now!! Go check your archive page!! DO IT!!!
I apologize. I lost my composure.
Alright so you might be asking "new archive? what's this all about then? i don't come to these announcements for extended monologues of your bad improv, you know"
Well here it is, in no particular order:
-The archive now has pages, if you have a bunch of comics. This was the catalyst of the whole update, I wanted the archive to be more reasonable even for webcomics with thousands of pages
-If you have multiple chapters, there's also a chapter listing, which will show just the chapters, with chapter covers, which you can now upload when creating/editing chapters
-If there's no cover, it uses a thumbnail of the first page in the chapter.
-oh that's right, there's now thumbnails! shrunk down versions of your comics!! when you hover over a page link in the archive, it shows a small preview! What a world!
Now as I said, if you have a simple layout or an unmodified default layout, you'll get all this automagically. But if not, you will have to edit your archive page.
I've done a bunch of updates to the archive page! At first I was just going to add pagination, but I kept going further and further. So if you're enjoying the cool comfort of a default layout or a layout made with the simple layout editor, you have these changes available to you! Right now!! Go check your archive page!! DO IT!!!
I apologize. I lost my composure.
Alright so you might be asking "new archive? what's this all about then? i don't come to these announcements for extended monologues of your bad improv, you know"
Well here it is, in no particular order:
-The archive now has pages, if you have a bunch of comics. This was the catalyst of the whole update, I wanted the archive to be more reasonable even for webcomics with thousands of pages
-If you have multiple chapters, there's also a chapter listing, which will show just the chapters, with chapter covers, which you can now upload when creating/editing chapters
-If there's no cover, it uses a thumbnail of the first page in the chapter.
-oh that's right, there's now thumbnails! shrunk down versions of your comics!! when you hover over a page link in the archive, it shows a small preview! What a world!
Now as I said, if you have a simple layout or an unmodified default layout, you'll get all this automagically. But if not, you will have to edit your archive page.
How to convert my archive to have all this new stuff:You have to change a bunch of stuff! The archive now can have multiple pages, and it also has two different display modes (at least for comics with chapters enabled), one where it lists all the chapters, and one where it lists comics. To make this easy, I've prepared a hopefully fairly universal archive page, so you can just copy this, replace the entire current archive section of your layout with this, and then just tweak it to your liking.
Remember to make a layout backup first! You will find the option in the box labelled "useful" next to, or below the code editor in your webcomic management's "edit layout" page. Do not skip this step!!
Also, finally, obviously it's impossible to make a page design that you can just plop into any layout and it'll look good no matter what. You probably will still have to tweak the looks of this, but it should provide you with a skeleton that works, so you won't have to wrangle with the structure of your archive page at least.
Here's the code, just replace your entire archive page with this (after doing the backup!!):
Remember to make a layout backup first! You will find the option in the box labelled "useful" next to, or below the code editor in your webcomic management's "edit layout" page. Do not skip this step!!
Also, finally, obviously it's impossible to make a page design that you can just plop into any layout and it'll look good no matter what. You probably will still have to tweak the looks of this, but it should provide you with a skeleton that works, so you won't have to wrangle with the structure of your archive page at least.
Here's the code, just replace your entire archive page with this (after doing the backup!!):
<div class="nl-archive-page"> [c:show_comic_list] <!-- This is the box that thumbnails previews will be shown inside of, on mouseover of archive comics. --> <div id="thumbnail-preview-box" style="[v:thumbnail_box_styles]"></div> <div id="nl-archive"> [c:!usechapters] <div class="nl-archivecomics"> [/] [l:comics_paginated] [c:l.newchapter] <div class="nl-chapter-title"> <h3>[v:l.chaptername]</h3> [c:l.chapterdescription]<span class="nl-chapterdescription">[v:l.chapterdescription]</span>[/] </div> <div class="nl-archivecomics"> [/] <div class="nl-archivecomic"> <div class="nl-archivecomicnumber"> [v:l.number]. </div> <a class="nl-archivecomictitle" href="[v:l.comicurl]" onpointerover="comicfury.thumbnailMouseOver(event, 'thumbnail-preview-box', [v:l.thumbnail_jsdata])" onpointerout="comicfury.thumbnailMouseOut(event)"> [v:l.comictitle] </a> <div class="nl-archivecomicposttime"> [v:l.posttime] </div> </div> [c:l.chapterend] </div> [/] [/] [c:!usechapters] </div> [/] </div> [/] [c:show_chapter_overview] <div id="nl-archive-chapters"> [l:chapters] <div class="nl-chapter"> [c:l.cover] <div class="nl-chapter-cover"> <a href="[v:l.firstcomicinchapter]"> <img src="[v:l.cover]" width="[v:l.cover_width_small]" height="[v:l.cover_height_small]"> </a> </div> [/] <div class="nl-chapter-data"> <div class="nl-chapter-title"> <h3><a href="[v:l.firstcomicinchapter]">[v:l.chaptername]</a></h3> <div class="nl-chapterdescription">[v:l.chapterdescription]</div> </div> <div class="nl-chapter-more"> <a href="[v:l.chapterarchiveurl]">Comics in this chapter</a> </div> </div> </div> [/] </div> [/] [c:lastpagenumber>1] <div id="pages"> <div id="pageslabel"> Pages: </div> [l:pages] [c:l.skipped_ahead] <span class="pageskip">...</span> [/] <a href="[v:l.pagelink]" class="pagelink [c:l.is_current]currentpage[/]">[v:l.page]</a> [/] </div> [/] [c:show_chapter_overview] <div class="nl-archive-back-link"> <a href="/archive/comics">List all Comics</a> </div> [/] [c:show_comic_list] [c:ischapterarchive] <div class="nl-archive-back-link"> <a href="/archive/"><< Go back to Main Archive</a> </div> [/] [c:!ischapterarchive] [c:usechapters] <div class="nl-archive-back-link"> <a href="/archive/chapters">Chapter Overview</a> </div> [/] [/] [/] </div> <style> .nl-archive-page { padding-left:10px; padding-right:10px; } #nl-archive, #nl-archive-chapters { padding:0 15px; margin:auto; margin-bottom:15px; box-sizing:border-box; } #nl-archive h3 { margin-bottom:0; margin-top:0; } #nl-archive .nl-chapter-title { margin:5px; margin-bottom:5px; } #nl-archive .nl-chapter-title:not(:first-child) { margin-top:30px; } #nl-archive .nl-chapterdescription { font-size:80%; display:inline-block; line-height:150%; } #nl-archive .nl-archivecomic { display:flex; align-items:center; flex-wrap:nowrap; text-align:left; padding-left:10px; padding-right:10px; font-size: 110%; } #nl-archive .nl-archivecomic:not(:last-of-type) { border-bottom: 1px solid rgba(0,0,0,0.2); } #nl-archive .nl-archivecomics { background:rgba(255,255,255,0.2); border: 1px solid rgba(0,0,0,0.15); box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1); padding: 10px; } #nl-archive .nl-archivecomicnumber, #nl-archive .nl-archivecomicposttime, #nl-archive .nl-archivecomictitle { box-sizing:border-box; padding-top:5px; padding-bottom:5px; } #nl-archive .nl-archivecomic:first-of-type .nl-archivecomicnumber, #nl-archive .nl-archivecomic:first-of-type .nl-archivecomicposttime, #nl-archive .nl-archivecomic:first-of-type .nl-archivecomictitle { padding-top:0; } #nl-archive .nl-archivecomic:last-of-type .nl-archivecomicnumber, #nl-archive .nl-archivecomic:last-of-type .nl-archivecomicposttime, #nl-archive .nl-archivecomic:last-of-type .nl-archivecomictitle { padding-bottom:0; } #nl-archive .nl-archivecomicnumber { padding-right:5px; min-width:40px; word-wrap:normal; word-break:keep-all; } #nl-archive .nl-archivecomicposttime { font-size:80%; text-align:right; width:calc(30% - 40px); margin-top:4px; color: rgba(0,0,0,0.6); } #nl-archive .nl-archivecomictitle { flex:1 1 70%; } #nl-archive-chapters { text-align:left; padding-left:10px; padding-right:10px; } #nl-archive-chapters .nl-chapter { display:flex; margin-bottom:35px; } #nl-archive-chapters .nl-chapter-cover { margin-right:15px; } .nl-chapter-cover img { max-width:100%; height:auto; } #nl-archive-chapters .nl-chapter-data { flex:1 1 0%; } #nl-archive-chapters h3 { margin:0; margin-bottom:6px; } #nl-archive-chapters .nl-chapterdescription { font-size:14px; margin-bottom:8px; } #nl-archive-chapters .nl-chapter-more { font-size:14px; } .nl-archive-back-link { margin-bottom:15px; margin-top:15px; } #thumbnail-preview-box, .nl-chapter-cover a { border:1px solid #888; background-color:#fff; box-shadow: 0 2px 2px rgba(0,0,0,0.05); transition:opacity 200ms linear; display:block; } #thumbnail-preview-box img, .nl-chapter-cover a img { display:block; } @media (max-width:850px) { #nl-archive .nl-chapter-title:not(:first-child) { margin-top:25px; } #nl-archive .nl-archivecomic { flex-wrap:wrap; align-items:flex-start; } #nl-archive .nl-archivecomicnumber { min-width:auto; word-wrap:break-word; word-break:break-word; } #nl-archive .nl-archivecomicposttime { margin-top:4px; text-align:left; width:100%; font-size:75%; padding-top:0; } #nl-archive .nl-archivecomictitle { width:auto; flex-basis:90%; } #nl-archive .nl-archivecomicnumber, #nl-archive .nl-archivecomictitle { padding-top:20px; } .nl-chapter-cover img { max-width:160px; height:auto; } } @media (max-width:650px) { .nl-chapter-cover img { max-width:110px; height:auto; } } @media (max-width:450px) { .nl-chapter-cover img { max-width:80px; height:auto; } } </style>
How to convert my archive to have all this new stuff, the hard way:just for the pros! Here's a list of steps that should get you to a new archive page, without having to start over. I don't recommend attempting this if you're not comfortable with editing layout code, and don't really sorta understand what's going on.
Just as with the other method, remember to take a backup of your layout first. You will find the option in the box labelled "useful" on the layout edit screen.
here it is:
1. change [l:chapteredarchive] to [l:comics_paginated]
2. inside that loop, find the <a href> tag linking to the comic page, add the following attributes to it:
3. anywhere on the page, add this:
where doesn't matter, because this is a position:fixed element used for displaying the thumbnail on mouseover of archive comics
4. surround your entire archive table in
archives now have two display modes, a list of comics, or a list of chapters with the chapter cover images
5. add this below:
6. go to your blog archive page, there you should find a condition called "[c:lastpagenumber>1]", copy everything within it and paste it below the code from the last step. this is for displaying page numbers, which the blog archive already does, so this way the code is the same on both pages and thus will also end up looking the same.
If you have a very old layout (more than 3 - 4 years old), you may not have that condition on your blog archive page. in which case, just paste this code below:
7. at the end, paste this:
you should now have an updated archive page! but you will probably want to style it so it doesn't look so bad.
a few additional notes for the layout fiends among us:
the [l:comics_paginated]...[/] loop has a few new variables for your convenience:
[v:l.thumbnail_width] - width of the thumbnail image
[v:l.thumbnail_height] - height of the thumbnail image
[v:l.thumbnail_width_small] - half-width of the thumbnail image
[v:l.thumbnail_height_small] - half-height of the thumbnail image
(if you give the thumbnail these as width/height attributes, they will look crisp on hidpi screens and tablets)
and finally:
[v:l.thumbnail_url] - an URL to the thumbnail image. Please note that this may be empty, e.g. in the case of html-embeds, or comics that were just uploaded (thumbnails may take a few minutes to generate)
a way to use this would be e.g.:
to display small images of all your pages for your archive. of course you would want to upload some sort of default thumbnail image (and change the width/height accordingly)
Just as with the other method, remember to take a backup of your layout first. You will find the option in the box labelled "useful" on the layout edit screen.
here it is:
1. change [l:chapteredarchive] to [l:comics_paginated]
2. inside that loop, find the <a href> tag linking to the comic page, add the following attributes to it:
onpointerover="comicfury.thumbnailMouseOver(event, 'thumbnail-preview-box', [v:l.thumbnail_jsdata])" onpointerout="comicfury.thumbnailMouseOut(event)"
3. anywhere on the page, add this:
<div id="thumbnail-preview-box" style="[v:thumbnail_box_styles]"></div>
where doesn't matter, because this is a position:fixed element used for displaying the thumbnail on mouseover of archive comics
4. surround your entire archive table in
[c:show_comic_list] ... [/]
archives now have two display modes, a list of comics, or a list of chapters with the chapter cover images
5. add this below:
[c:show_chapter_overview] <div id="archive-chapters"> [l:chapters] <div class="chapter"> [c:l.cover] <div class="chapter-cover"> <a href="[v:l.firstcomicinchapter]"> <img src="[v:l.cover]" width="[v:l.cover_width_small]" height="[v:l.cover_height_small]"> </a> </div> [/] <div class="chapter-data"> <div class="chapter-title"> <h3><a href="[v:l.firstcomicinchapter]">[v:l.chaptername]</a></h3> <div class="chapterdescription">[v:l.chapterdescription]</div> </div> <div class="chapter-more"> <a href="[v:l.chapterarchiveurl]">Comics in this chapter</a> </div> </div> </div> [/] </div> [/]
6. go to your blog archive page, there you should find a condition called "[c:lastpagenumber>1]", copy everything within it and paste it below the code from the last step. this is for displaying page numbers, which the blog archive already does, so this way the code is the same on both pages and thus will also end up looking the same.
If you have a very old layout (more than 3 - 4 years old), you may not have that condition on your blog archive page. in which case, just paste this code below:
[c:lastpagenumber>1] <div id="pages"> <div id="pageslabel"> Pages: </div> [l:pages] [c:l.skipped_ahead] <span class="pageskip">...</span> [/] <a href="[v:l.pagelink]" class="pagelink [c:l.is_current]currentpage[/]">[v:l.page]</a> [/] </div> [/]
7. at the end, paste this:
[c:show_chapter_overview] <div class="archive-back-link"> <a href="/archive/comics">List all Comics</a> </div> [/] [c:show_comic_list] [c:ischapterarchive] <div class="archive-back-link"> <a href="/archive/"><< Go back to Main Archive</a> </div> [/] [c:!ischapterarchive] [c:usechapters] <div class="archive-back-link"> <a href="/archive/chapters">Chapter Overview</a> </div> [/] [/] [/]
you should now have an updated archive page! but you will probably want to style it so it doesn't look so bad.
a few additional notes for the layout fiends among us:
the [l:comics_paginated]...[/] loop has a few new variables for your convenience:
[v:l.thumbnail_width] - width of the thumbnail image
[v:l.thumbnail_height] - height of the thumbnail image
[v:l.thumbnail_width_small] - half-width of the thumbnail image
[v:l.thumbnail_height_small] - half-height of the thumbnail image
(if you give the thumbnail these as width/height attributes, they will look crisp on hidpi screens and tablets)
and finally:
[v:l.thumbnail_url] - an URL to the thumbnail image. Please note that this may be empty, e.g. in the case of html-embeds, or comics that were just uploaded (thumbnails may take a few minutes to generate)
a way to use this would be e.g.:
<a href="[v:l.comicurl]"> [c:l.thumbnail_url] <img src="[v:l.thumbnail_url]" width="[v:l.thumbnail_width_small]" height="[v:l.thumbnail_height_small]"> [/] [c:!l.thumbnail_url] <img src="/files/default-thumb.png" width="123" height="456"> [/] </a>
to display small images of all your pages for your archive. of course you would want to upload some sort of default thumbnail image (and change the width/height accordingly)
Note about older iOS versions:
The thumbnails for comic pages are in webp format, which allowed me to generate images with bigger dimensions and a smaller filesize. I wanted things to have reasonable load times even if someone just sticks every single thumbnail into an image tag that's displayed on the archive right away, but still have nice and large images. This unfortunately also means that they will not work on older versions of ios, but anything above iOS 14 works, and fortunately apple is very good at providing updates to older hardware, so this still covers almost everyone.
The thumbnails for comic pages are in webp format, which allowed me to generate images with bigger dimensions and a smaller filesize. I wanted things to have reasonable load times even if someone just sticks every single thumbnail into an image tag that's displayed on the archive right away, but still have nice and large images. This unfortunately also means that they will not work on older versions of ios, but anything above iOS 14 works, and fortunately apple is very good at providing updates to older hardware, so this still covers almost everyone.
Note about archive links:
your archive may display either the chapter listing or just a list of comics, depending on how many chapters your comic has right now. If you want to always have the archive show a certain listing, you can change the links.
the link to the chapter listing is:
http://layoutexample.thecomicseries.com/archive/chapters
you can link to it like this: <a href="/archive/chapters">Archive</a>
the link a list of all comics is:
http://layoutexample.thecomicseries.com/archive/comics
you can link to it like this: <a href="/archive/comics">Archive</a>
your archive may display either the chapter listing or just a list of comics, depending on how many chapters your comic has right now. If you want to always have the archive show a certain listing, you can change the links.
the link to the chapter listing is:
http://layoutexample.thecomicseries.com/archive/chapters
you can link to it like this: <a href="/archive/chapters">Archive</a>
the link a list of all comics is:
http://layoutexample.thecomicseries.com/archive/comics
you can link to it like this: <a href="/archive/comics">Archive</a>
what happens if i don't update my layout?:
things will stay exactly the same as they were before! but you don't get access to any of the new features. nothing will break, though.
things will stay exactly the same as they were before! but you don't get access to any of the new features. nothing will break, though.
_______________________
hello