A few small changes.

[Hawk]

Looks like it's coming along pretty good.

[AT41B]

I'm not of the ones that really count, but for myself, I hate to see the work Hawk portrayed to us disappear. But hey, it does look good and easy to go with the flow.

[Gumboots]

It's not destroying Hawk's work. The content of that is still the basis of the site. I'm just giving it shiny shoes and a flash pair of pants. It may look fancy, but the coding is simple and will be easy to maintain. That's not important to you but it is to me.

As just one example: pulling the map briefings in as HTML rather than a series of images will make it a lot easier to add new maps. It also saves around 2,200 images from the image stash, which amounts to the best part of a gigabyte of storage. So less storage required = lower hosting costs, and 2,200 fewer images required means faster and easier backups, and faster and easier loading of briefings.

It will also work on phones and tablets, which is a good thing these days. People won't play RT3 on them, but they do a lot of browsing on them, and you can bet they will be doing more rather than less. Also, search engines are starting to heavily penalise sites that they don't think are good for mobile. Not that I care about Google rankings or anything, but it's good if people can find things easily.

[Hawk]

I'm not of the ones that really count, but for myself, I hate to see the work Hawk portrayed to us disappear. But hey, it does look good and easy to go with the flow.

I'm 110% behind Gumboots updating the site to his preferences. After all, it's his job now to update and maintain it so it needs to be something he wants/can to work with.

I do admit; the way I did things was a bit clunky and difficult to update.

[Gumboots]

I like having things so they make sense to me even when I'm tired and low on caffeine.
I'm liking this new archives arrangement. The code for a map on the .shtml file for an archive page looks like this:

Code: Select all

<div id="Burma" class="map_wrapper">
	<h4>
		Burma <span>- by Lars (<em>Lama</em>) Maischak</span>
	</h4>
	<ul>
		<li>
			<a href="#" onclick="return hs.htmlExpand(this)" class="briefing_toggle">English Briefing</a>
			<!--#include virtual="Burma.html" -->
		</li><li>
			<a href="#" onclick="return hs.htmlExpand(this)" class="briefing_toggle">German Briefing</a> <span>by Toni (<em>Sugus</em>) Wettenschwiler</span>
			<!--#include virtual="Burma_Ger.html" -->
		</li><li>
			<a href="http://www.mediafire.com/file/qb8p5dyyyhniy11/Burma.zip" rel="external">Download (English)</a>
		</li><li>
			<a href="http://www.mediafire.com/file/5xbgkil3m69qp2g/Burma_GER.zip" rel="external">Download (German)</a>
		</li><li>
			<a href="http://hawkdawg.com/txt/rt3/map_arch/asia/Burma%20Readme.txt">Read Me</a>
		</li><li>
			Check out <a href="http://hawkdawg.com/forums/viewtopic.php?f=86&t=51">this thread in the forum</a>
		</li>
	</ul>
</div>

That's all it needs. Then the Burma.html file for the English briefing looks like this:

Code: Select all

<div id="Baghdad_Railway_top" class="highslide-maincontent" style="display: none;">
	<h5>
		The Baghdad Railway
	</h5>
	<hr />
	<p>
		You have until the end of 1914.	These are your goals:
	</p>
	<h6>
		Bronze
	</h6>
	<p>
		Connect Istanbul to Ankara and haul 20 loads of clothing to Istanbul.
	</p>
	<h6>
		Silver
	</h6>
	<p>
		In addition to the Bronze goals, connect Istanbul to Baghdad.
	</p>
	<h6>
		Gold
	</h6>
	<p>
		In addition to the Bronze and Silver goals, haul 4 weapons and 4 ammunition to Baghdad, and 20 loads of oil to Istanbul.
	</p>
	<h6>
		Special conditions
	</h6>
	<ul>
		<li>You may only start one company.</li>
		<li>Track building is limited.</li>
		<li>You start with an allotment of 600 cells.</li>
		<li>To get additional track, haul lumber and steel (anywhere).</li>
		<li>1 lumber + 1 steel = 20 additional track cells.</li>
		<li>At the end of every year, you can get up to a total of 200 cells (for 10 lumber + 10 steel).</li>
		<li>Buying or building industry costs less for the first five years.</li>
	</ul>
	<hr />
	<ul class="secondary_menu">
		<li>
			<a href="#Baghdad_Railway_top">Back to top</a>
		</li>
	</ul>
