Best method to handle %20 in tag URLs with multiple words

Question

On my page of all tags, it works great except for tags that have more than one word. The URL is replacing the spaces with %20 as one would expect.

http://www.colorcomputergames.com/tags/

I tried using:

{{ siteUrl }}tags/{{ tag.title | kebab }}

This works great in changing the %20 to hyphens. However, if I click on a tag with multiple words I go to page not found. Makes sense as the system doesn't see that tag.

  {% extends "_layout" %}
    {% set title = "Tags" %}
    {% block content %}
    {% for tag in craft.tags.order('title') %}
        <li><a href="{{ siteUrl }}tags/{{ tag.title | kebab }}">{{ tag.title }}</a></li>
    {% endfor %}
    {% endblock %}

So next I tried:

{% extends "_layout" %}
{% set title = "Tags" %}
{% block content %}
{% for tag in craft.tags.order('title') %}
    <li><a href="{{ siteUrl }}tags/{{ tag.title | url_encode }}">{{ tag.title }}</a></li>
{% endfor %}
{% endblock %}

But that wasn't ideal either.

What is the best way to deal with this issue?

Answer 1

Update.

After looking at the tag model a little more closely, it looks like tags have both a title and slug — so if you use the slug to construct your url then you shouldn't have that problem.

For your tag index:

<ul>
    {% for tag in craft.tags.order('title') %}
        <li><a href="{{ siteUrl }}tags/{{ tag.slug }}">{{ tag.title }}</a></li>
    {% endfor %}
</ul>

In your tag index page (assuming you are using the tag token in your custom route):

{% set tagEntry = craft.tags.group('myTagGroup').slug(tag).first %}
{% set entries = craft.entries.relatedTo(tagEntry).order('title').limit(null) %}