You do need to read the documentation, but here’s a DItto call I’ve used to display the content just as you described:
[[Ditto? &startID=`2` &summarize=`3` &removeChunk=`Comments` &paginate=`1` &extenders=`date,summary,dateFilter` &dateSource=`pub_date` &dateFormat=`%b %d, %Y` &sortBy=`pub_date` &sortDir=`DESC` &paginateAlwaysShowLinks=`1` &tagData=`documentTags` &tplFirst=`DittoHighlight` &tpl=`DittoDisplay`]]
Let’s break this down:
- [[Ditto]] = this is the main call to invoke Ditto
- startID = this is the ID # of the document (which is a folder) I’m going to be pulling the content from
- summarize = this is the number of posts (if you’re thinking in blog terms) that I’m going to display
- removeChunk = I don’t want to show any comments any of these posts might have on the homepage
- extenders = I’m telling Ditto that I’m going to need & display the functions that relate to the date, summary, & dateFilter
- dateSource = I’m telling Ditto where to grab the date from within each of these posts (createdon is another option)
- dateFormat = Formats the date string according to my parameters
- sortBy = sorts the order of th posts
- sortDir = the sorting order (ASC is another option)
- paginate... = I think this is to paginate the posts if they go past the number I’ve specified in &total (which I haven’t declared here)
- tagData = enables tagging within Ditto of these posts
- tplFirst = this is the template (which is another Chunk) the tells Ditto how to format the very first post
- tpl = this is the Chunk template that specifies how to format all the other posts. These two last entried are crucial is you want to have your posts formatted differently as you described.
And here’s my Chunk for the tplFirst (DittoHighlight):
<div class="highlight">
[+topstoryIMG+]
<h3><a href="[~[+id+]~]">[+title+]</a></h3>
<h5>Posted by [+author+] on [+date+].</h5>
[+content+]
<p class="more">[+link+]</p>
</div>
And my Chunk for the tpl (DittoDisplay):
<div class="column-in">
<h3><a href="[~[+id+]~]">[+title+]</a></h3>
<h5>Posted by [+author+] on [+date+].</h5>
[+introtext+]
<p class="more">[+link+]</p>
</div>
These Chunks are nearly the same, but I’m applying different CSS stylings to them. Hope this helps!