Layout of website front page

[Farry]

For a little while now, on the front page, the "Finished Backstories" thumbnails have been arranged as two rows of eight wide, and this causes problems when not using a widescreen monitor. Specifically, the monitor needs to be at least 1670 pixels wide, otherwise content disappears off the right side of the screen. Not just those thumbnails, but part of the top menu and the navigation buttons, and the main image itself. A horizontal scroll bar does appear, so scrolling to the right isn't a big deal, but it is somewhat inelegant.

Maybe change the Finished Backstories thumbnails to four rows of four? Or maybe change their HTML attributes so that they wrap to another row rather than forcing a scroll bar to appear?

[Tapewolf]

Thanks.  For now I've set it to rows of 5 - that seems to work OK on a 1280x1024 display.
Eventually I need to figure out a more permanent solution - maybe adding a banner with interesting scenes from some of the comics that links to a dedicated pages for finished stories?

[Farry]

Looks good now. Thanks.

[Merlin]

Thanks.  For now I've set it to rows of 5 - that seems to work OK on a 1280x1024 display.
Eventually I need to figure out a more permanent solution - maybe adding a banner with interesting scenes from some of the comics that links to a dedicated pages for finished stories?

The way I do it for the latest update things on my page is i just put them next to each other but they're allowed to overflow on a new line if they want to. If that makes sense? If you resize the dhscomix homepage you'll see what I mean.

CSS sucks, I think that's what the S in CSS stands for actually.

[Tapewolf]

The way I do it for the latest update things on my page is i just put them next to each other but they're allowed to overflow on a new line if they want to. If that makes sense? If you resize the dhscomix homepage you'll see what I mean.

CSS sucks, I think that's what the S in CSS stands for actually.

That would need someone with more of an idea of what they are doing.

[Darkmoon]

We need to talk. You site pains me. We need to fix this.

[Merlin]

That would need someone with more of an idea of what they are doing.

OH I checked the source. You've got it in a table. That makes sense.

You should just be able to put it in a single paragraph instead, eg:

<p>

              <a href="simeon.php?strip=1" class="thumbnail"><img alt="A walk in the woods" src="images/simeonpanel8.png" width="200" height="120" border="0"></a>
              <a href="bedfellows.php?strip=1" class="thumbnail"><img alt="Strange Bedfellows" src="images/bfpanel.png" width="200" height="120" border="0"></a>
              <a href="darkangel.php?strip=cover" class="thumbnail"><img alt="The Dark Angel" src="images/DA_logo200.png" width="200" height="120" border="0"></a>
              <a href="redvalentine.php?strip=1" class="thumbnail"><img alt="Red Valentine" src="images/RVlogo200.png" width="200" height="120" border="0"></a>
              <a href="azrael.php?strip=1" class="thumbnail"><img alt="Turning a new Page" src="images/azraelpanel.png" width="200" height="120" border="0"></a>
              <a href="criticalmass.php?strip=cover" class="thumbnail"><img alt="Critical Mass" src="images/CMlogo200.png" width="200" height="120" border="0"></a>
         <a href="axeman.php?strip=01-01" class="thumbnail"><img alt="The Axeman Cometh" src="images/axemanpanel.png" width="200" height="120" border="0"></a>
         <a href="tuppenny.php?strip=00" class="thumbnail"><img alt="The Tuppenny Man" src="images/tuppennypanel.png" width="200" height="120" border="0"></a>
         <a href="daxxon.php?strip=01-00" class="thumbnail"><img alt="...To catch a Demon..." src="images/daxxonpanel.png" width="200" height="120" border="0"></a>
              <a href="heads.php?strip=00-01" class="thumbnail"><img alt="Heads You Lose" src="images/headspanel.png" width="200" height="120" border="0"></a>
         <a href="darklord.php?strip=01-00" class="thumbnail"><img alt="Dark Lord Rising" src="images/darklordpanel.png" width="200" height="120" border="0"></a>
         <a href="fishing.php?strip=01-00" class="thumbnail"><img alt="Fishing Trip" src="images/fishingpanel.png" width="200" height="120" border="0"></a>
         <a href="panther.php" class="thumbnail"><img alt="I, Panther" src="images/pantherpanel.png" width="200" height="120" border="0"></a>
         <a href="tenets.php?strip=01" class="thumbnail"><img alt="Book of Tenets" src="images/tenetspanel.png" width="200" height="120" border="0"></a>
              <a href="harvest.php?strip=01-00" class="thumbnail"><img alt="The Harvest" src="images/harvestpanel.png" width="200" height="120" border="0"></a>
         <a href="emily.php?strip=01-00" class="thumbnail"><img alt="Emily" src="images/emilypanel.png" width="200" height="120" border="0"></a>

</p>

and then it'll automatically shmoove around to new lines.

if you want to apply a particular style like 'tacen' to each of the images you can make it like <p class="tacen"> and put that in the p.tasen css style. you can set specific spacing on the image tags or via css on the p.tacen img so you wont have to use a table but get a similar look.
i hate css still so that paragraph might not make total sense

on my site i wrap it in a div but i'm pretty sure that's not necessary and you can just use a p, should be the easiest way

