Using different styles for latest news articles

8 posts by 3 authors in: Forums > CMS Builder
Last Post: May 26, 2009   (RSS)

Hi, there.

I have a template that I'd like to adapt for CMSB: http://www.yallaf1.com/index.php. I can add the news articles without any problems, but I'd like to be able to arrange the headlines page as follows:

- The latest article has a large photo and a intro description
- The next two articles have smaller photos and intro descriptions
- The next five articles don't show photos or intro descriptions

Is this possible?

Thanks!
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net

Re: [NigelGordijk] Using different styles for latest news articles

By Damon - May 25, 2009 - edited: May 25, 2009

Hi Nigel,

>[font "Verdana"]Is this possible?

[font "Verdana"]Absolutley. I'm sure there is many ways to do this, here is my way:

[font "Verdana"]The code consists of three IF statments:
1. Top Story - if the counter is 1 then output top story code, or if the article index page is greater than 1, and use the top story page. It looked like on your site that you were using the top story format (large image) on the additional pages.
2. Next Two Stories - if the stories are number 2 or number 3, use the code to output the small images etc.
3. Last Five Articles - if the story number is greater than 3, use the code that outputs only the title (with link) and date, no images.

Change the details to match your setup (ie. $newsRecords, etc.)


[font "Verdana"]Here is the settings I used for thumbnails:
[img]http://www.interactivetools.com/iforum/Products_C2/CMS_Builder_F35/Using_different_styles_for_latest_news_articles_P71964/gforum.cgi?do=post_attachment;postatt_id=2532;t=search_engine[/img]

[font "Verdana"]-----------------------------------------------------------------------------
[font "Verdana"]<?php $counter = 1; ?>
<?php foreach ($newsRecords as $record): ?>

<?php if(($counter == 1) || ($newsMetaData['page'] > 1)) : ?>
<!-- TOP STORY -->
<?php foreach ($record['uploads'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath2'] ?>" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php echo $upload['thumbHeight2'] ?>" alt="" /><br/>
<?php endif ?>
<strong><a href="<?php echo $record['_link'] ?>"><?php echo $record['title'] ?></a></strong><br/>
<?php echo date("D, M jS, Y", strtotime($record['date'])) ?><br/>
<?php echo $record['summary'] ?><br/>
<?php endforeach ?>
<hr />
<!-- END TOP STORY -->

<?php elseif(($counter > 1) && ($counter < 4)) : ?>
<!-- NEXT TWO STORIES -->
<a href="<?php echo $record['_link'] ?>"><?php echo $record['title'] ?></a><br/>
<?php foreach ($record['uploads'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" align="left" /><br/>
<?php endif ?>
<?php endforeach ?>
Date: <?php echo date("D, M jS, Y", strtotime($record['date'])) ?><br/>
<?php echo $record['summary'] ?>
<br clear="left" />
<hr />
<br clear="left" />
<!-- END NEXT TWO STORIES -->

<?php elseif($counter > 3): ?>
<!-- FIVE ARTICLES -->
<a href="<?php echo $record['_link'] ?>"><?php echo $record['title'] ?></a><br/>
Date: <?php echo date("D, M jS, Y", strtotime($record['date'])) ?><br /><br />
<!-- END FIVE ARTICLES -->


[font "Verdana"]<?php endif; ?>
<?php $counter++ ?>
<?php endforeach; ?>
[font "Verdana"]-----------------------------------------------------------------------------

Hope this helps. Let me know how this works out for you.
Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Attachments:

thumbnail_settings.jpg 25K

Re: [Damon] Using different styles for latest news articles

By NigelGordijk - May 25, 2009 - edited: May 26, 2009

Thanks, Damon. For the most part, this seems to be working, but I have a couple of problems.

http://www.yallaf1.com/stories.php

1. You can see that an error message appears before all of the articles, except for the first:

Notice: Undefined variable: top_storiesData in /home/yallaf5/public_html/stories.php on line 238

Line 238 of my code is:

<?php if(($counter == 1) || ($top_storiesData['page'] > 1)) : ?>

====

2. When you click on a headline link in the left hand part of the page - e.g. "Ferrari take 'significant' step" - the page it links to seems to ignore the stylesheet. However, if you click on the same headline that is in the "More Top Stories" section, the page displays correctly. Any idea why this is?

Kind regards,
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net

Re: [ross] Using different styles for latest news articles

Hi, Ross.

Thanks so much for your help. I've solved the problem with the error messages.

As for the stylesheet issue, I added "/" as you suggested, but the page started doing weird things with a couple of iframes. I deleted the seo code, and this seemed to cure all the problems.

The seo code didn't seem to be working with the Google custom search engine anyway, so I'll probably just use CMSB's search engine for individual sections.

Thanks again,
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net

Re: [ross] Using different styles for latest news articles

Sorry to bug you with more questions, but I'm stuck on a couple of other points.

===

1. Is it possible to insert photos with captions at different points within the text of a news article-style page? This is how I'd like the page to look - http://www.commonsensedesign.net/extranet/yallaf1/sitebuild/stories.php - and this is the current state of my CMSB template - http://www.yallaf1.com/storiesDetail.php?Whiting-says-Hamilton-apologised-for-lies-1. I know how to embed a photo using the wysiwyg editor, but I can't figure out how to add captions, too.

===

2. Have you come across a countdown clock script that can be integrated into CMSB? My client would like to be able to type a date/time into the CMS and have it count down to an event, a bit like the clock near the top of this page: http://news.bbc.co.uk/sport1/hi/motorsport/formula_one/default.stm

===

Many thanks,
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net

Re: [NigelGordijk] Using different styles for latest news articles

By Damon - May 26, 2009

Hi Nigel,

When embedded images into content using the WYSIWYG editor, their is no default way to add captions. But that said, I did a quick search and found this jquery solution that grabs the alt text and outputs it after the image in paragraph tags.
http://www.newmediacampaigns.com/page/jcaption-a-jquery-plugin-for-simple-image-captions

I haven't used this before but the example works. You just need to strip out most of their CSS which overlays the text over the image.

For countdown clocks nothing came to mind so another quick search turned this up:
http://keith-wood.name/countdown.html
Again I haven't used this, but it looks like it fits the bill.

Hope that helps. :)
Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Damon] Using different styles for latest news articles

Thanks so much for your advice, Damon. I'll give these a try.

Regards,
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net