Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Greg 18 posts 38 karma points
    Dec 22, 2014 @ 20:29
    Greg
    0

    Implementing a tagging system

    Hello,

    I have a parent and subpage system working for a "news" section. What I want to do now is tag each news post using the 'checkbox list'. I've created the list and my tags and have tagged my news items.

    Question - How do I browse these news items based on their tags? Right now it's just a straight list of news items. So instead of just browsing /news I want to browse /news/health or /news/tech etc...

     

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Dec 23, 2014 @ 01:22
    Dennis Aaen
    0

    Hi Greg,

    I have trying to see how I can help you and I think I have found a good solution or at least a starting point, where you can build on

    In my example I have used the Txt starter kit. The first thing I do is to add the tags proerty editor to the news item documen type.http://our.umbraco.org/documentation/using-umbraco/backoffice-overview/property-editors/built-in-property-editors/Tags Then you can add a tag for each news item, (I haven´t found a way where you can more than one tag for each news item therefor it can be a startering point or a soulution if it´s fine that you one have one tag for each news item)

    So these lines of code should be place in the Partial view or Partial view macro for the news item

    @{
        if (CurrentPage.HasValue("tags")){
            <ul>
                @foreach (var tagItem in CurrentPage.tags.Split(',')){
                    <li><a href="@CurrentPage.Parent.Url?tag=@tagItem">@tagItem</a></li>
                }
            </ul>
        }      
    }              

    And in my case I have given the tags property on my newsitem document type an alias of tags, remember to change it so it match yours alias http://umbraco.tv/videos/umbraco-v7/implementor/fundamentals/document-types/properties/. As you can see I also create a link which link to the news overview page, with a query string of the tag. (e.g news)

    Then I have made some change to the news overview where you are displaying the list of your news item.I have made an if else statement to make it possible to show the full news list if there are no querystring in the URL.

    But if there is an querystring in the URL then I filter the news items, so it only shows the news that match the querystring. It looks like this:

    @{ 
         string filterList = Request.QueryString["tag"];
     }

    @if(!string.IsNullOrEmpty(Request.QueryString["tag"])){
        foreach(var item in newsItems.Where("tags == @0", filterList)){
         // If the editor has not explicitly provided the "Page title" property page
                                // then just show the name of the page otherwise show the provided title
                                var title = string.IsNullOrWhiteSpace(item.Title)
                                    ? item.Name
                                    : item.Title;


                                // If the editor has not explicitly set the publishDate property then show the create date
                                var dateTime = item.PublishDate == default(DateTime)
                                    ? item.CreateDate
                                    : item.PublishDate;
                               
                                <section>
                                    <h3><a href="@item.Url">@title</a></h3>
                                    <span class="byline">@item.SubHeader</span>
                                    <ul class="meta">
                                        <li class="timestamp">@dateTime.ToString("f")</li>
                                    </ul>

                                    @if (string.IsNullOrWhiteSpace(item.Image) == false)
                                    {
                                        <a href="@item.Url" class="image image-full"><img src="@item.Image" alt="" /></a>
                                    }

                                    @Umbraco.Truncate(item.BodyText, 200)

                                    <a href="@item.Url" class="button">Continue Reading test</a>
                                </section>   
       
        }


     }

    else{

        foreach(var item in newsItems.Where("Visible")){
         // If the editor has not explicitly provided the "Page title" property page
                                // then just show the name of the page otherwise show the provided title
                                var title = string.IsNullOrWhiteSpace(item.Title)
                                    ? item.Name
                                    : item.Title;


                                // If the editor has not explicitly set the publishDate property then show the create date
                                var dateTime = item.PublishDate == default(DateTime)
                                    ? item.CreateDate
                                    : item.PublishDate;
                               
                                <section>
                                    <h3><a href="@item.Url">@title</a></h3>
                                    <span class="byline">@item.SubHeader</span>
                                    <ul class="meta">
                                        <li class="timestamp">@dateTime.ToString("f")</li>
                                    </ul>

                                    @if (string.IsNullOrWhiteSpace(item.Image) == false)
                                    {
                                        <a href="@item.Url" class="image image-full"><img src="@item.Image" alt="" /></a>
                                    }

                                    @Umbraco.Truncate(item.BodyText, 200)

                                    <a href="@item.Url" class="button">Continue Reading in esle</a>
                                </section>   
       
        }
    }

    The tags in this line below agin refers to the propertyalias of the field where you add the tags.

      foreach(var item in newsItems.Where("tags == @0", filterList)){ 

    As I said in the beginning of my post with this solution it's not possible to see news item there has two tags, if it´s okay that your news item only can have one tag this could be a solution that you use.

    If it should be possible for a news item to have more than one tag, and still be filterable this could be a good starting point, and then you need to modify it, so it suits your needs.

    Hope this helps, and make sense, if you have further questions keep asking and I will try to help if possible.

    /Dennis

  • Greg 18 posts 38 karma points
    Dec 23, 2014 @ 19:52
    Greg
    0

    This looks great... 1 tag per item might be a deal breaker though. I really appreciate the thourough response!

    I think what I'm going to do instead is build the tags and pass them to Angular, then use a javascript solution... similar to how Isotope works - http://isotope.metafizzy.co/filtering.html#combination-filters

    I'll add some JS paging too. 

  • Greg 18 posts 38 karma points
    Dec 23, 2014 @ 19:52
    Greg
    0

    I'm going to take a good look at this though.

  • Tasman 6 posts 26 karma points
    Oct 14, 2015 @ 11:51
    Tasman
    0

    Hi

    I found that if use

    foreach(var item in newsItems.Where("tags.Contains(@0)", filterList)){
    

    instead of line

    foreach(var item in newsItems.Where("tags == @0", filterList)){
    

    it will work with nodes that has few tags selected

    Other thing that one can do is to take nodes that has tag equal to tag that is in query string:

    @if (!string.IsNullOrEmpty(filterList))
    {
        newsItems= newsItems.Where("tags.Contains(@0)", filterList);
    }
    

    and then use foreach loop once only.

Please Sign in or register to post replies

Write your reply to:

Draft