New TLS Front Page

[Shademp]

I was uploading them to Google Docs, and they worked for a while, but they must have timed out. Very strange. I put them on the TLS server now. New links (also edited into the original post): front page, menu.

These graphics make me all tingly in my special places.
Seriously, I greatly approve of the general color scheme and the effects with the menus especially.

My only minor perk is in the menu effect with the small light-blue rectangle/bar that extends above the top menu. Not sure if I like how this simple-colored bar stands out in comparison to the more "advanced" color scheme of the TLS banner.
This is only nitpicking though and you may completely ignore this comment if you like. I don't know of an alternative color scheme for this tiny bar that would then not contradict with the light-blue (turqoise?) color of highlighted menu options, so unfortunately my minor nitpick comes without constructive suggestions.

(Note: Is on bad computer with annoying keyboard, not best place for commenting)

Another thing I've been thinking about a lot is social networking. Each page/post should have its own "share" buttons for the main networks, but I think the front page should have something too. It should be a more general "like us on FB", "follow us on Twitter" style, rather than sharing individual articles. But where should they go in the layout?

Social entrepeneur Flintlock strikes again. (This is a good thing )

I see that in the front page draft you've placed an RSS Feed button to the right. While not a like button, would not an FB icon fit right in there?

As for actual immediate liking of the site in general... Any space near the top right regions I think would fit. Could be at the very top, even on the banner, or to the left of the Search function, or above the RSSFeed button (depending on if we also include a big FB button there to our facebook page). Somewhere there.

With individual news posts, I can see the like button being close to the comments section. Right there with the tags and stuff. Not sure what I would like with pages that don't have comments and/or tags. I will change all my UT articles to not have comments or tags (nothing can stop me from this) but I'm not sure about my feelings regarding a "Like this article" function.

 

[Flintlock]

My only minor perk is in the menu effect with the small light-blue rectangle/bar that extends above the top menu. Not sure if I like how this simple-colored bar stands out in comparison to the more "advanced" color scheme of the TLS banner.
This is only nitpicking though and you may completely ignore this comment if you like. I don't know of an alternative color scheme for this tiny bar that would then not contradict with the light-blue (turqoise?) color of highlighted menu options, so unfortunately my minor nitpick comes without constructive suggestions.

That bar doesn't have to be there at all It was there in white when I took the screenshot to work on, and I just did something with it. It matches the colour of the hovered-over link, though without the subtle gradient. I quite like it myself, but I would be happy to try something else.

Edit: here is something a little different. The aforementioned rectangle is now semi-transparent, which means some of the background will show through it. It still looks like a fairly solid block of colour right now, but if you were to hover over Community or Highlights (and if it were real, and not just a picture), you would see some of the banner's designs with a blue overlay. I also added a little drop shadow, which will be done with CSS. I tried a light TLS colour but it looked wrong. Shadows are meant to be dark.

 

[Lex]

To my very bone I dislike the idea about having those 4 extra index pages. But I, too, want this baby to fly so if the JavaScript solution is too cumbersome then I have a feeling that Lex is willing to create index pages for Content, About etc. I can discuss the Highlights page with Lex when I get back on Wednesday.

Yes, I'll do it. Should have them done within a day or two.

My index pages *were* not entirely ready, but I fixed them up now so they should be ok.

Oops! My bad. When I found that there was something to link to in every sub-heading of the index pages I wrote, I was assuming they were finished. I was mighty impressed that they were all there, for some reason when I was writing it I assumed that they were going to have to be created .

I can share my drafts of the front page and menu system.

That looks great. I really like the way it draws you in to the news articles, and I really like the choice of colour and fonts. I can see everything being shiny shiny.

Another thing I've been thinking about a lot is social networking. Each page/post should have its own "share" buttons for the main networks, but I think the front page should have something too. It should be a more general "like us on FB", "follow us on Twitter" style, rather than sharing individual articles. But where should they go in the layout?

I agree with Shademp about them being near the comments section for individual news posts, but for the general site as you've said I think the best place for such buttons is either where you've already put the RSS feed button, or at the right hand side of the "happening now" banner.

 

[Flintlock]

I think the best place for such buttons is either where you've already put the RSS feed button, or at the right hand side of the "happening now" banner.

As I envision it, that banner will be hidden when there is nothing happening, so I wouldn't want to put them there. Perhaps the menu bar is the place, then, though it's going to start getting a bit crowded. The footer is another alternative. I might come up with a more clear-cut design for the footer area, depending on what we finally put in there. Fangu and I were talking about it earlier but we're still going to think about it. And by we I mean all of us

 

