FitPro News
Table of Contents
Details
- Date Completed:21 February 2007
- Days/hours spent:3 days, 1 hour
- About the company:Fitness Professionals
- Software used:Photoshop CS, TextMate
- Tag:CSS, MySQL, PHP, WordPress, XHTML
Currently working on…
Lots of freelance and e-commerce projects.
Latest Work
Search Portfolio
I developed and designed using WordPress and hand coded XHTML and CSS this website as FitPro's Middleweight Web Designer.
1. Introduction
The FitPro news website came out of an idea to centralise the way we distribute news across the various websites. There wasn't one place where news was stored and shown. It would also be a good site to promote any activities rather than send useless emails which could annoy users.
Now here was a great chance for us to use the power of WordPress.
2. WordPress
This weblog application just shows what people can create with the power of open-source software. Setup for WordPress was easy as chips; creating a database in MySQL and going through the installation steps and 15 minutes later WordPress was up and running.
What I enjoyed the most was the way I could create brand new template for the site. All I had to do was copy the current template folder, rename it then set the new template as default in the admin section.
3. Design
The design of the FitPro News was kept to a minimum due to on going projects and its priority status. We already had a FitPro generic style, complete with HTML and CSS. So in retrospect most time was spent on the identity development.
The FiPro generic top menu.
The FiPro generic footer.
4. Identity
When I begun thinking about the logo and style we'd want to project. Being a news website, I had a look at some other websites; their layouts, colour schemes and fonts.
The CNN website consists of its logo integrated with the menu, search and other services.
The CNN website banner.
I wanted to add some kind of symbolism to the FitPro News logo, so that it could be used across all the FitPro's websites and be recognisable. After much experimental I decided to this "swoosh" below the logo.
The FitPro news logo with the swoosh.
The FitPro home page with the news column.
The BTS home page with the news column.
5. XHTML & CSS
I used the XHTML and CSS was already developed for under FitPro's generic branding.
6. Development
PHP
I realised there would need to be an automatic method of adding images to each news article without having to place the image inside the article's HTML. I decided create a function which would scan the upload folder depending on the ID and created date of the article's ID. So that an author would only have to rename the image as 'article-5,jpg' if the article ID was 5.
<?php
$date = explode('-', $post->post_date);
$image_ext = array( '.jpg', '.png', '.gif' );
$image_filename = realpath('.').'\wp-content\uploads\'.$date[0].'\'.$date[1].'\'.'article-'.$post->ID;
$image_http = str_replace('index.php', '', $_SERVER['SCRIPT_NAME']).'/wp-content/uploads/'.$date[0].'/'.$date[1].'/'.'article-'.$post->ID;
?>
<?php foreach( $image_ext as $value ): ?>
<?php if ( file_exists($image_filename.$value) ) : ?>
<img src="<?php echo $image_http.$image_ext[0]; ?>" alt="" class="float" />
<?php endif; ?>
<?php endforeach; ?>
The article's date was spilt into an array, then the first and second values of the date, and the article's ID were assigned to the $image_filemane. This is because WordPress places files uploaded in a specific structure /uploads/YEAR/MONTH/. Then I had to find the HTTP file path which would be used like so <img src="<?=$image_http?>" />.
Now foreach loop would scan through the correct folder looking for a either a JPEG, PNG or GIF file which was labeled as mentioned above.
Coldfusion
Most of the FitPro websites were built on ColdFusion and there was important to be able to access the MySQL database and gain access to the articles. I used the ColdFusion Administrative site and added another data source using the MySQL driver. Then I created a mircoformat page, which accessed the WordPress database and got articles for a specific category.
<cfset news_category = 'Spring Convention'>
<cfquery name = "news" datasource = "#application.fitpro_news_database#">
SELECT wp_posts.guid, wp_posts.post_title, wp_posts.post_excerpt
FROM wp_categories, wp_post2cat, wp_posts
WHERE wp_categories.cat_name = '#news_category#'
AND wp_posts.post_status = 'publish'
AND wp_categories.cat_id = wp_post2cat.category_id
AND wp_posts.ID = wp_post2cat.post_id
LIMIT 4;
</cfquery>
<cfoutput>
<div id="news">
<h2>#news_category# News</h2>
<cfloop query = "news">
<h3><a href="#guid#" title="View news: #post_title#">#post_title#</a></h3>
<p>#post_excerpt#</p>
</cfloop>
</div>
</cfoutput>
After studying the way WordPress integrated its articles and categories. I wrote the above query, which would get all the articles under the a specific category limiting the results to 4. These results then be outputted through ColdFusion's <cfloop> function. Now it was easy for anyone from the web department to add a news section to a ColdFusion page as the following is self contained requiring no external functionality