Replacement for {tag_blogtagcloud}

1

Does anyone know if there is a Treepl replacement for {tag_blogtagcloud}?

2

Hi @SiroccoDigital
There is no equivalent but since the ‘item count’ for a tag is provided in the module_tag_list component data then you could use this value to weight the tags and style them accordingly.

You’d probably need to come up with bracketed weighting with 3 or 4 weights, something like:

{% if myData.itemsCount <= 5 %}
  {% assign tagWeight = 'small' %}
{% elsif myData.itemsCount <= 15 %}
  {% assign tagWeight = 'med' %}
{% elsif myData.itemsCount > 15 %}
  {% assign tagWeight = 'large' %}
{% endif %}

and use {{tagWeight}} as a CSS class to style your tag items.

Docs:
https://docs.treepl.co/component-types/module_tag_list#secOutput

3

What would be your desired HTML output (for SEO, styling, etc)?
I might be able to whip up something for a Treehouse snippet…

4

@Adam.Wilson I located this code on the template of the Yoga website as a starter -

{% component type:"module_tag_list", module:"Blog Post", parentItemId:"{{parentItemId}}", layout:"/includes/tag-list.layout", sortBy: "name", sortOrder:"ASC"  %}

Then the /includes/tag-list.layout is -

<div class="BlogTagCloud tags-list">
    {% for item in this.items %}
        <li>
            <a href="{{item.url}}" title="{{item.name}}">{{item.name}}</a>
        </li>
    {% endfor %}
</div>

It has a css as follows -

   .tags-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
 .tags-list li a {
    padding: 7px 14px;
}
.tags-list li a {
    color: #313131;
    padding: 5px 9px;
    display: block;
    background-color: #dcdcdc;
    transition: background .5s,color .5s;
}
.tags-list li {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 8px;
}
5

Ok, cool. So if we add my previous code into the forloop and add the tagWeight variable as a class to the list item:

<div class="BlogTagCloud tags-list">
    {% for item in this.items %}

{% if item.itemsCount <= 5 %}
  {% assign tagWeight = 'small' %}
{% elsif item.itemsCount <= 15 %}
  {% assign tagWeight = 'med' %}
{% elsif item.itemsCount > 15 %}
  {% assign tagWeight = 'large' %}
{% endif %}

        <li class="{{tagWeight}}">
            <a href="{{item.url}}" title="{{item.name}}">{{item.name}}</a>
        </li>
    {% endfor %}
</div>

and then just some CSS to match:

.tags-list li.small {
    font-size: 0.8rem;
}
.tags-list li.med {
    font-size: 1rem;
}
.tags-list li.large {
    font-size: 1.2rem;
}

Adjust the item count thresholds depending on your blog post numbers. You could add additional thresholds in as well if needed.

And to make it more of a tag ‘cloud’ you’d probably make the anchor element inline instead of block.