[Lex]

I forgot to mention - about the tags in articles and pages that you mentioned earlier - are those going to be retained when the new site goes live? It's as easy as changing tick boxes in WP itself so it won't be hard to be conscious of this in the future, however it's a bit of a bother to go back and re-tag every article and page that's been written XD.

 

[Flintlock]

We will definitely use categories, but as for tags, I'm not sure. I'd say it's for Shademp and Fangu to decide. Whether or not we use them after the relaunch, there's no need to go back and remove all the old tags. They can just be hidden if necessary.

 

[Lex]

By tags, I meant categories. I.e. "Posted under Final Fantasy VII" as almost everything currently is, even when it's in no way related to VII. Since it's easy to create new categories while an article or page is being written, there should probably be a notice to everyone who writes to be more conscious of this.

 

[Fangu]

Most posts are already sorted under categories in a way that makes somewhat sense, so I don't think that will to be too much work. Sure, a lot of them are in the default "Final Fantasy VII" category, but I still think the categorization has been done fairly well.

The front page "articles previews" only pulls out the first category for each post though (as it is now anyway) so authors will have to stick to 1 category, or, they can mark the post with several, but only the first will show up. (The alternative is to pull out all categories, however that won't make the design as pretty.)

This is only for Posts btw - as in "News Posts". A lot of the old Posts will be made into Pages, hence losing their Categories and Tags (not really "losing" as they will still be stored in the database for each post, but just not used), and gaining the Parent Pages and Child Pages structure instead. (This is still some kind of categorizing as several child pages can be sorted under one parent page.)

 

[Shademp]

Edit: here is something a little different. The aforementioned rectangle is now semi-transparent, which means some of the background will show through it. It still looks like a fairly solid block of colour right now, but if you were to hover over Community or Highlights (and if it were real, and not just a picture), you would see some of the banner's designs with a blue overlay. I also added a little drop shadow, which will be done with CSS. I tried a light TLS colour but it looked wrong. Shadows are meant to be dark.

That looks better in my eyes. =)

Yes, I'll do it. Should have them done within a day or two.

Five months ago in a hidden thread, this list of items was decided for the Highlights section:
Guides & Translations
- Timeline of the Compilation
- Guide to FFVII Canon
- End of the LTD
- History of Deepground Revealed
- Unused Text Series
Commentaries & Fan Tributes
- Case of Tifa Audiobook
- ACC Commentary
- Final Dungeon Series

There is still room for change, of course. First of all, it may be needless work to come up with menu designs for the unclickable category headers Guides & Translations and Commentaries & Fan Tributes. Perhaps we should skip those headers entirely.

There is also yet to be a finished "TLS Community Events" page, meaning that the Final Dungeon series does not have a home all in one page as of yet. I figured that there should be the distinction between "Audio Commentaries" (the one Ryu is in charge of) and written commentaries in "Community Events" such as the Final Dungeon Series or 30 Days of Final Fantasy.

Input on this is appreciated. The reason I bring it up is because I feel we can't link to the Final Dungeon series in Highlights until all its articles are linked to in one index page.

The list of links in Highlights may still be changed of course.

 

[Lex]

So should I leave out the Final Dungeon series for now? Either way is fine, just let me know.

I'll try to find a way to distinguish the Guides & Translations and Commentaries & Fan Tributes section from each other without making it look like they're clickable links. Maybe some small-ish section image headers in the style of the previously used ones.

Also, if anything changes it's easy enough to change it later, I don't have a problem with that. It's good to have the page ready anyway.

EDIT: Do these new index pages require short summaries?
EDIT2: I feel a bit silly indexing index pages.
EDIT3: *Don't judge me at least I didn't quadruple post XD* I went to create an "About" page and realised Yop started one... in 2008. I don't want to start anything "About" related until he clarifies where he is on this.

 

[Fangu]

I went to create an "About" page and realised Yop started one... in 2008. I don't want to start anything "About" related until he clarifies where he is on this.

You can just use the old one. iirc it just says "(stuff to come here)" or something

Last night:

• Added the "categories" above the titles for Top Stories (it should pick the first category listed - how WP decides which category is "first" I haven't checked yet, but probably it's the category with the lowest ID, I'll check. In the future I'll add something in the WP Post Edit panel that lets you decide the "headlining" category.)
• Added the "Related articles". This is sorta not done yet, as it just spits out the 3 latest articles from the same category - which means it also lists a) the "Big Top Story" and b) any articles in the 3 other Top Stories. To fix this, I have to rewrite my functions.

Spoiler: ...and then there was some nerdy talk

