Jump to:

3460 Posts in 1064 Topics by 739 members

Data Model Questions

SilverStripe Forums » Data Model Questions » news on home page

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1186 Views
  • fraxter
    Avatar
    Community Member
    8 Posts

    news on home page Link to this post

    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

  • jak
    Avatar
    Community Member
    46 Posts

    Re: news on home page Link to this post

    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.

  • fraxter
    Avatar
    Community Member
    8 Posts

    Re: news on home page Link to this post

    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

  • jak
    Avatar
    Community Member
    46 Posts

    Re: news on home page Link to this post

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

    HTH
    Jak

  • fraxter
    Avatar
    Community Member
    8 Posts

    Re: news on home page Link to this post

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

    Rgds
    Peter

  • fraxter
    Avatar
    Community Member
    8 Posts

    Re: news on home page Link to this post

    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

  • jak
    Avatar
    Community Member
    46 Posts

    Re: news on home page Link to this post

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

  • fraxter
    Avatar
    Community Member
    8 Posts

    Re: news on home page Link to this post

    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

    1186 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.