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   1228 Views

Avatar
fraxter

Community Member, 8 Posts

30 May 2012 at 9:48pm

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

Community Member, 46 Posts

11 July 2012 at 9:41pm

Edited: 11/07/2012 9:42pm

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

Community Member, 8 Posts

13 July 2012 at 8:34am

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

Community Member, 46 Posts

13 July 2012 at 9:54am

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

HTH
Jak

Avatar
fraxter

Community Member, 8 Posts

13 July 2012 at 5:24pm

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

Community Member, 8 Posts

18 September 2012 at 6:01am

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

Community Member, 46 Posts

18 September 2012 at 7:10am

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

Avatar
fraxter

Community Member, 8 Posts

18 September 2012 at 8:18am

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