This is the function that prints the 3 Top Stories beneath the big one. As you can see it's a foul mix of markups and PHP functional code. And yes, it's written in "old school Java style" and takes in 2 parameters. - I'm a n00b, deal with it. Functions like this has to be split into at least two functions. This function shown in the space below should return just the ID of the posts it's about to output. Then the "Related articles" can check if a post is already printed out on the front page, hence excluding it from "related articles".

	// Echo previews A to B
	function echo_n_post_preview($fromPreviewNo, $toPreviewNo) {
		$aString = 'posts_per_page=' . (string)$toPreviewNo; // Have to cast int to string
		query_posts($aString);
		$count = 1;
		while ( have_posts() ) : the_post();
			if ($count >= $fromPreviewNo) {
				if (get_post_type() =='post') { // Checks that post is 'post' and not 'page'
					echo('');
						$theID = get_the_ID();
						$theCategory = get_categories_for_post($theID);					
						echo('</p><div class="mediumimg">');
						echo('<img src="' . get_featured_image_medium($theID) . '" />');
						echo('</div>');
						echo('<p class="previews-stories-category"><a href="' . get_category_link($theCategory) . '">');
						echo(get_the_category_by_ID($theCategory));
						echo('</a></p><a href="');
						echo the_permalink($theID);
						echo('"><h2>');
						echo the_title();
						echo('</h2></a>');
					echo('');
				}
			}
			$count ++;
		endwhile;
		wp_reset_query();
	}

So that's the first thing on my to do-list when I get home. That, and fixing the "Featured image" stuff. Authors should be able to crop and change the Featured image on the fly, so it looks good on the front page. Important stuff IMO.

So yeah I'm leaving for vacation tomorrow. I'm not sure if I'm bringing the laptop yet. If y'all figure out the content structures and design, I'll do a list of what I simply HAVE to finish when I get back. Yop, if you want to raep my code, please beware that the style.css in the child theme filder ("Child test") is the only CSS you're supposed to edit. It inherits the style.css in the twentyeleven-folder and this CSS is NOT to be edited. Also, function.php in Child test is where you should put all the functionality, not edit twentyeleven in itself. Never ever. This also applies for stuff in wp-includes. You can use filters in function.php.

 

[Flintlock]

Something came to my mind when I was working on my draft, and seeing the latest live page reminded me of it. Notice how the small text I wrote under the main headline is a summary of the whole story, rather than an introduction. That's how all proper news sites do it, and I think that's how we should do it too.

If that wasn't clear enough, here's what I think I wrote on the draft:

A domain name registration by Square Enix sparks rumours of a remake or rerelease for the PC version of Final Fantasy VII. Read more

And here's what it currently says:

A re-release of the often forgotten PC version of Final Fantasy VII has been rumoured for years, due to the... more

The first one makes sense on its own. The easiest way to do that in Wordpress is to use the <!--more--> tag correctly. For example: first write the summary, then use the tag, then add an image, and then write the article as you would normally. That way the summary won't look out of place on the article itself, as it will be separated by an image.

Changing the wording of "more" to "Read more" or whatever else is straightforward enough too, according to the WP codex.

 

[Fangu]

The easiest way to do that in Wordpress is to use the <!--more--> tag correctly. For example: first write the summary, then use the tag, then add an image, and then write the article as you would normally. That way the summary won't look out of place on the article itself, as it will be separated by an image.

I wholeheartedly agree to this. It's the best way to do the excerpts (as WP calls them)/ summaries.

Changing the wording of "more" to "Read more" or whatever else is straightforward enough too, according to the WP codex.

Those ...'s and the "more" is already controlled in my code in our custom functions.php, so it can be changed in an instant. As it is right now, it counts x amounts of words (at the moment it's 20) but it can be changed. We can set it to cut at <!-- more -->, but to cut sooner if <!-- more --> happens after a certain amount of words. (The code should always correct any human mistakes.)

The picture can still come before the excerpt/ summary. The code checks if there are images in there and excludes them.

Spoiler: the code atm

Here's the excerpt function:

	// Creates 'custom made' the_excerpt
	// From http://smashingwp.com/tutorials/add-a-custom-excerp-size-in-you-wordpress-theme/
	function new_excerpt_firstpreview($id, $excerpt_length, $ending, $superending) {
		$post = get_post($id);
		$text = $post->post_content;
		//$text = get_the_content('');
		$text = strip_shortcodes( $text );
	
		$text = apply_filters('the_content', $text);
		$text = str_replace(']]>', ']]>', $text);
		$text = strip_tags($text);
	
		$words = preg_split("/[\n\r\t ]+/", $text, $excerpt_length + 1, PREG_SPLIT_NO_EMPTY);
		if ( count($words) > $excerpt_length ) {
			array_pop($words);
			$text = implode(' ', $words);
			$text = $text . $ending;
			return ''.$text.' '.$superending;
		} else {
			$text = implode(' ', $words);
			return '<p>'.$text.'</p>';
		}
	}