</div>

Which is easy to set up with a boilerplate. Boilerplate can be done like this:

Code: Select all

<div id="placeholder_top" class="highslide-maincontent" style="display: none;">
	<h5>
		paste_title_here
	</h5>
	<hr />
	<p>
		paste_text_here
	</p>
	<h6>
		Bronze
	</h6>
	<p>
		paste_text_here
	</p>
	<h6>
		Silver
	</h6>
	<p>
		paste_text_here
	</p>
	<h6>
		Gold
	</h6>
	<p>
		paste_text_here
	</p>
	<h6>
		Special conditions
	</h6>
	<ul>
		<li>
			paste_text_here
		</li>
		<li>
			paste_text_here
		</li>
		<li>
			paste_text_here
		</li>
	</ul>
	<hr />
	<ul class="secondary_menu">
		<li>
			<a href="#placeholder_top">Back to top</a>
		</li>
	</ul>
</div>

So all you need to do is save a copy of boilerplate.html as Map_Name.html, then do a find/replace for placeholder/Map_Name. Then paste in your bits of briefing text where you want them. If you need more paragraph or list tags, just copy/paste a few of those first.

Same deal for the HTML for the actual archive page: there's a stashed chunk of code that does the basics. Copy that in where you want it. Find/replace for placeholder/Map_Name. Paste in the link hrefs, etc.

And for the images it's all done with a couple of lines of CSS per map:

Code: Select all

#Burma::before, #Burma_top .secondary_menu::before {
	background-image: url(images/rrt/rt3/asia/Burma.jpg);
}
#Burma_Ger_top .secondary_menu::before {
	background-image: url(images/rrt/rt3/asia/Burma_Ger.jpg);
}

Note that I'm standardising naming of images too. All images will be given the full map name, with underscores between words to prevent validation errors. This is the same name as used everywhere in the HTML and CSS. No guessing games. It's all idiot-proof.

All non-English ones will get the same English map name, with the first three letters of the language appended. So anything for German is _Ger and Portugese would be _Por on the end. This way all related files will sit together in the directory, stacked alphabetically according to language name:

Map_Name.html
Map_Name_Bas.hml (for Basque)
Map_Name_Ger.html
Map_Name_Por.html

Map_Name.jpg
Map_Name_Bas.jpg
Map_Name_Ger.jpg
Map_Name_Por.jpg

[Hawk]

I wish you were around when I started the current mess.

[Gumboots]

Wouldn't have done any good. I didn't know anything about coding back then.

Hey here's something you might be into. That "Men of the Iron Road" article about the Georgia Northeastern could do with a matching banner in the header. At the moment I'm using a public domain image of a KCS train, just because it's what I had stashed. If you know someone who has a proper GNRR photo that will fit on a 4:1 banner (like looks good at 1024x256) and will let the site use it then that'd be kinda cool. I don't think banners should be taller than that or they start to take over the whole page, but 4:1 is ok on pages like this.

Incidentally, I ran a check on images on that page. The jpg's were massive for byte count. Must have been saved on 100% quality setting, which always makes for huge jpg's. I revamped them at 50%, which looks just as good, and revamped the "CherokeeLife" header as a .png8 with matte. Result is 485 kB (almost half a meg) knocked off that page without any other changes. So I checked the rest of the images too. Apart from the four required by that article there were another 17 standard site images (used on all pages). The new setup has only 6 standard images and they have a lower byte count, so faster caching there too.

Also, I found another cool photo collection last night when I was looking for a proper N&W banner for William Sherrick's article: the Roger Puta collection. Haven't been right through it yet, but it looks to have some really good stuff in it. Definitely one for the Links page when that gets done.

[Hawk]

Any of the pictures on this page - http://hawkdawg.com/photos/fm/fm-gnr.htm - can be used with permission, but they're probably too small for your use, unless you can crop/resize to suit.
I'll see if I can find some more by the Fireman over at RRPicturesArchive.net. I have handshake permission from him to use any of his photos I want.
Or if you want to have a look, his name is Robert "Fireman" Duncan SR. He is (was?) a local fireman I met while he was taking pictures.
Here's a link to his GNRR archive.

