Using different styles for latest news articles
8 posts by 3 authors in: Forums > CMS Builder
Last Post: May 26, 2009 (RSS)
By NigelGordijk - May 25, 2009
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!
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
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.
>[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/
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
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,
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
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 ross - May 26, 2009
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!
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!
-----------------------------------------------------------
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com
Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com
Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/
Re: [ross] Using different styles for latest news articles
By NigelGordijk - May 26, 2009
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,
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
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
By NigelGordijk - May 26, 2009
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,
===
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
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. :)
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/
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
By NigelGordijk - May 26, 2009
Thanks so much for your advice, Damon. I'll give these a try.
Regards,
Regards,
Nigel Gordijk
Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net
Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net