[Tapewolf]

We need to talk. You site pains me. We need to fix this.

The lack of HTTPS pains me most, but at the same time, moving it away from xepher.net will be a wrench.

[Darkmoon]

Mebs went through the same pains, just not wanting to do the move because Xepher treated them well. What I will say is that, if you have your comics in any kind of database format, we can easily make a port over to Clickthulu (the engine that runs CVRPG and Code Name: Hunter) among others, and we can get the import done in a day or two.

As far as the site code itself it concerned, I'm happy to work with you on a HTML5/CSS2, fully standards compliant web setup. Nice layout, CSS grid, smooth and efficient on size.

[Tapewolf]

Mebs went through the same pains, just not wanting to do the move because Xepher treated them well. What I will say is that, if you have your comics in any kind of database format, we can easily make a port over to Clickthulu (the engine that runs CVRPG and Code Name: Hunter) among others, and we can get the import done in a day or two.

As far as the site code itself it concerned, I'm happy to work with you on a HTML5/CSS2, fully standards compliant web setup. Nice layout, CSS grid, smooth and efficient on size.

My single most important criteria for a tech update on the site is that the existing links to individual comics remain live, even if that means going through some kind of translation layer.

The current system reads the page definitions from flat files, e.g.

Code Select Expand

02-01|2|ep02-01.png|Sheila's clearly come to terms with the whole succubus thing
02-02|2|ep02-02.png|It will come out later anyway.
02-03|2|ep02-03.png|For those keeping count, that's Matthew Daryil
02-04|2|ep02-04.png|Sheila's clan seems to have got off pretty lightly all considered.
02-05|2|ep02-05.png|I don't know what happened to Destania either, so don't ask...
02-06|2|ep02-06.png|Enter the Envoy
02-07|2|ep02-07.png|Oops.
02-08|2|ep02-08.png|Take two
02-09|2|ep02-09.png|Maybe you can be too honest
02-10|2|ep02-10.png|Negotiations take another turn for the worse

03-01|3|ep03-01.png|I can't see this ending well
03-02|3|ep03-02.png|Life lessons.
03-03|3|ep03-03.png|Death lessons.
03-04|3|ep03-04.png|Hence the need for 'Cubi to attend a school like this.
03-05|3|ep03-05.png|Richard is able to disrupt any class without realising he has
03-06|3|ep03-06.png|The rest of the lesson is comparatively boring, so back to the mayor
03-07|3|ep03-07.png|See also "The Dark Angel"
03-08|3|ep03-08.png|Thanks to Sofox for helping write the contract.
03-09|3|ep03-09.png|The Big Reveal
03-10|3|ep03-10.png|Don't worry, he will

...Where the first column is the page ID in the URL, the second is the chapter number, the third is the filename and the fourth is the tagline for each page.

It wouldn't be too difficult to make something to convert it into SQL insert statements for a database.  The images themselves are just kept in directories on the filesystem.

[Merlin]

that's way cleaner than the flat files i use lol

if there's no other way it looks like you could use the old php pages to translate old links the new links and include the new page in the old page (i'd be happy to help with that), or do some htaccess shenanigans. but that's not ideal.

[Darkmoon]

Haha at least you're using PHP. llearch had to help me the first time I transitioned my site as I was just coding everything by hand and maintaining the entire archive in flat html.

Okay, since you have something that is at least working, and you want to preserve links (which moving to any other engine wouldn't do without a whole bunch of meta-pass-through shenans), we could just focus on refreshing the look and feel. I don't think that would be too hard at all, really.

[Tapewolf]

Haha at least you're using PHP. llearch had to help me the first time I transitioned my site as I was just coding everything by hand and maintaining the entire archive in flat html.

Okay, since you have something that is at least working, and you want to preserve links (which moving to any other engine wouldn't do without a whole bunch of meta-pass-through shenans), we could just focus on refreshing the look and feel. I don't think that would be too hard at all, really.

Yeah, it's the comic engine llearch wrote approximately 15 years ago.  Had a few tweaks and hacks, but for the most part it does the job, with the exception of the archive system which needs a thorough rethink to be able to support multiple comics properly.

I would certainly be up for a redesign of the site layout though.

What I'm really not up for is converting it all to run on node.js and some weird heap of npm dependencies that could vanish or turn into malware at a moment's notice.

[Darkmoon]

I use Clickthulu. It's solid. I recommend it to everyone. So if you want to move off llearch's system (which I eventually had to when my giant archive got too big), I can help you with that.

But yeah, hit me up whenever you want to talk layout. I can do that even if you don't move to a new system.

[Merlin]

we should hang out sometime and think about how the multiple archives should go, based on whichever system you want to use. if you can do prev/next buttons programmatically there's a way to easily generate archives.

[Darkmoon]

When I moved to the Clickthulu engine I ended up forcing Gyr (who runs it) to do a bunch of feature upgrades for the archives. They can do auto-genned back and forward for comics, for chapters, for characters, and it has archive function for storylines too. Basically, any way you can think to organize 8,000 comics across 18 archives of varying sizes.