http://thefireman.rrpicturearchives.net ... px?id=GNRR

Sadly, they all might be a bit too small for you.

I thought I had some I took but the ones I do have are waaay too small and only a couple.

[Gumboots]

Yes those are a tad on the small side, and they don't scale up well. Also, what suits best is something that still looks good when cropped to a narrow strip. I messed around with 4:1 shots and it's really still too clunky. 5:1 seems to be the best compromise.

I did a bit of digging around over at that site, and without going through every photo there this one would be good:

GNRR 4125 by Darrell Krueger

Looks like this on my test site:

Not sure I'll be able to contact him though.

I did notice one bloke, who has another nice shot here, said on his profile page that he'd given up posting shots because they always got deleted or jumbled up. He has a YouTube channel and still seems to be more or less active there.

Edit: Aha! I knew I'd seen a better range of shots somewhere else. This site is still active, and actually gives contacts for the photographers:
https://www.railpictures.net/

Which is handy, because if I can contact them they might even give permission to use a photo or two.

Kyle Yunker is sill posting shots there and he has a good selection of GNRR shots (they start here). I'll send him a nice email and see how he reacts.

Darrell Kreuger also has some shots on that site, but doesn't seem to have been active for ages. He may be harder to get hold of, but I'll try him anyway.

[RayofSunshine]

Well Gumboots,
Welcome to the position of "manager", if that is your now title.
I read thru all the posts, and it seems as if you have most every thing under control, and looking for better "inputs" to further enhance the program. As not being every knowledgeable about computer functions, most don't make sense to me, but as mentioned, you are in control. thanks for basically taking over the position of being more of a monitor. OH, and I do prefer the black.

[Gumboots]

Cheers Ray. I prefer a darker surrounding background myself. I find it sorta soothing, and it focuses my attention on the actual content. A lighter background tends to attract my attention away from the article.

Anyway I got a reply from Kyle Junker, and he's happy for the site to use one of his shots. So that's nice of him, and the page can have a banner which matches the article.

It's the same locomotive shown in the first photo in the article (you can make out "9706" between Childers and Rutledge) but shot seven years later (2016 vs 2009). Apparently the old 469 milepost is from Louisville & Nashville days, and measures the distance from Louisville.

[Hawk]

I don't think it mentions this in the article but the GNRR, as it said, runs from Marietta (actually Elizabeth, where it interconnects with the Western & Atlantic Sub of CSX - the same line that is infamous for The Great Locomotive Chase back in the Civil War) to Canton, GA (about 22 miles), which then runs to Tate, GA - which is where the GNRR shops are, but from there the rail line (basically unused) runs from Tate to Blue Ridge, Georgia which is where the Blue Ridge Scenic Railroad starts (motive power and maintenance is by GNRR) and runs from there to McCaysville, GA/Copperhill, TN, which is where it ties in with the Copperhill Scenic line that runs from Etowah, Tennessee to Copperhill, TN/McCaysville, GA. which is run by the Tennessee Valley Railroad Museum, and ties back in with the Tennessee Valley Railroad Museum in Chattanooga, TN.

This whole line was at one time owned by the Louisville & Nashville, who bought out the Atlanta, Knoxville and Northern Railroad, who bought out the Marietta and North Georgia Railroad, who bought out the Marietta, Canton and Ellijay Railroad, who bought out the Ellijay Railroad, which was started in 1854.

OK! Probably more information than you wanted.

Oh yea! Good choice on the banner image.

[Gumboots]

Well hey, it's railroad history. No reason I couldn't tack that on after the article in a sort of footnote.

[Hawk]

Fell free.

[Gumboots]

Done. Not live yet, but I could throw the history pages up somewhere about now since they are all working on local.

Incidentally, I did a quick change on the lightbox-rt3.css. Swapped the ties.jpg background for a dark green (same colour as will be used in the revamped briefing) and gave it a bit of a border, etc. This was just so I can do any stopgap images as .jpg while I'm getting the whole revamp kaboodle sorted. I really should get zjh19970214's and OilCan's new maps up without making them wait while I recode the whole site.

