We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered Tagger - Assign Alias for CSS Class

  • Sal Baldovinos Reply #1, 7 years 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 smiley

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

      Sal Baldovinos
      SEO & DIGITAL MARKETING

      ARIEL DIGITAL | Maximize Your Potential
      www.arieldigitalmarketing.com
    • christianseel Reply #2, 7 years 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
      • Sal Baldovinos Reply #3, 7 years ago
        Quote from: christianseel at Apr 06, 2017, 05: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
          christianseel Reply #4, 7 years 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