+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Clickable tags and filtering blog post with tags

Clickable tags and filtering blog post with tags

6 posts, 1 answered
  1. Johan
    Johan avatar
    17 posts
    Registered:
    18 Apr 2014
    21 Apr 2014
    Link to this post

    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 http://bit.ly/1nCAPhy and http://bit.ly/1njWxcH 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)
                         {
                              //DATABIND
                              TaxaRepeater.DataSource = taxa;
                              TaxaRepeater.DataBind();
                         }
     
                          if (taxa.Count == 0 && this.HideWhenNoTaxaFound)
                          {
                              this.Visible = false;
                           }
                        }
                   }
                }
            }
       }

    Answered
  2. Johan
    Johan avatar
    17 posts
    Registered:
    18 Apr 2014
    21 Apr 2014
    Link to this post

    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.

     Thanks

  3. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    07 Dec 2016
    23 Apr 2014
    Link to this post
    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">
        <LayoutTemplate>
            <ul class="sfpostsList sfpostListTitleDateSummary sflist">
                <asp:PlaceHolder ID="ItemsContainer" runat="server" />
            </ul>
        </LayoutTemplate>
        <ItemTemplate>
            <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" />
                </h2>
                 
                <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}" />
                </div>
               
                 
              <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" />
            </li>
        </ItemTemplate>
    </telerik:RadListView>
    <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; }
            else
            {
     
                var currentNode = currentProvider.CurrentNode as Telerik.Sitefinity.Web.PageSiteNode;
                if (currentNode == null) { baseUrl = currentProvider.CurrentNode.Url; }
                else
                {
                    var firstPageDataNode = Telerik.Sitefinity.Web.RouteHelper.GetFirstPageDataNode(currentNode, true);
                    if (!currentNode.IsGroupPage || !(firstPageDataNode.Url != currentProvider.CurrentNode.Url)) { baseUrl = currentProvider.CurrentNode.Url; }
                    else
                    {
                        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;
        }
    </script>

    The video how it works is available here.

    Regards,
    Svetoslav Manchev
    Telerik
     
    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
     
  4. Johan
    Johan avatar
    17 posts
    Registered:
    18 Apr 2014
    23 Apr 2014 in reply to Svetoslav Manchev
    Link to this post

    Yes, I got it working, after deleting the widget and re-add it. Thanks.

  5. Aras
    Aras avatar
    1 posts
    Registered:
    14 Nov 2014
    11 Jan 2015
    Link to this post

    Hi,

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

     

  6. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    07 Dec 2016
    14 Jan 2015
    Link to this post
    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.

    Regards,
    Svetoslav Manchev
    Telerik
     
    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
     
6 posts, 1 answered