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.

Customising the CMS

Displaying Child Objects in a categorized and tabbed format?


Reply

3 Posts   1071 Views

Avatar
jdi

24 October 2009 at 4:47am Community Member, 34 Posts

Hey Guys,

This forum is fantastic, I am learning so much from reading and following all the great support that goes on here.

I have a question - I'm sorry if this has been asked before - about going a step onward from the starter tutorial and adding some categorization to the article holder page which I have created following the tutorials instruction.

-----------------------------------------------------------------------------------

Here is my object class for the child pages (the articles):

class ArticlePage extends Page {
static $db = array(
'Date' => 'Date',
'Author' => 'Text',
'Introduction' => 'Text',
'ArticleThumb' => 'Varchar',
'ArticleHead' => 'Varchar',
'ArticleType' => 'Text'
);
static $has_one = array(
);
function getCMSFields() {
$fields = parent::getCMSFields();

$fields->addFieldToTab('Root.Content.Main', new CalendarDateField('Date'), 'Content');
$fields->addFieldToTab('Root.Content.Main', new TextField('Author'), 'Content');
$fields->addFieldToTab('Root.Content.Main', new TextField('Introduction'), 'Content');
$fields->addFieldToTab('Root.Content.Main', new TextField('ArticleThumb'), 'Content');
$fields->addFieldToTab('Root.Content.Main', new TextField('ArticleHead'), 'Content');
$fields->addFieldToTab("Root.Content.Main", new DropdownField('ArticleType', 'ArticleType', array(
'article' => 'Article',
'interview' => 'Interview',
'hot event' => 'Hot Event',
'competition' => 'Competition',
)), 'Content');

return $fields;
}
}

class ArticlePage_Controller extends Page_Controller {

}

-----------------------------------------------------------------------------------

Here is my ArticleHolder.php page:

<div id="Content" class="typography">
<% control Children %>
<div class="articleInt">

<div class="articleIntHolder">
<div class="articleIntThumb"><a href="$Link" title="Read more on &quot;{$Title}&quot;"><img src="$ArticleThumb" alt="$Title" /></a></$
<div class="articleIntro">
<h5><span class="typeType">$ArticleType :</span> $Title</h5>
<p class="articleDate">$Date.Nice</p>
<p class="articleText">$Introduction</p>
<a href="$Link" title="Read more on &quot;{$Title}&quot;">Read The Full Article</a>
</div>
</div>
</div>
<div class="articleIntFoot"></div>
<% end_control %>
</div>

-----------------------------------------------------------------------------------

You can view the page here:
http://www.brokenbeats.co.nz/articles/

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------

As you can see all I am able to do is display the articles in a simply list. But unfortunately the bulk of the content is making the page a scroll-fest so I'm hoping to do the following:

1. Within each tab, limit the number of currently displayed articles to 20 or less. Then create a link path at the bottom to display the rest of the un-listed articles e.g (Page: 1 | 2 | 3 | 4 ...)
2. Display the articles in a tabbed format, categorized by their 'ArticleType'.

At the moment achieving the first change would be great, I was hoping someone could assist me with some information on how to handle this?

If any of you feel inclined to help me understand how I can pass my list into tabs this would be fantastic. I understand that there may be some javascript and cookie work involved so I would appreciate even a simple description to help me handle the values needed?

Any help is appreciated and thanks so much for your time when reading this thread :)

Avatar
zenmonkey

25 October 2009 at 3:58am Community Member, 528 Posts

For the Tabs I'd just use jQuery and one of the many tabbed interface plugins.Personally I like semantic tabs plug-in because its semantic and gives your Javascript-less visitors a logical display. And just do an <% if ArticleType = x %> for each article type in your Children control.

As for paginating your results take a look at the way search results are rendered in Page_results.ss and the following recipe

http://doc.silverstripe.org/doku.php?id=private:recipes:pagination&s=morethanonepage

Avatar
jdi

26 October 2009 at 8:39am Community Member, 34 Posts

Just did the Pagination. Worked a treat! You can always check it out with the link in my first post.

I'm confident I understand you completely with the tabs also. I'll give it a crack at some point. I'm now starting to grasp how the handlers and scripts work in .ss files so your advice is near priceless in value. Cheers :D