15 - Tag Results Page with DevDemon Tagger

This chapter in our Building a Portfolio Site in ExpressionEngine 2 completes the implementation of tagging on our site, by creating the template that displays all the entries assigned the tag that the site visitor clicked on.

 
Download the EE Code for 15 - Tag Results Page with DevDemon Tagger

To re-cap where the site is before our work here:

  • The DevDemon Tagger module is installed
  • Each existing entry in the system is tagged
  • Tags are displaying on the blog multi-entry and single-entry templates
  • What we need now is the results template to display entries when a specific tag is clicked

From a design/user experience perspective our goal is a view that mimics the blog multi-entry view (provided by the blog/index template), with the complete entry for all tagged blog entry types fully showing. In other words, I don’t want just a list of entry titles for a chosen tag, but rather the whole entry like the blog/index template displays.

Reuse blog/index?
As soon as I say “it needs to look like this other template” your developer-brain should immediately think “let’s re-use that then, rather than create a new thing.” 

That’s a good idea.

Generally.

However - our blog/index template already has a lot going on. It gets displayed in index/default mode, category mode, and archive mode and with possible pagination in all of those views. Adding a tag view to this makes this one template more complex than I prefer. It also means we’re throwing some 3rd-party code into a template that currently exists with only native code, which I don’t like.

So thinking about it, since most of our blog display code already centralized into Snippets I don’t mind adding another template to handle tag results.

Displaying Tagged Entries
In reviewing the Tagger documentation, there appear to be two tags that look like good candidates for our needs:

The first one is the Entries tag:
http://www.devdemon.com/docs/tagger/tags/entries.html

What I don’t like here is that I have to specify each custom field that I want to display in my results. I have six channels each with their own Channel Field Groups so listing all of the fields across all those groups is not too elegant.

The second one is the Quick Entries:
http://www.devdemon.com/docs/tagger/tags/entries_quick.html

Quick Entries builds a list of entry IDs containing the selected tag. This list gets passed to a standard EE channel:entries tag as an entry_id parameter. I like this approach as then I’m dealing with a standard EE tag that I’m familiar and comfortable with, and know my existing Snippets will work with.

Create a blog/tag Template
Create a blog/tag template and choose to copy the existing blog/index template as a starting point. Save the new template to get a revision point in the database. Then we can start coding this one to suit. I’ll include the completed template in the companion files for this chapter so you can view the final product.

The first thing to do is remove the category_heading stuff - we won’t need that here. From there it’s a matter of nesting the existing channel:entries tag inside a tagger {exp:tagger:entries_quick} tag pair, and add the entry_id=”{index_tags:entry_ids}” parameter to the nested channel:entries tag.

{exp:tagger:entries_quick tag="{segment_3}" prefix="index_tags"}
             
             
<h2>All Entries Tagged{index_tags:tag_name}</h2>
             <
p>These are all entries from our blog tagged with {index_tags:tag_name}</p>

            
{exp:channel:entries 
            channel
="blog_audio|blog_video|blog_link|blog_quote|blog_post|blog_image" 
            
limit="10" 
            
paginate="bottom" 
            
dynamic="no"
            
entry_id="{index_tags:entry_ids}"
            

Sweet…that was easy….oh wait.

Tag Links
Trying to load the new template from an entry tag I note the links are wrong. I went back to each Snippet and coded these to use a path variable as they weren’t getting a full path:

<a href="{path='blog/tag'}/{tagger:urlsafe_tagname}">{tagger:tag_name}</a>, 


Variable Collision
My first pass through this template had the results template working, but now the tags on each individual entry repeated the tag name from whatever tag I had followed. I realized that since I was pulling in code via Snippets I was running into a naming collision.

This touches on an issue in ExpressionEngine known as the Parse Order. Parsing refers to how EE reads and executes the code you put in a template, and logically it has to have an order in which it does different things. This is known as the Parse Order, and it’s fully documented in this excellent PDF by EE add-on developer Low.

Snippets are parsed very early. When EE loads a template and encounters Snippets in use, it copies the code from the Snippet and places it in the template, then parses the Template as though the Snippet code had lived there all along. By my use of Snippets here what I had created was, in effect, a situation where I had nested Tagger loops both trying to use the same variable name.  The result was that the value from the parent loop was displaying multiple times rather than the value from the nested loop.

Luckily the DevDemon team provides a parameter to get around this - the prefix parameter that you see used in the above code. I specified “index_tag” on the parent tagging loop:

prefix="index_tags" 

Then each of the Tagger variables used in the parent loop get the new prefix:

{index_tags:tag_name} 

Once I made those changes my per-entry tag lists were displaying normally again.

CSS Tweak
I tweaked the CSS to add a bit of spacing between the h2 header and the paragraph after it. This will help the blog/index template look better when loaded in category mode as well. 

On line 69 of style.css that the Folder theme provided I added a bottom margin:

h2 {
  font
-size36px;
  
margin-bottom10px;

This isn’t really an EE-specific change, but a good example of how as the EE developer you might end up making changes to the design during your implementation.

Results
With the code covered in this chapter you should have a fully-implemented tagging solution on your ExpressionEngine 2 website, using a 3rd party add-on that, while free, is supported by it’s provider.

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Brian

by Brian

Date: Monday, November 17th, 2014
Comment: #1

Mike,

Great write-up and explanation. I was struggling with a custom pagination for Tagger and was about to scream when I found this. Using the Quick Entries was exactly what I needed to feed my Channel Entries template the tagged entries and just simply use the EE pagination instead of the limited tagger pagination. Now that I know to do this, it opens things wide open. Thanks.

Picture of Boyink

by Boyink

Date: Tuesday, November 18th, 2014
Comment: #2

Thanks for the comment - glad to know it helped!

Picture of Greg

by Greg

Date: Wednesday, November 4th, 2015
Comment: #3

I have a news index page that creates the tag cloud. No problem.

The links create a url like: http://www.associationdemo.website/news/tag/jobs

I have a template “tag” in the news.group template folder but the link does not load that but reloads the news index template.

And even the the url is showing as:
http://www.associationdemo.website/news/tag/jobs

{last_segment} returns “news” not “jobs”

hoping this is something stupid simple

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>