Using different styles for latest news articles

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.

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,

Hi Nigel

I'll go over your questions one at a time :).

1. That error is saying the variable you are trying to use doesn't exist which is odd, because it should. I suspect the problem is a typo. Could you double check that it's spelled the same as the one you see up at the very top of your page in the viewer code section.

To just get rid of that error message try changing the line of code to:

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

Notice that I added in the @ symbol. That will suppress the error message you are getting.

2. The problem here is related to the SEO friendly links we got you to turn on in that other thread. If you look at the URLs those pages go to, the one that doesn't work uses "/" and the one that works uses "?" and "&".

Basically, on the first link, your page can't find its stylesheet because the path is different now. What you'll want to do is on storiesDetail.php, put a "/" in front of the path you have for your stylesheet. That will fix it all up and both links will work.

Let me know how you make out with all this. Thanks!

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,

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,

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. :)

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

Regards,