Forum > News & Announcements > New and improved archive page
Pages: 1 2 3 4 5 6 7
"New and improved archive page", 7th Jun 2022, 4:03 PM #1
Kyo
🐊
User avatar
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.

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!!):




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:



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.


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>


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.


empty your wallets:
comicfury is sustained solely by your donations. every time you look into your wallet, and there's unspent cash, it's as if you're literally stabbing a knife through the heart of this website. you have to give us all your money, it's the only ethical choice

image
_______________________
hello
7th Jun 2022, 4:09 PM #2

User avatar
Thumbnails?!?!?! I tried for months to get that to work :D ty Kyo!
_______________________
image
image
7th Jun 2022, 4:10 PM #3

User avatar
WOOOOOOOOOOOO WE GOT THUMBNAILS BAYBEEEE!!!!
_______________________
Patter patter patter~ do you hear that? I’m outside your door. Knock knock. Like it or not, i’m coming in.
7th Jun 2022, 4:12 PM #4

User avatar
Appreciate all the effort you put into this site, Kyo.

Thanks and Happy Pride Month to all!
_______________________
7th Jun 2022, 4:14 PM #5
goes fast
User avatar
Oooh, I can't wait to edit my archive to add this stuff in, it'll be really helpful :D
_______________________
image
image
7th Jun 2022, 4:18 PM #6
untamed
User avatar
bless you Lord Kyo, my archive looks so good now! i didnt even have to upload any new chapter title images (yet) because i already have a title page for every chapter in its first page... what a great change!
_______________________
image
image
7th Jun 2022, 4:28 PM #7
Kyo
🐊
User avatar
lookin' sharp, but the spacing appears to be a little bit off. since your layout is based on desire, you might want to add this to the very start of your archive page:

<div class="content">
    <div class="pure-g">
        <div class="pure-u-1">


and this to the very end:

        </div>
    </div>
    <hr>
</div>


I think that should fix it.
_______________________
hello
7th Jun 2022, 4:33 PM #8
untamed
User avatar
gosh thank you, i hadnt even thought of that fhfgjhsfgdfh
_______________________
image
image
7th Jun 2022, 4:33 PM #9
User avatar
Kyo: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 don’t think I can do this without access to a desktop, that is a LOT of code and my iPad doesn’t let me paste code T - T

This sounds really cool and helpful for archive navigation though! I hope I can get around to it at some point d(^^)b
_______________________
image
image


7th Jun 2022, 4:34 PM #10
Bird Keeper
User avatar
I am using this for upcoming webcomic.
7th Jun 2022, 4:36 PM #11
Kyo
🐊
User avatar
ShaRose49:I don’t think I can do this without access to a desktop, that is a LOT of code and my iPad doesn’t let me paste code T - T

This sounds really cool and helpful for archive navigation though! I hope I can get around to it at some point d(^^)b


if you've done only very light changes, another option would be to reset to a default layout, and then redo the changes you've made to it (or copy them out of your current code, and then paste them back in if that's possible). this also has the advantages of getting an archive page tailored to that specific layout.
_______________________
hello
7th Jun 2022, 4:47 PM #12
Dogfight Pilot
User avatar
Thank you Kyo! Looks great!

Is there a way to make it centred instead of left justified? On a big monitor it looks a bit funny with all that empty space. I tried a few things but can't figure it out.
7th Jun 2022, 4:48 PM #13
User avatar
Kyo:if you've done only very light changes, another option would be to reset to a default layout, and then redo the changes you've made to it (or copy them out of your current code, and then paste them back in if that's possible). this also has the advantages of getting an archive page tailored to that specific layout.


Thank you, this worked!!
_______________________
image
image


7th Jun 2022, 4:48 PM #14

User avatar
I updated all my cover images for the thumbnails and am waiting for my coder to do the rest, this is awesome!
_______________________
image
image image image
7th Jun 2022, 4:53 PM #15

User avatar
Kyo- I haven't had a chance to tweak anything yet but loook

Even looks good on mobile- though the "hover" thumbnail is a lil precarious
_______________________
image
image
7th Jun 2022, 4:57 PM #16
Kyo
🐊
User avatar
Mel Cormac:Thank you Kyo! Looks great!

Is there a way to make it centred instead of left justified? On a big monitor it looks a bit funny with all that empty space. I tried a few things but can't figure it out.


I'm assuming you mean center the container, rather than everything (which would probably end up looking a bit wonky since then things would shift based on how long the chapter description is). If that's the case, try restricting the width of the container and giving it a margin:auto:

#nl-archive-chapters {
    margin: auto;
    max-width: 600px;
}


Kokoneos:Kyo- I haven't had a chance to tweak anything yet but loook

Even looks good on mobile- though the "hover" thumbnail is a lil precarious


yeah, i might get rid of the hover effects on mobile
_______________________
hello
7th Jun 2022, 5:00 PM #17

User avatar
Have i ever mentioned how thankful i am for you and your programming?
_______________________
Patter patter patter~ do you hear that? I’m outside your door. Knock knock. Like it or not, i’m coming in.
7th Jun 2022, 5:04 PM #18
veteran of all things rez
User avatar
replaced it without backing up because I like to feel dangerous. Anyways, new archive page looks great!
_______________________
image
7th Jun 2022, 5:08 PM #19

User avatar
YOOO I just checked my archives this looks so hecking cool! Thanks dude!
_______________________
image

image




7th Jun 2022, 5:14 PM #20

Never before have I needed something so badly and not known until I received it. Praise be to Kyo, this is a wonderful option to have.
_______________________
image
Forum > News & Announcements > New and improved archive page
Pages: 1 2 3 4 5 6 7