Tagged blogging with Ditto (ex.2)

This is possibly one of the easiest ways to display tags on your pages. It's quick and pretty easy to follow.

In the page where you wish to show your tags, add the following:

<ul>
[[Ditto?
&documents=`[*id*]`
&tagDocumentID=`10`
&tagData=`myTags`
&tpl=`DittoTags`
&tplTagLinks=`DittoTagLinks`
&tagSort=`1`
&tagDelimiter=`,`
&tagDisplayDelimiter=` `
]]
</ul>

Note: if you have a bespoke template for your news / blog posts, simply add the call directly to it.

Understand the snippet call

  • &documents = Uses the current resource / page ID

  • &tagDocumentID = The landing page / resource where all the results are shown, no matter what tag is selected e.g domain.com/tags?tag=tagname

  • &tagData = is the Template Variable with all the tags e.g

    red||green||blue||orange
  • &tpl uses the {{DittoTags}} chunk, which has the following in it:

    [+tagLinks+]
  • &tplTagLinks uses the {{DittoTagLinks}} chunk, which has the following in it:

    <li><a href="[+url+]" rel="tag">[+tag+]</a></li>
  • &tagSort = Set to "1" tells the snippet to sort the output alphanumerically

  • &tagDelimiter = Is set to the delimeter that was pre-defined in the TV

  • &tagDisplayDelimiter = In this current call, it tells the snippet to not use a delimeter on the page

For more information about the parameters for the "Tagging extender", take a look here

Now that the article / blog / news page has been created and it displays the tags that are specific to its' content, we now have to create the snippet call for the landing page.

In your landing page add the following:

<ul>
[[Ditto?
&parents=`1,2,3,4,5`
&orderBy=`id DESC`
&tagData=`myTags`
&tagDelimiter=`,`
&tagDisplayDelimiter=` `
&tpl=`MyDisplayOutput`
&summarize=`10`
&paginate=`1`
&paginateAlwaysShowLinks=`1`
&showInMenuOnly=`0`
&showPublishedOnly=`1`
&tplPaginatePage=`DittoPaginatePage`
&tplPaginateCurrentPage=`DittoPaginateCurrentPage`
&tplPaginatePrevious=`DittoPaginatePrevious`
&tplPaginatePreviousOff=`DittoPaginatePreviousOff`
&tplPaginateNext=`DittoPaginateNext`
&tplPaginateNextOff=`DittoPaginateNextOff`
]]
</ul>
<p>Results: [+start+] to [+stop+] of [+total+]</p>
<p>Page [+currentPage+] of [+totalPages+]</p>

Some pointers to the call

1) Individual items output display / appearance

{{MyDisplayOutput}} is the custom chunk which determines how the individual results are displayed on page. You don't have to use a custom chunk, you can of course use the default template.

If you don't provide / define a custom chunk in the &tpl=`` parameter, the default template will be used, as seen here:

<div class="ditto_item" id="ditto_item_[+id+]">
<h3 class="ditto_pageTitle"><a href="[~[+id+]~]">[+pagetitle+]</a></h3>
<div class="ditto_documentInfo">by <strong>[+author+]</strong> on [+date+]</div>
<div class="ditto_introText">[+introtext+]</div>
</div>

The default template can be found in the Ditto language file(s): "assets/snippets/ditto/lang/*.inc.php", where "*" is your language of choice, under:

$_lang['default_template']

But I would suggest you make your own template.

2) The paginated navigation and how it is displayed

The pagination templates are down to you, there are realy three main choices:

  • Use the default templates as set down in the pagination parameters - this is the default behaviour if no custom code / chunk is / are defined.

  • Create your own using chunks (one for each parameter) which contain the relevant code

  • Add your code directly to the snippet call, using @CODE, similar to the following:

    &tplPaginatePage=`@CODE <li><a href="[+url+]">[+page+]</a></li>`
    &tplPaginateCurrentPage=`@CODE <li>[+page+]</li>`
    &tplPaginatePrevious=`@CODE <li><a href="[+url+]">[+lang:previous+]</a></li>`
    &tplPaginatePreviousOff=`@CODE <li>[+lang:previous+]</li>`
    &tplPaginateNext=`@CODE <li><a href="[+url+]">[+lang:next+]</a></li>`
    &tplPaginateNextOff=`@CODE <li>[+lang:next+]</li>`

3) Paging information / placeholders

More information about the following pagination placeholders [+start+], [+stop+], [+total+], [+currentPage+], [+totalPages+] can be found here

I think the rest of the call is self-explanatory, but if you do need help with the other Ditto parameters, take a look here.

A different solution is to use "tagLinks".

Suggest an edit to this page.