And here is where it is called, in echo_first_post_preview($id):

		echo('<p class="previews-topstoryexcerpt">' . new_excerpt_firstpreview($id, 20, '...'));
		echo('<a href="');
		echo(get_permalink($id));
		echo('">more</a></p>');

 

[Flintlock]

The picture can still come before the excerpt/ summary. The code checks if there are images in there and excludes them.

It's good to have that option, but if the article begins by repeating the content of the summary in different words, that's when it's better to have them separated so it doesn't look silly

 

[Shademp]

So should I leave out the Final Dungeon series for now? Either way is fine, just let me know.

Yes, you can leave it out for now. I already made a page called "TLS EVENTS Proto", with all the links I could find relating to community events and text-based commentaries.
You can look it up in Pages and see yourself what a mess it is. Many events have not been properly catalogued, with many posts presumably being lost in forum archive history due to being written in the forum instead of the front page.

Initially my plan was to have MOG handle this page, but the fella is out at sea, so... =/
I'm honestly not sure what to do with this page. I think it better to postpone the TLS Events page until after the redesign is up.

I'll try to find a way to distinguish the Guides & Translations and Commentaries & Fan Tributes section from each other without making it look like they're clickable links. Maybe some small-ish section image headers in the style of the previously used ones.

Also, if anything changes it's easy enough to change it later, I don't have a problem with that. It's good to have the page ready anyway.

I've taken a look now at the three extra index pages you've created. Awesome work.
The fourth one, "About" should not be too hard to make if you know the list of links that exist beneath the About menu option.

Note: Why do you have a space between FF and VII when writing "FFVII Compendium"? I sense it should not be written with a space inbetween, neither in the "Content" index page or the actual "FFVII Compendium" page name itself.

EDIT: Do these new index pages require short summaries?
EDIT2: I feel a bit silly indexing index pages.

Again, you seem to have made a good job already and it looks finished to me.
It is indeed silly to have this extra layer of index pages, but at least this provides us with a greater design consistency (other sites with menus like ThatGuyWithTheGlasses has *all* its menu links as clickable) plus we no longer have to worry about dropdown menus not showing up properly when browsing TLS via mobile devices.

Something came to my mind when I was working on my draft, and seeing the latest live page reminded me of it. Notice how the small text I wrote under the main headline is a summary of the whole story, rather than an introduction. That's how all proper news sites do it, and I think that's how we should do it too.

Sounds like this is worthy of a public announcement when the redesign happens, in the form of another "Attention all authors!" thread. I agree with this notion of emulating professional news sites.

 

[Fangu]

It's good to have that option, but if the article begins by repeating the content of the summary in different words, that's when it's better to have them separated so it doesn't look silly

Nah, if you up the size of the font and/or put it in bold, it doesn't look that strange IMO. It's like 2 sentence mini summary before starting the article. But I guess it's a matter of taste, it's up to the authors (or to Shademp if wants to set certain guide lines for writing.)

 

[Cthulhu]

Spoiler: ...and then there was some nerdy talk

This is the function that prints the 3 Top Stories beneath the big one. As you can see it's a foul mix of markups and PHP functional code. And yes, it's written in "old school Java style" and takes in 2 parameters. - I'm a n00b, deal with it. Functions like this has to be split into at least two functions. This function shown in the space below should return just the ID of the posts it's about to output. Then the "Related articles" can check if a post is already printed out on the front page, hence excluding it from "related articles".

	// Echo previews A to B
	function echo_n_post_preview($fromPreviewNo, $toPreviewNo) {
		$aString = 'posts_per_page=' . (string)$toPreviewNo; // Have to cast int to string
		query_posts($aString);
		$count = 1;
		while ( have_posts() ) : the_post();
			if ($count >= $fromPreviewNo) {
				if (get_post_type() =='post') { // Checks that post is 'post' and not 'page'
					echo('');
						$theID = get_the_ID();
						$theCategory = get_categories_for_post($theID);					
						echo('</p><div class="mediumimg">');
						echo('<img src="' . get_featured_image_medium($theID) . '" />');
						echo('</div>');
						echo('<p class="previews-stories-category"><a href="' . get_category_link($theCategory) . '">');
						echo(get_the_category_by_ID($theCategory));
						echo('</a></p><a href="');
						echo the_permalink($theID);
						echo('"><h2>');
						echo the_title();
						echo('</h2></a>');
					echo('');
				}
			}
			$count ++;
		endwhile;
		wp_reset_query();
	}

