Doclister Tags in Ditto Style

Tutorial and resources to replace Ditto Blog tags with Doclister

Goals

Create a Blog like in Ditto, with tags
Create a Tags Landing page like Ditto with DocLister
Tags URLS like Ditto: 100% compatible with TagLinks and TvTagCloud snippets. ie: tags.html?tags=tag+test
Display tags in Doclister item
Display tags on (item) page

Inspirations:

evolution-cms/evolution#176
evolution-cms/evolution#451
solution idea by @pmfx evolution-cms/evolution#176 (comment)

Included Extras

DLlandingTags snippet: based on run_doclister_blog by @pmfx - renamed, added tagTV parameter, tags placeholder, more dl params and improved to fit ditto tags url parameters (&tags=)
DLitemTags snippet: based on run_doclister_itemTags by @pmfx - just renamed 😄
taglinks https://modx.com/extras/package/taglinks
TvTagCloud https://github.com/extras-evolution/TvTagCloud

Create a Doclister Blog like in Ditto or Update your old Ditto Blog to Doclister

NOTE: the tutorial is based and tested on evolution 1.4 demo content

1) Blog Page (id 2)

Doclister example call for the main Blog Page

Note: tag tv: documentTags

[[DocLister? 
	&jotcount=`1`
	&parents=`2` 
	&display=`2`
	&tvPrefix=``
	&tvList=`image,documentTags`
	&prepare=`prepareBlog`
	&summary=`notags,len:350` 
	&paginate=`offset` 
	&extender=`user` 
	&usertype=`mgr` 
	&userFields=`createdby,publishedby` 
	&tpl=`blogTPL` 
]]

<p>Showing <strong>[+current+]</strong> of <strong>[+totalPages+]</strong> Pages</p>
[+pages+]

Ditto-like pagination : offset

Setting &paginate to offset &paginate=`offset` instead &paginate=`pages` enable ditto-like pagination mode with url parametrs like Ditto: blog.html?start=2 instead blog.html?page=2 like use Doclister.

This avoid 404 errors with pagination when updating an old Ditto Blog

credits Pathologic : evolution-cms/evolution#176 (comment)

2) blogTPL

<div class="dl_summaryPost">
			[+blog-image+]	
			<h3><a href="[~[+id+]~]" title="[+e.title+]">[+e.title+]</a></h3>
			<div class="dl_info">
				By <strong>[+user.username.createdby+]</strong> on [+date+].
				<a href="[+url+]#commentsAnchor">Comments <span class="badge">[+jotcount+]</span></a>
			</div>
			[+summary+]
			<p class="dl_link">[+link+]</p>
		</div>

3) Now... The Tag Landing page

Install DLlandingTags snippet
DLlandingTags for the Tag Landing page

Add to your new tag landing page (ie: id 50)

[[DLlandingTags? &parents=`0` &paginate=`1` &tpl=`blogTPL` &tagTV=`documentTags` &display=`10` &depth=`4` &tvList=`image,documentTags`]]

I've added to DLlandingTags the tags placeholder so you can output the current tag in longtitle or other field, like in the old fashioned way 😄

4) Add tags to blogTPL

Note: id of Tag Landing page: 50

Method 1)

With DLitemTags

<div class="dl_summaryPost">
			[+blog-image+]	
			<h3><a href="[~[+id+]~]" title="[+e.title+]">[+e.title+]</a></h3>
			<div class="dl_info">
				By <strong>[+user.username.createdby+]</strong> on [+date+].
				<a href="[+url+]#commentsAnchor">Comments <span class="badge">[+jotcount+]</span></a> Tags: [[DLitemTags? &id=`tags` &tags=`[+documentTags+]` &tagsLanding=`50`]]
			</div>
			[+summary+]
			<p class="dl_link">[+link+]</p>
		</div>

Method 2)

With tagLinks

<div class="dl_summaryPost">
			[+blog-image+]	
			<h3><a href="[~[+id+]~]" title="[+e.title+]">[+e.title+]</a></h3>
			<div class="dl_info">
				By <strong>[+user.username.createdby+]</strong> on [+date+].
				<a href="[+url+]#commentsAnchor">Comments <span class="badge">[+jotcount+]</span></a> [[tagLinks? &id=`[+id+]` &value=`[+documentTags+]` &separator=`, ` &path=`50` &label=`Tags: `]]
			</div>
			[+summary+]
			<p class="dl_link">[+link+]</p>
		</div>

Add tags on the page

With tagLinks

[[tagLinks? &tv=`documentTags` &separator=`, ` &path=`50` &label=`Tags: `]]

Add a Tag Cloud to the sidebar

With tvtagcloud

[[TvTagCloud? &parent=`2` &landing=`50` &tvTags=`documentTags` &showCount=`0`]]

pmfx / Doclister-Tags-in-Ditto-Style