Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Data Model Questions

news on home page


Reply

8 Posts   1194 Views

Avatar
fraxter

30 May 2012 at 9:48pm Community Member, 8 Posts

Hi folks,

could You help me regarding to showing news on home page... I'd like to get 5 latest news on a home page [like in tutorial 2] but news should be displayed in one box but only one news should be displayed at the same time and news should change every 5 seconds... I'd like to get some kind of loop changing news information in news' div. Could somebody help me how could I receive this goal [how should I change code from tutorial 2]?

Many thanks in advance
Peter

Avatar
jak

11 July 2012 at 9:41pm (Last edited: 11 July 2012 9:42pm), Community Member, 46 Posts

Get the news as in tutorial 2 and then add some javascript to change which one is displayed. SilverStripe comes with jQuery, but you'll need to enable it.

In your HomePage.php

public function init(){
parent::init();
... //some other stuff
Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.min.js');
Requirements::javascript('mysite/javascript/newsrotation.js');
}


In your Homepage.ss

<% if LatestNews %>
<ul id="latest-news">
<% loop LatestNews %>
<li><% include ArticleTeaser %></li>
<% end_loop %>
</ul>
<% end_if %>

Now you'll need to create mysite/javascript/newsrotation.js, which will do the work:

var showNews = 1;
function rotateNews(){
var newsItems = jQuery('#latest-news li');
newsItems.addClass('hide');
jQuery('#latest-news li:nth-child(' +showNews+')').removeClass('hide');
showNews = showNews + 1;
if(showNews > newsItems.length){
showNews = 1;
}
}
jQuery(function(){
window.setInterval('rotateNews', 5000); //call rotate news every 5 seconds.
})

This assumes that in your CSS you somewhere defined a class hide:

.hide {
display: none;
}

Have a look around jQuery, it's a great library that offers many possibilities.

Avatar
fraxter

13 July 2012 at 8:34am Community Member, 8 Posts

Hi Jak,

many thanks for Your reply. I'm using SS 2.4.7 and question is if <% loop LatestNews %> will work overthere?

Rgds
Peter

Avatar
jak

13 July 2012 at 9:54am Community Member, 46 Posts

Hi, for silverstripe 2.4 it's control instead of loop.

HTH
Jak

Avatar
fraxter

13 July 2012 at 5:24pm Community Member, 8 Posts

Thanks again Jak. I will try Your solution as soon as possible and I will let U know how it works.

Rgds
Peter

Avatar
fraxter

18 September 2012 at 6:01am Community Member, 8 Posts

Hi Jak,

I have some problems, something doesn't work. Below i attached my codes.

// HomePage.php

<?php
/**
* Defines the HomePage page type
*/

class HomePage extends Page {
static $db = array(
);
static $has_one = array(
);
/* part changing icon in admin panel for 'home' */
static $icon = "themes/tutorial/images/treeicons/home";
}

class HomePage_Controller extends Page_Controller {

/*Function LatesNews simply runs a database query that gets the latest news articles
from the database. By default, this is five, but you can change it by passing a
number to the function. */

function LatestNews($num=2) {
$news = DataObject::get_one("ArticleHolder");
return ($news) ? DataObject::get("ArticlePage", "ParentID = $news->ID", "Date DESC", "", $num) : false;
}
function results($data, $form){
$data = array(
'Results' => $form->getResults(),
'Query' => $form->getSearchQuery(),
'Title' => 'WYNIKI WYSZUKIWANIA'
);
$this->Query = $form->getSearchQuery();

return $this->customise($data)->renderWith(array('Page_results', 'Page'));
}
parent::init();
Requirements::javascript('mysite/javascript/jquery-1.8.1.min.js');
Requirements::javascript('mysite/javascript/newsrotation.js');
}

}

// HomePage.ss

<div id="hcontent">
<div id="hcontent" class="linia1">
<div id="hcontent" class="komorka1">

</div>

