Clickable tags and filtering blog post with tags - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Clickable tags and filtering blog post with tags

  • Clickable tags and filtering blog post with tags
  • Using the Blog posts widget I can easily retrieve the tags that are assigned to the blog posts. I would like to improve the functionality of the tags so that the users can click the tags and when a tag is clicked it will filter the blog posts by that tag. As an addition I am hoping to have a cleaner HTML code generated by the blog tags. 

    I found these 2 articles and and try to combine what in these 2 articles. I started with the article that generates cleaner code for the tags, once I got that implemented I went ahead to add a new class that has Title and Url properties so the repeater can retrieve the them in the view. But what I received is in the Sitefinity Edit mode is 'Error parsing the template' so I do not know where the error is. How could I get more detailed view to find out why I get this error?

    Below is the part that I think where the problem lies, your input is appreciated.

    protected override void InitializeControls(GenericContainer container)
        if (!String.IsNullOrEmpty(this.Title))
            titleLabel.Text = String.Format("<0 class='sfitemFieldLbl taxa-title'>1</0>", this.TitleWrapperTag, this.Title);
        //Set the type to show, hardcoded to category and tags
        if (this.TaxonomyType == "Category" || this.TaxonomyType == "Categories")
            this.TaxomonyMetafieldName = "Category";
            this.TaxonomyID = new Guid("e5cd6d69-1543-427b-ad62-688a99f5e7d4");
        else if (this.TaxonomyType == "Tags" || this.TaxonomyType == "Tag")
            this.TaxomonyMetafieldName = "Tags";
            this.TaxonomyID = new Guid("cb0f3a19-a211-48a7-88ec-77495c0f5374");
        //Set the wrapper
        wrapperLiteral.Text = String.Format("<div class='taxonomy-wrapper 0'>", this.TaxomonyMetafieldName.ToLower());
        //Get the data item and it's taxa
        object dataItem = null;
        IDataItemContainer parent = this.Parent as IDataItemContainer;
        var page = this.Page as Page;
        if (parent != null)
            dataItem = (IDataItem)parent.DataItem;
            if (dataItem != null)
               if (!String.IsNullOrEmpty(this.TaxomonyMetafieldName))
                   TaxonomyPropertyDescriptor property = OrganizerBase.GetProperty(dataItem.GetType(), this.TaxomonyMetafieldName) as TaxonomyPropertyDescriptor;
                    if (property != null)
                        IList<Guid> @value = property.GetValue(dataItem) as IList<Guid>;
                        TaxonomyManager manager = TaxonomyManager.GetManager();
                        // List<ITaxon> taxa = new List<ITaxon>();
                        List<TaxonDetail> taxa = new List<TaxonDetail>();
                        foreach (Guid guid in @value)
                            var taxon = manager.GetTaxon(guid);
                            var baseUrl = GetBaseUrl();
                            var url = string.Format("0/-in-1/2/3",
                            VirtualPathUtility.ToAbsolute(baseUrl), taxon.Taxonomy.Name,
                            taxon.Taxonomy.Name, taxon.UrlName);
                            taxa.Add(new TaxonDetail(taxon.Title, url));
                            // taxa.Add(manager.GetTaxon(guid));
                         if (taxa != null && taxa.Count > 0)
                              TaxaRepeater.DataSource = taxa;
                          if (taxa.Count == 0 && this.HideWhenNoTaxaFound)
                              this.Visible = false;

  • I found out that after I changed the Build Action properties from 'Content' to  'Embedded Resource', the widget works properly. Could someone explains why the behavior is like that?

     EDIT: I did a rebuild then received the same error on parsing the template. My question is still the same, how could I find out what the error is.


  • Hi Johan,

    I have tested that blog post and it works with the following code (based for the test on the template Titles, dates and summaries):
    <%@ Control Language="C#" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Comments" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Import Namespace="Telerik.Sitefinity" %>   
      <%@ Import Namespace="Telerik.Sitefinity.Model" %>
    <sf:SitefinityLabel id="title" runat="server" WrapperTagName="div" HideIfNoText="true" HideIfNoTextMode="Server" />
    <telerik:RadListView ID="Repeater" ItemPlaceholderID="ItemsContainer" OnItemDataBound="Repeater_ItemDataBound" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
            <ul class="sfpostsList sfpostListTitleDateSummary sflist">
                <asp:PlaceHolder ID="ItemsContainer" runat="server" />
            <li class="sfpostListItem sflistitem" data-sf-provider='<%# Eval("Provider.Name")%>'  data-sf-id='<%# Eval("Id")%>' data-sf-type="Telerik.Sitefinity.Blogs.Model.BlogPost">
                <h2 class="sfpostTitle sftitle">
                    <sf:DetailsViewHyperLink TextDataField="Title" ToolTipDataField="Description" data-sf-field="Title" data-sf-ftype="ShortText" runat="server" />
                <div class="sfpostAuthorAndDate sfmetainfo">
                    <asp:Literal ID="Literal2" Text="<%$ Resources:Labels, By %>" runat="server" />
                    <sf:PersonProfileView runat="server" />
                    <sf:FieldListView ID="PostDate" runat="server" Format=" | PublicationDate.ToLocal():MMM dd, yyyy" />
              <p><asp:Literal ID="categories" runat="server"></asp:Literal></p>
                <sf:FieldListView ID="PostContent" runat="server" Text="0" Properties="Summary" WrapperTagName="div" WrapperTagCssClass="sfpostSummary sfsummary" EditableFieldType="ShortText" />
                <sf:DetailsViewHyperLink ID="FullStory" Text="<%$ Resources:BlogResources, FullStory %>" runat="server" CssClass="sfpostFullStory sffullstory" />
    <sf:Pager id="pager" runat="server"></sf:Pager>
    <asp:PlaceHolder ID="socialOptionsContainer" runat="server" />
    <script type="C#" runat="server">
        protected void Repeater_ItemDataBound(object sender, Telerik.Web.UI.RadListViewItemEventArgs e)
            var data = ((RadListViewDataItem)e.Item).DataItem as Telerik.Sitefinity.Blogs.Model.BlogPost;
            var placeholder = e.Item.FindControl("categories") as Literal;
            placeholder.Text = RenderFlatTaxaAsLink(data, "Tags");
        public string RenderFlatTaxaAsLink(Telerik.Sitefinity.Blogs.Model.BlogPost post, string taxonomyFieldName)
            var baseUrl = string.Empty;
            var currentProvider = Telerik.Sitefinity.Web.SiteMapBase.GetCurrentProvider();
            if (currentProvider == null || currentProvider != null && currentProvider.CurrentNode == null) return string.Empty;
                var currentNode = currentProvider.CurrentNode as Telerik.Sitefinity.Web.PageSiteNode;
                if (currentNode == null) baseUrl = currentProvider.CurrentNode.Url;
                    var firstPageDataNode = Telerik.Sitefinity.Web.RouteHelper.GetFirstPageDataNode(currentNode, true);
                    if (!currentNode.IsGroupPage || !(firstPageDataNode.Url != currentProvider.CurrentNode.Url)) baseUrl = currentProvider.CurrentNode.Url;
                        baseUrl = firstPageDataNode.Url;
            var tagList = "";
            var tags = post.GetValue<Telerik.OpenAccess.TrackedList<Guid>>(taxonomyFieldName);
            if (tags != null && tags.Count() > 0)
                tagList = " | ";
                var taxManager = Telerik.Sitefinity.Taxonomies.TaxonomyManager.GetManager();
                foreach (var tag in tags)
                    var t = taxManager.GetTaxon<Telerik.Sitefinity.Taxonomies.Model.FlatTaxon>(tag);
                    var url = string.Format("0/-in-1/2/3", VirtualPathUtility.ToAbsolute(baseUrl), t.Taxonomy.Name, t.Taxonomy.Name, t.UrlName);
                    var link = string.Format("<a class='tag' href='0'><span>1</span></a>", url, t.Title).ToString();
                    tagList += link;
            return tagList;

    The video how it works is available here.

    Svetoslav Manchev
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
  • Yes, I got it working, after deleting the widget and re-add it. Thanks.

  • Hi,

    what about if I wished to show the image of post beside the title?


  • Hi Aras,

    Would you please precise a little bit more about the image you want to show?
    - Static for each post or as related data?
    - In blogs List and/or detailed view

    Generally speaking, in case of static one - just add an anchor tag in the Blog post template you are using.

    In case of Related data custom filed for Blog posts you need to add such field to be and select in Display selected items on the frontend using... Image widget. Than update the template (List and/or Details view) by adding that custom field.

    I hope the information helps.

    Svetoslav Manchev
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items