New TLS Front Page

Figured out that you need to have an image attached to a news item in order for an image to be displayed on the main page. But the top item won't display an image no matter how many times I try (with differing image sizes).

The image intended now for "FFVII in Five Minutes" is this one.

Okay, we're done / good to go; I turned off maintenance mode and re-enabled caching, we are now live again and running the new front page. We've made a few changes today in the layout and things as it was:

* Removed the sidebar; it was kinda duplicating navigation from the main menu at the top. Articles can now use the full available content width.
* Tweaked the News/Forum poasts thing to also cut off long thread/post titles, not just the dates below. Relative dates work too, woot.
* Fixed up all the main menu links
* Renamed the articles to not be in all caps
* Added (or re-added) the archives page; would be nice if we could figure out a nice design for that one.

I think the main things left to do now are figuring out the preview images; how to add them, what size they should be, etc. Shademp and I had a bit of a discussion about that; I personally believe that they should (and are intended) to always be set to a fixed size, and that authors should pay attention to details, i.e. make that image, crop and size it properly, etc - just like how authors should properly format, categorize and tag their posts and images contained therein.

We also haven't figured out how to set the 'main' preview image yet - Fangu halp.

*

We need to change the banner here in the forums as well, due to the now discarded shop.

For consistency it should be the same banner as is used for the front page.

The question is where we place the link to the front page from within the forum.

I'm at work, sorry. I'll be on IRC in a bit.

Banner: Set it in the WP Admin panel. Under Appearance > Header or similar.
Preview images: Open up the post in the Admin panel, see in the right sidebar - "Featured Image".

I'm pretty sure we can make a YouTube vid be the Featured Image, but for now the easiest thing is to make an image; either by printscreening the YouTube vid or to download the preview pic YouTube makes themselves, and then upload it in "Featured Image" in the post.

You also need to create the new Menus and add them as Widget in the Admin panels, to avoid this: http://thelifestream.net/category/final-fantasy-vii/ Go to Appearance > Widgets and add "Menu for Sidebar" in the "Main Sidebar" (drag and drop).

Also, in the WP Admin panel, there needs to be some adjustments. 2 secs. Edit: Yes, "content on right" should be selected under Appearance > Theme options > Default layout.

New front page looks great, guys. It's truly beautiful.

One thing I noticed (and maybe you guys already know about it and are intending to adjust it) is that the 10th Anniversary Ultimania translations don't appear under Content > Book Translations.

Shademp said:

We need to change the banner here in the forums as well, due to the now discarded shop.

For consistency it should be the same banner as is used for the front page.

The question is where we place the link to the front page from within the forum.

Click to expand...

At the moment, clicking on the banner leads to the frontpage.

Also, the audiobooks page needs updated

For the record, I enabled Google's mod_pagespeed, which does some optimizations for images, stylesheets, JS files, etc; if there's anything that breaks all of a sudden (on either the front page or the forums), let me know.

EDIT: The Audiobooks page has now been updated accordingly.

Hawkeye said:

One thing I noticed (and maybe you guys already know about it and are intending to adjust it) is that the 10th Anniversary Ultimania translations don't appear under Content > Book Translations.

Click to expand...

We should consider a renaming of Book Translations. It was made as a place for Non-FFVII Translations.

The FFVII Translations are under Content -> FFVII Compendium -> Guide Book Translations.


The earlier name of Book Translations was "Non-FFVII Translations" but the name doesn't look nice.

Whoops, my bad. Yeah, it needs to be renamed then, I think -- if I got lost, then someone new to the site definitely would.

Might I suggest "Miscellaneous Translations"? Or "Other Translations"?

I believe there is no other choice but to call it "Non-FFVII Translations". It may look ugly but the name has to be descriptive. Even a title such as "General Translations" might still cause confusion.

*Changed it now btw.

Probably for the best. Still looks good even if not exactly pretty, by the way.