<div id="hcontent" class="komorka2">
<div id="hcontent" class="baner">
</div>
<div id="hcontent" class="news">
<% if LatestNews %>
<ul id="NewsList">

    <% control LatestNews %>
<div>
       <li class="newsDateTitle" style="font-size: 1.2em"><a href="$Link" title="Czytaj wiecej o&quot;{$Title}&quot;">$Title</a></li>
       <li class="newsDateTitle" style="color: #949a94">$Date.Nice</li>
       <li class="newsSummary">$Content.FirstParagraph<br /><br /><a href="$Link" title="Czytaj wiecej o&quot;{$Title}&quot;">Wiecej &gt;&gt;</a></li>
</div>
    <% end_control %>
    </ul>
<% end_if %>
</div>
</div>
</div>
</div>

I use ss 2.4.7 and my code looks a bit different as You wrote... I don't know how to solved this issue...

Many thanks for help in advance
Peter

Avatar
jak

18 September 2012 at 7:10am Community Member, 46 Posts

I don't see any obvious problems with the code. Can you be more specific? What does not work?

Avatar
fraxter

18 September 2012 at 8:18am Community Member, 8 Posts

HI Jak,

thx for fast reply. I struggled a bit with code and it works finally. The problem was that after I made the changes, nothing really happend. I changed a bit HomePage.ss and newsrotation.js and it's ok.

This is my whole code:

//HomePage.ss

<div id="hcontent">
<div id="hcontent" class="linia1">
<div id="hcontent" class="komorka1">

</div>

<div id="hcontent" class="komorka2">
<div id="hcontent" class="baner">
</div>
<div id="hcontent" class="news">
<% if LatestNews %>
<ul id="NewsList">

    <% control LatestNews %>
<div class="latest-news">
       <li class="newsDateTitle" style="font-size: 1.2em"><a href="$Link" title="Czytaj wiecej o&quot;{$Title}&quot;">$Title</a></li>
       <li class="newsDateTitle" style="color: #949a94">$Date.Nice</li>
       <li class="newsSummary">$Content.FirstParagraph<br /><br /><a href="$Link" title="Czytaj wiecej o&quot;{$Title}&quot;">Wiecej &gt;&gt;</a></li>
</div>
    <% end_control %>
    </ul>
<% end_if %>
</div>
</div>
</div>
</div>

// HomePage.php

<?php
/**
* Defines the HomePage page type
*/

class HomePage extends Page {
static $db = array(
);
static $has_one = array(
);
/* part changing icon in admin panel for 'home' */
static $icon = "themes/tutorial/images/treeicons/home";
}

class HomePage_Controller extends Page_Controller {

/*Function LatesNews simply runs a database query that gets the latest news articles
from the database. By default, this is five, but you can change it by passing a
number to the function. */

function LatestNews($num=2) {
$news = DataObject::get_one("ArticleHolder");
return ($news) ? DataObject::get("ArticlePage", "ParentID = $news->ID", "Date DESC", "", $num) : false;
}
function results($data, $form){
$data = array(
'Results' => $form->getResults(),
'Query' => $form->getSearchQuery(),
'Title' => 'WYNIKI WYSZUKIWANIA'
);
$this->Query = $form->getSearchQuery();

return $this->customise($data)->renderWith(array('Page_results', 'Page'));
}
public function init(){

parent::init();
Requirements::javascript('mysite/javascript/jquery-1.8.1.min.js');
Requirements::javascript('mysite/javascript/newsrotation.js');
}

}

// newsRotation.js

var showNews = 1;
function rotateNews(){
var newsItems = jQuery('.latest-news');
newsItems.addClass('hide');
jQuery('.latest-news:nth-child(' +showNews+')').removeClass('hide');
showNews = showNews + 1;
if(showNews > newsItems.length){
showNews = 1;
}
}
jQuery(function(){
window.setInterval(function(){rotateNews()}, 5000); //call rotate news every 5 seconds.
})

One more time many thanks for Your time.

BR
Peter