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

Avatar
jdi

Community Member, 34 Posts

24 October 2009 at 4:47am

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

Community Member, 532 Posts

25 October 2009 at 3:58am

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

Community Member, 34 Posts

26 October 2009 at 8:39am

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