I'm working on the 'Featured Images' sizes. Ideally the top article image was going to have more height than article 2, 3 and 4, which were going to have a ratio of 3:2, but I'm gonna have to postpone that for a little while. I want authors to be able to upload a big and small Featured Image (if we keep the same ratio for big and small that won't be necessary), but that will take a little work. In the meantime I'm gonna set the default ratio for Featured Images to 7:5. That way it'll look okayish for all previews. I'm gonna try that and see how it works. brb.

Edit: Okay done, let me know if the images are too tall. 7:5 is not a very integer friendly format anyway, so I'll be happy to change it.

A manual on how to add a Featured Image will be made very shortly.

Short version: In post, click "Featured Image", upload new image (even if you've already uploaded it to insert into your article), click "Edit image", put 7 and 5 into the ratio boxes, hold in Shift while using the mouse to edit (Help is written to the right in the box) and Save when you're happy. Then click "Use as featured image" on the bottom.

Don't worry about the size, the front page will resize it properly. But if you want to, you can always resize the image to 500 in width by using "Scale" in the same place you crop. The image editor is still a little wonky IMO but it does a decent job cropping.

If you don't upload a featured image, WP will find the first attachment/image you uploaded for your article and use a pre-cropped version of that image. If you don't have any attachments, a default image will be shown (I'm working on that now.)

I know it's not a big piece of analysis, but... nice updates, guys!

^ That's pretty much what I want to say as well I feel bad for not having been involved in the launch day, but I've been otherwise occupied, and away from a computer for the last seven hours. I've got a few observations on the design - just small things that could be tweaked when we've got the time - which I'll share tomorrow.

It looks really nice, guys! I'm glad to see it up and running.

Just want to echo the compliments of the new layout as well.

I'm going to rant some moar about mod_pagespeed, . It's pretty neat really, I've been tweaking a few more settings because I'm pedantic.

I tried one feature, 'lazyload_images', which would only fetch images as they become visible. One the one side, this would, I think, reduce load times for our bigger articles with a lot of images. However, when I tried it it was a bit jarring; images would pop into view as you scroll down. It probably wouldn't be that bad once the images were in your cache though.

Pages like the Unused Text series are quite long and are up to 5 MB in size (total, images etc); lazy loading could work for those, I think. But I'm still not sure, I'd have to check GA and determine the average download speed most people have, etc.

One thing I noticed btw is that the images for the Unused Text series are hosted externally, on worldofbits.com or something - this is probably due to those articles also getting published on another site, but still. Do we have backups of those images somewhere, in case that host goes down? Another consequence of that decision is that mod_pagespeed can't optimize the images - and they're each 50 - 100 KB in size, which isn't very optimal.

Anyway. There is another option that will inline low-quality versions of images on first load, then replace them with high-res images. I'm not going to enable that one, it's only really useful for 'first view', and prevents images from popping in while the page loads, but I don't think we really have that problem atm. Maybe for the homepage, but I'd have to simulate slow page speed for that. Actually I just did, . The images load slowly (top to bottom) atm, but on second load it's not too bad due to caching.

I'm probably being too anal about this stuff,

Edit: There is a small issue where the background color will flash white before turning the regular BG color; this seems to be something WP does, some default style thing. Lemme see if I can fixx, either by editing that config value in WP, or setting a hard bgcolor on the body tag or something.

Cthulhu said:

One thing I noticed btw is that the images for the Unused Text series are hosted externally, on worldofbits.com or something - this is probably due to those articles also getting published on another site, but still. Do we have backups of those images somewhere, in case that host goes down? Another consequence of that decision is that mod_pagespeed can't optimize the images - and they're each 50 - 100 KB in size, which isn't very optimal.

Click to expand...

I have backups. I will upload all the images to the TLS WP and replace the links. Not today though.

When you say that the file size isn't optimal, do you mean that I should change the file format? If so, what should I change it into before uploading to our WP?

Not sure, I'm no image expert; they're .pngs at the moment, which iirc is more of a format for graphical images, I think .jpg would achieve a better compression rate. But don't pin me down on that.

Fun fact; mod_pagespeed can convert .jpg files to google's own .webm format on the fly if the user's browser supports it, which may achieve even better compression rates. But, the images are relatively small, so not sure if that would make much difference.

Regarding imagery, how bad is it if the three medium sized preview articles on the front page are all 500x357 (but resized by CSS)?

The con is the front page loads bigger images than needed (300x214), the pro is that for each upload we only get one additional upload (500x357) instead of both.

Bc as it is now, Featured Images are uploaded like regular images, meaning they are automagically resized and stored as thumb, medium, large, original size plus any custom set size (which now is 2). I'd like to reduce those from six to five.

+ traffic or + storage?

You can just upload them as 500x357; mod_pagespeed can, as long as the dimensions are properly defined (iirc either in CSS or html), automatically resize to those exact dimensions for optimization purposes.

Speaking of, some analysis tool I have in my browser complains that the images don't have a height- and width property in the html; would it be a big issue to add those? I've seen stuff in code about $image[1] and whatnot which I think is image metadata, but for some images it didn't seem to be available. I can configure mod_pagespeed to also add those properties to its output (which would probably optimize rendering speed in the browser), but that may have undesirable side-effects.

Cthulhu said:

Speaking of, some analysis tool I have in my browser complains that the images don't have a height- and width property in the html; would it be a big issue to add those? I've seen stuff in code about $image[1] and whatnot which I think is image metadata, but for some images it didn't seem to be available.

Click to expand...

No that's correct. The CSS sets the width to some percentage so the image fills the float boxes, but the FP does not specify width and height. The $image[1] thing can definitely be used. [1] is width and [2] is height (and [0] URL). I'll definitely look into that.

Cool stuff, then I have a plan.

fhtagn

Probably too early to be sure, but according to google analytics, page load times have gone from up to 6 seconds down to 0.6 seconds:


Stats for the forums seem to be a bit all over the place though, will need to check that again later.

Love the new page!

One problem: ever since the page was switch, I can't "unclick" the "forums read" icons individually. If I click the mass "mark forums read" link at the bottom of the page, it does work, but I can't turn individual icons off.

Does anyone else have this problem?

By forums, do you mean categories (the big icon things) or individual threads? This could be one of those things the optimizer broke, . and/or vB's doing crazy nonstandard shit.