Custom Thumbmails per page?

orribu commented 1 year ago

Hello there! Having made the jump to vertical scroll format, I wanted to know if it's possible to make custom thumbnails per "page," or in my case, per "episode." That way, I could have a thumbnail for viewers to click on when they browse the archives, as the vertical pages don't play nice with the thumbnail generator. So far, the solution I've jury-rigged is to add the thumbnail to the "beginning" of the episode like so: But it's a bit tacky next to the rest of the content. I have a link to my site here: Webcomic Site Thank you so much for your help! :D

eishiya commented 1 year ago

I took a look at how Grawlix handles thumbnails and it's... interesting. Each image can have a "thumb" file with the same extension as the image, and this isn't stored in the database or anything. Instead, each update has a main image (the first, I believe), and that image's thumbnail is used. So, if you change which image is first, that'll change the thumbnail. Grawlix provides a "generate archive thumbnails" option in Archive Settings that generates new "thumb.ext" for every comic image.

The "easiest" way to implement custom thumbnails would be to let users upload files and save them as thumb.ext into the current first page's directory. The uploader will have to enforce the file extensions being the same. Just as with generated thumbnails, it would be up to users to update the thumbnail if they change the first image of the page.

This is not ideal, since for custom images, you'd expect them to stick around after being uploaded, even if the images all change. An extra database field for the each page's thumbnail would probably be necessary, falling back to the first page's thumbnail if no thumbnail is assigned - the fallback is necessary to enable the "generate archive thumbnails" feature to keep working correctly while also not making it overwrite the custom thumbnails. Database schema changes require a substantial Grawlix update, and we're hoping to minimise those by saving all the schema changes for one big update later down the line so that most updates can be simple file drop-ins.

I'd love to hear some input on this from people! I don't use thumbnails at all, so I'm not a good judge of importance or UI in this regard xP (I also probably won't be able to tackle this for some time, so if anyone else wants to give it a shot, go for it.) I think the first option, being a bit hacky and limited, would make for a good "mod" that people can optionally install (it could just be an alternate version of book.page-edit.php), I don't think it would be adequate as a native Grawlix feature.

Workarounds

Thumbnail replacement

You should be able to generate a thumbnail after you've uploaded your images, navigate to its location with an FTP client and replace it with your custom file. As long as the file names (including extensions) match, it should work. Of course, this is rather more work than one would probably want to do, and requires navigating the mess that is Grawlix's asset file structure xP

Custom first image + CSS

I think your current workaround is clever! You can use CSS to hide the thumbnail placeholders to avoid the tackiness. The simplest CSS would be to just hide the first image of all Pages, but this won't work for you since your cover only has one image:

.comic-images > .comic-1 {
   display: none;
}

So, you'll need to get more surgical and hide the first image only if it has some variant of "Thumbnail" in the filename. Since your image naming isn't entirely consistent, the rule will need to look for both "thumb" and "Thumb" (which should grab "thumbnail" and "Thumbnail" as well):

.comic-images>.comic-1>img[src*="Thumb"], .comic-images>.comic-1>img[src*="thumb"] {
   display: none;
}

Because this more specific CSS can only hide the image and not the entire image entry, the "1" list marker will still be visible. You may want to hide the list markers entirely:

.comic-images {
   list-style: none;
}

orribu commented 1 year ago

Hey there! Firstly, thank you so much for your feedback! As you observed that I don't have a persistent naming convention, I corrected them! Then I applied your code and added a little snippet to reclaim the margin:

  .comic-images>.comic-1>img[src*="thumb"] {
   display: none;
}

    /* Then, Hide the list entries. */
    .comic-images {
    list-style: none;
    }
    /* And Reclaim that Margin: */
    ol.comic-images {
        margin-left: 0;
    }

Again, thank you so much! This has saved me an eon of headaches! <3

Ayemae / Grawlix-Webcomic-CMS