The good news here is that the new pure css background loads instantly. It's much faster than waiting for the ties. So it looks like the revamped briefings, once I get them done, should load just about instantly since they are pure html/css like the new background.

The catch with the current setup is that even with the new background you still have to wait for the png to get its act together, but even at their old size of around 500 MB they still seem to come in a lot faster with the new background, even though the png itself should take just as long to cache as it ever did. There must be something about the way Lightbox handles the background coding that makes images there really slow.

The jpg's get it together a bit faster than the png's (they come in around 1/10 the byte count). I've just done the Latvian Republic 1920 map images as jpg's as a test (first map on http://hawkdawg.com/rrt/rrt3/map_arch/rt3_europe.htm). I won't re-do all the old images at this stage, but I'll do any stopgap images like this.

[Hawk]

Lookin' good.

[Gumboots]

Hey here's a cunning bit of trickery. I'm quite chuffed with it, since I came up with it all by myself. Someone else may well have thought of it too, but I haven't noticed it in my travels yet.

It's to do with the old issue of scrollbars looking terrible on darker themes. I'm thinking it might be best overall to set up the briefings so they don't overflow the viewport height, and have a scrollbar inside the briefing. This is mainly because Highslide seems to have problems with things jumping around if the pop-up is taller than the viewport, and none of the suggested fixes I've found seem to work. It might be possible to fix the issue with another Lightbox2 or some other software, but then it gets into needing the whole jQuery library to run the thing.

On the other hand, if I'm going to restrict the briefing wrapper to viewport height anyway, I can write a pure CSS lightbox thingy which will be just as good for function but will only need a few dozen lines of CSS. This should be rocket fast in operation, and easy to tweak for looks.

The workaround uses some of my special CSS voodoo to style the scrollbars up, without requiring any javascript cruddery and without being detrimental to function. It will work in all browsers too. Screenshot shows the effect with Windows 10 scrollbars, but it will work just as well with W7 ones. I think the middle one, which uses a multiply blending mode on the scrollbar overlay, is going to be the best option.

[Gumboots]

Well, after all that, somehow I got Highslide working nicely anyway. No exactly sure how I did it, which is slightly worrying, but it all works. This means I don't have to have scrollbars in the briefing wrappers, which is good. I can still use the nifty styling trick in places where I do want scrollbars (there are sure to be umpteen uses for that, sooner or later).

The other thing I found out is that Highslide automatically cycles through every briefing on the page. You can open any briefing popup, and then by using the left and right arrows you can go to the next or previous briefing. No tedious waiting for more popups. The HTML is already built into the DOM, so it's fast.

The other thing is that I've even managed to improve Highslide a bit (IMHO). By default it allows cycling forward through pop-ups by using the space bar, or the Page Down button, or the Right arrow, or the Down arrow. You can cycle back through pop-ups by using the Backspace button, or the Page Up button, or the Left arrow, or the Up arrow.

I thought this was too much conflict with how the keyboard is usually used, and felt it would be better to leave the up and down buttons and arrows for their original purpose (scrolling the page up and down). This still leaves the left and right arrows active for cycling through pop-ups, which makes sense to me. The other good point is that you can close any open pop-up by hitting the Enter or Esc buttons, so there's no need to find the Close link and click on it. I'll still have one, for people who don't know about the keyboard shortcuts, but hitting Enter is a great way to close the things in a hurry.

While doing all this digging, I found a lot of things that aren't going to be used for this implementation, and a few that conflict with what I want it to do. I reckon I can knock about 1/4 off the size of the Highslide javascript, and simplify my CSS a bit at the same time.

[Hawk]

So you're using Highslide instead of Lightbox because Highslide doesn't use Javascript?

Do I understand that right? Forgive me. I just woke up.

[Gumboots]

I may not be making much sense either. I'm about to go to sleep.

They both use javascript. I was having trouble making a customised Highslide behave, so was thinking of writing a basic CSS-only substitute (not hard to do). But, I've now somehow made Highslide behave, so I might as well stick with it because it has some built-in advantages, and because I can easily make it even leaner than it already is.

Short version: it will have better functionality than the current Lightbox for this use case, and will require a lot less code than the newer Lightbox v2.