Tagged blogging with Ditto (ex.1)

Creating the TV

Log into your Evo admin interface and create a new template variable. In this example we will name our tv "tags". The input type for this tv will be a "Check Box". The input option values will be our tag names separated by double pipes "||".

Select "Delimited List from the Widget dropdown and our delimiter will be a comma ",". Place a check next to the template(s) that will be using this tv, then click "Save".

Now when you edit or create a document with a template associated with this tv, you will see a check box for each item you entered in the input option values. You can select as many or as few of these tags as you want.

Category Pages

Category pages are like folders for your tagged items. These differ from folders, however, because a document can have multiple tags and exist in multiple category pages at the same time.

We are going to create a Category Page for each of our tag items. In our example, we are going to create a page for Personal (alias = personal), Evo (alias = Evo), Web Design (alias = webdesign), and of course Pirate (alias = pirate).

In this tutorial I have Evo configured to use Friendly Alias Paths, so First I created a document Titled "Categories" with an alias of "categories" and on the "Page Settings" tab, I checked "Container". I will create each of my category pages in this container (or folder if you will). so for the category page for Web Design, the url will be mysite.url/categories/webdesign.

The index page on my site is id "1". On this page I have a Ditto call to gather all the documents in my blog folder which is id "2" with this Ditto call:

[!Ditto? &startID=`2` &tpl=`dittoTpl` &summarize=`5`!]

On each of the category pages I am going to place a Ditto call and use ditto to filter the results to return only items tagged as "Web Design" like this:

[!Ditto?
&startID=`2`
&tpl=`dittoTpl`
&tagData=`tvtags`
&tagDelimiter=`,`
&tagMode=`onlyTags`
&tags=`Web Design`
!]

The important parameters to note here are:

  • &tagData: This tells ditto which tv to look in for tag data. it is the name of our tv (tags) prefixed by the letters "tv".

  • &tagDelimiter: In our tv we set our widget to Delimited List and the delimiter to a comma (,).

  • &tagMode: Setting this to "onlyTags" will return only the items that have this tag checked. it will return All items checked with "Web Design" regardless of which other tags are also checked.

  • &tags: tells ditto which tag to search for. Spelled and spaced exactly as we set it when we made the tv.

The Ditto &tpl parameter

In the example we are working with we are going to be using the templating function of Ditto to tell Ditto how we want our blog Items to be displayed. In this example of a ditto template, I will be using the snippet [[tagLinks]] to output a list of the tags associated with each document which are links to the respective category pages we made earlier that will aggregate only blog entries with that tag.

I will also be using Jot to display the number of comments on each blog entry and it will also be a link to the page anchor #pageComments which I have placed at the beginning of the comments section on each page.

<p><div class="ditto_summary">
<div class="ditto_head">
<h3><a href="[~[+id+]~]">[+date+]</a>: [+title+]</h3>
<div class="commentCount"><a href="[~[+id+]~]#pageComments">[[Jot? &docid=`[+id+]` &action=`count-comments`]] comments.</a></div>
[[tagLinks? &id=`[+id+]` &tv=`tags` &separator=`, ` &fap=`1` &path=`categories` &label=`Tags: ` &style=`dittoTags`]]
</div>
<div class="ditto_content">
<p>[+summary+]&nbsp;[+link+]</p>
</div>
<div class="ditto_author"></div>
</div></p>

In this template, I am using the [+date+] as the link to the full article, followed by the [+title+] for more info. The next line holds the comments count. I used Jot with the action of count-comments and the id of Ditto's placeholder for the id of the summarized document. If we used [*id*] it would return the comments for the page we are on (id "1" at the moment).

The next line is our tagLinks call. Full documentation for the tagLinks snippet is next. for now, we are telling the tagLinks snippet to get the tags for the page [+id+] (Ditto's reference to the summarized article again), that the tv holding our tags is called "tags", that we want a comma followed by a space (, ) to separate each tag, that we are using Friendly alias paths (fap = boolean affirmative), that the friendly path to our category pages is "mysite.url/categories/", that before we render the links we want it to say "Tags: " (Tags: Web Design, Pirate,), and finally that the element (div) that this is wrapped in should have be rendered as <div class="dittoTags"> for styling purposes.

Using the tagLinks snippet, we will output a list of links of the tags that are attached to the document. These links will bring the visitor to the associated "Category Page" where they can view other items with the same tag.

Call as <a href=""> tags in a paragraph block (<p></p>) inside a Ditto tpl with a pipe as the separator and a CSS class of "myTags".

[[tagLinks?
&id=`[+id+]`
&tv=`tags`
&separator=` | `
&element=`p`
&style=`myTags`
]]

Suggest an edit to this page.