Tagger - Assign Alias for CSS Class | MODX Community Forums

☆ A M B ☆
205 Posts

Sal Baldovinos Reply #1, 9 years, 5 months ago

I'm using Tagger for Categories & Tags on a MODX blog. I was able to accomplish part of this but only in the tpl for the actual tag/category list.

I need to assign the alias of the tag to a class on my HTML. Currently, there are 6 categories that are styled with the CSS to have a unique color assigned to it, i.g. category-1 = blue, so all category-1s have blue accents to their respective output.

I did get that working on the tpl for a TaggerGetTags call:

<li class="cat-[[+alias]]"><a href="[[+uri]]">[[+tag]]</a></li>

However, I'm using getPage on the main blog landing page:

[[blogit.lexicon_load]]
[[!getPage@pagination?
    &elementClass=`modSnippet` 
    &element=`getResources`
    &parents=`[[*id]]`
	&tpl=`blogit.blog_recent_posts_tpl`
	&includeContent=`1`
	&includeTVs=`1`
	&processTVs=`1`
	&tvPrefix=``
	&limit=`6`
	&sortby=`{"publishedon":"DESC"}`
	&initialOffset=`1`
	&where=`[[!TaggerGetResourcesWhere? &groups=`Category`]]`
]]

Within the tpl for this (blogit.blog_recent_posts_tpl) there is a class="cat-category-name". I'd like to, as I did in the working example, use the tag alias as part of the class name so the CSS will do it's thing:

<div class="post">
    <p class="post-date"><time datetime="[[+publishedon:strtotime:date=`%y-%m-%d`]]">[[+publishedon:strtotime:date=`%b %d %Y`]]</time></p>
    <div class="row collapse cat-category-name">
        <div class="small-12 medium-5 columns">
            <a href="[[~[[+id]]]]"><img src="[[+blogit.post_main_image:phpthumbof=`&zc=[[++blogit.main_image_overview_cz]]`]]" alt="[[+blogit.post_main_image_alt]]"></a>
        </div>
        <div class="small-12 medium-7 columns">
            <div class="post-content">
                <a href="[[~[[+id]]]]">
                    <h4>[[+longtitle:strip_tags:empty=`[[+pagetitle:strip_tags]]`]]</h4>
                    <p>[[+content:ellipsis=`70`]]</p>
                </a>
                <a href="[[~[[+id]]]]" class="read-more">Read more <i class="fa fa-angle-right"></i></a>
            </div>
        </div>
    </div>
</div> <!-- end post -->

Hoping this isn't something so overly complex

This question has been answered by christianseel. See the first response.

Sal Baldovinos
SEO & DIGITAL MARKETING

ARIEL DIGITAL | Maximize Your Potential
www.arieldigitalmarketing.com

☆ A M B ☆
70 Posts

christianseel Reply #2, 9 years, 5 months ago

Hi! If I'm not missing something, you could just call the TaggerGetTags snippet inside your recent_posts_tpl chunk. TaggerGetTags has a &resources parameter which you can fill width [[+id]] in your chunk.

chsmedien - Digital Marketing Agency
MODX Professional & Ambassador

http://chsmedien.com | http://twitter.com/christianseel

☆ A M B ☆
205 Posts

Sal Baldovinos Reply #3, 9 years, 5 months ago

Quote from: christianseel at Apr 06, 2017, 12:12 AM

Hi! If I'm not missing something, you could just call the TaggerGetTags snippet inside your recent_posts_tpl chunk. TaggerGetTags has a &resources parameter which you can fill width [[+id]] in your chunk.

Would that be as simple as putting the call in the class=""? or outside of the markup and then use the [[+alias]]? Haven't used tagger before, thanks!

Sal Baldovinos
SEO & DIGITAL MARKETING

ARIEL DIGITAL | Maximize Your Potential
www.arieldigitalmarketing.com

discuss.answer

☆ A M B ☆
70 Posts

christianseel Reply #4, 9 years, 5 months ago

Yeah sure, just like this:

<div class="post">
    <p class="post-date"><time datetime="[[+publishedon:strtotime:date=`%y-%m-%d`]]">[[+publishedon:strtotime:date=`%b %d %Y`]]</time></p>
    <div class="row collapse cat-category-name [[TaggerGetTags? &resources=`[[+id]]` &rowTpl=`your_tagger_tpl`]]">
        <div class="small-12 medium-5 columns">
            <a href="[[~[[+id]]]]"><img src="[[+blogit.post_main_image:phpthumbof=`&zc=[[++blogit.main_image_overview_cz]]`]]" alt="[[+blogit.post_main_image_alt]]"></a>
        </div>
        <div class="small-12 medium-7 columns">
            <div class="post-content">
                <a href="[[~[[+id]]]]">
                    <h4>[[+longtitle:strip_tags:empty=`[[+pagetitle:strip_tags]]`]]</h4>
                    <p>[[+content:ellipsis=`70`]]</p>
                </a>
                <a href="[[~[[+id]]]]" class="read-more">Read more <i class="fa fa-angle-right"></i></a>
            </div>
        </div>
    </div>
</div>

where "your_tagger_tpl" would look like this

[[+alias]]

chsmedien - Digital Marketing Agency
MODX Professional & Ambassador

http://chsmedien.com | http://twitter.com/christianseel

Answered Tagger - Assign Alias for CSS Class