New TLS Front Page
- Thread starter Fangu
- Start date
Cthulhu
Administrator
- AKA
- Yop
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.
*
* 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.
*
Shademp
420
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.
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.
Fangu
Great Old One
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.
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.
Last edited:
The Twilight Mexican
Ex-SeeD-ingly good
- AKA
- TresDias
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.
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.
Pixel
The Pixie King
At the moment, clicking on the banner leads to the frontpage.
Also, the audiobooks page needs updated
Shademp
420
EDIT: The Audiobooks page has now been updated accordingly.
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.
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.
Last edited:
The Twilight Mexican
Ex-SeeD-ingly good
- AKA
- TresDias
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"?
Might I suggest "Miscellaneous Translations"? Or "Other Translations"?
The Twilight Mexican
Ex-SeeD-ingly good
- AKA
- TresDias
Probably for the best. Still looks good even if not exactly pretty, by the way.
Fangu
Great Old One
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.)
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.)
Last edited:
Alex Strife
Ex-SOLDIER
I know it's not a big piece of analysis, but... nice updates, guys! 
Flintlock
Pro Adventurer
^ 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.
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.
Cthulhu
Administrator
- AKA
- Yop
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.
. 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.
Shademp
420
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?
Cthulhu
Administrator
- AKA
- Yop
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.
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.
Fangu
Great Old One
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?
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?
Cthulhu
Administrator
- AKA
- Yop
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.
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.
Fangu
Great Old One
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.
Obsidian Fire
Ahk Morn!
- AKA
- The Engineer
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?
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?