So that's the first thing on my to do-list when I get home. That, and fixing the "Featured image" stuff. Authors should be able to crop and change the Featured image on the fly, so it looks good on the front page. Important stuff IMO.

I largely blame Wordpress for making you write that, . Here's an attempt at refactoring, not tested:

// Echo previews A to B
function echo_n_post_preview($fromPreviewNo, $toPreviewNo) {
	query_posts("posts_per_page=$toPreviewNo"); 
	$count = 1;
	while (have_posts() && count++ < $fromPreviewNo) : the_post();
		if ($count++ < $fromPreviewNo) return; // all done
		if (get_post_type() != 'post') continue; // do not want, skip

		$theID = get_the_ID();
		$theCategory = get_categories_for_post($theID);	
		$imageUrl = get_featured_image_medium($theID);
		$categoryLink = get_category_link($theCategory);
		$categoryById = get_the_category_by_ID($theCategory); // ?
		$permalinkUrl = the_permalink($theID);
		$title = the_title();
		// heredoc magicks. Still no proper template language though.
		echo <<< fhtagn 
</p> <!-- ? -->
<div class="mediumimg">
	<img src="$imageUrl" />
</div>
<p class="previews-stories-category">
	<a href="$categoryLink">
		$categoryById
	</a>
</p>
<a href="$permalinkUrl">
	<h2>$title</h2>
</a>
fhtagn;
	endwhile;
	wp_reset_query();
}

 

[X-SOLDIER]

• There're some YouTube videos with translations for all the BC Episodes that might be worth linking to in the BC index.

• With DoC's videos being split up into really detailed chapters, Crisis Core should include an equally detailed link IN ADDITION to the full playlist, rather than JUST the playlist.

• I think each content page having its own credit would be the best plan.

• I'm looking forward to see how you split up the Novella's content, etc.

Aside from that, sorry it took me so damn long to reply back to you about this thread.



X

 

[Lex]

• There're some YouTube videos with translations for all the BC Episodes that might be worth linking to in the BC index.

I shall take care of this

 

[Shademp]

I shall take care of this

Isn't that Hcloud13's playlist you are referring to, which is already linked to at the bottom of the index?
I won't object though if somebody wants to place the link at the top of the page.

 

[Lex]

I was referring to the link I'll be including in the franchise guide article when I write it .

 

[Shademp]

Due to the positive reception these index pages received, I have now integrated them into the front page. Go to under "Content Information" to see. MAP!

The old Dissidia link on there simply led to the news archive. For the sake of consistency, and not wanting to remove the link entirely, I published a Dissidia Index Page.

X-SOLDIER approved of these Index Pages, so I don't think he will mind if we delete the old Forum Index pages such as Compilation of FFVII. If nobody has any objections, I'll request for a forum mod to remove these old stickies.


I also went ahead and made a video for the main story of Dirge of Cerberus. The original uploader did not have a playlists, so to prevent a long-ass list of links the index page now simply links to the playlists.
- Main Story

*EDIT:
Wow, turns out that the YouTube channel "FFVIIExcavation" has a playlist for not only the Online Mode cutscenes, but also for gameplay!

Playlist

 

[Flintlock]

May I enquire as to the current status of this project?

 

[Fangu]

Shademp is informed about the delay.

Needs to be finished from your design thingy, Flint:

• The border
• The two boxes with 'lates from the forums' etc beneath the previews

I've done the rest (I think, have a look.)

Other than that, there is the issue of the Featured Image for the previews. As it is now, the pictures are auto-cropped to a set size. I have a feeling this is going to be massive complaint numeros unos from authors, so it has to be fixxed. I've talked to Yop about it. He said 'ugh yeah, that.' Which are my feelings as well.

Then I had a long honest rant about a few things which I deleted because it's really unrelated to the project itself. So, to sum it up: Various things makes me really tired just thinking about the FFP right now. Thank you Shademp for being patient and wonderful, and I'm sorry for the delay.

So as I said to Shademp by PM the other day: Yop and I need to agree on some stuff. When we can find the time we'll look at it.

 

[Cthulhu]

As far as I'm concerned, I just need a checklist of doable tasks that don't require a lot of visual creativity from my side or digging in Wordpress' atrocious code, just so we can visualize what still needs to be done. And someone whipping me to do it.