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

Forums / Developing with Sitefinity / Categories used as a link

Categories used as a link

10 posts, 0 answered
  1. Stephanie
    Stephanie avatar
    19 posts
    Registered:
    16 Mar 2011
    19 Oct 2011
    Link to this post
    Hello,

    I'm looking to pull the categories to add to the template of blog posts, but use them as a link.

    For example:  Under the title of my blog I would like it to say Posted in (category).  That category should be able to link to the full blog post page.

    How would I go about creating something like this?

    Thank you,

    Steph
  2. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    08 Dec 2016
    24 Oct 2011
    Link to this post
    Hello Stephanie,

    With the default behaviour categories widget links to the summary of all blog posts that are in the selected category( With the property of categories widget BaseUrl). If you want to link to details page of a blog post you should create a custom categories widget. Here is the taxonomy control template
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
     
    <sf:SitefinityLabel id="titleLabel" runat="server" WrapperTagName="h2" HideIfNoText="true" CssClass="sftaxonTitle" />
    <sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
        <Templates>
            <sf:ConditionalTemplate Left="RenderAs" Operator="Equal" Right="HorizontalList" runat="server">
                <asp:Repeater ID="repeater_horizontallist" runat="server">  
                    <HeaderTemplate>
                        <ul class="sftaxonHorizontalList">
                    </HeaderTemplate>            
                    <ItemTemplate>
                        <li class="sftaxonItem"><sf:SitefinityHyperLink ID="link" runat="server" CssClass="selectCommand sftaxonLink"></sf:SitefinityHyperLink></li>
                    </ItemTemplate>                                
                    <FooterTemplate></ul></FooterTemplate>
                </asp:Repeater>    
            </sf:ConditionalTemplate>
            <sf:ConditionalTemplate Left="RenderAs" Operator="Equal" Right="VerticalList" runat="server">
                <asp:Repeater ID="repeater_verticallist" runat="server">
                    <HeaderTemplate>
                        <ul class="sftaxonVerticalList">
                    </HeaderTemplate>
                    <ItemTemplate>
                        <li class="sftaxonItem">           
                            <sf:SitefinityHyperLink ID="link" runat="server" CssClass="selectCommand sftaxonLink"></sf:SitefinityHyperLink>
                        </li>
                    </ItemTemplate>
                    <FooterTemplate>
                        </ul>
                    </FooterTemplate>
                </asp:Repeater>               
            </sf:ConditionalTemplate>
            <sf:ConditionalTemplate Left="RenderAs" Operator="Equal" Right="Cloud" runat="server">
                <asp:Repeater ID="repeater_cloud" runat="server">
                    <HeaderTemplate>
                        <ul class="sftaxonCloud">
                    </HeaderTemplate>
                    <ItemTemplate>
                        <li class="sftaxonItem">
                        <%-- Note the sfCloudSize class.
                        The name can be different, just have to be last in the list.
                        The size factor is appendend to it - sfCloudSize1, sfCloudSize2,.. sfCloudSize6 --%>
                            <sf:SitefinityHyperLink ID="link" runat="server" CssClass="selectCommand sftaxonLink sfCloudSize"></sf:SitefinityHyperLink>
                        </li>
                    </ItemTemplate>
                    <FooterTemplate>
                        </ul>
                    </FooterTemplate>
                </asp:Repeater>       
            </sf:ConditionalTemplate>
        </Templates>
    </sf:ConditionalTemplateContainer>   
    <sf:SitefinityHyperLink ID="SeeAllTaxaLink" runat="server" CssClass="selectCommand sftaxonsAll" Visible="false">All ({0})</sf:SitefinityHyperLink>
    Create a custom control inheriting from Telerik.Sitefinity.Web.UI.PublicControls.TaxonomyControl. You can follow this documentation for creating custom controls or observe NewsRotator sample available in Sitefinity SDK.

    I think if you have more than one blog posts in the same category not all will open in details view on the same page. Alternatively you can create a widget with textfields where you add new category and paste the link for blogpost details page.

    Greetings,
    Stanislav Velikov
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  3. Devin
    Devin avatar
    149 posts
    Registered:
    09 Jun 2009
    22 Nov 2011
    Link to this post
    Hi is there a way to setup the Blog List template to display all categories associated with each post.  Each category should then act as a filter.  Ex:

    Nov 21 / 2011
    [Title]
    [Summary]
    [Category 1] | [Category 2] | [Category 3]

    Clicking Category 1 for example would list all posts that belong to that category.

    Thanks!
    Devin
  4. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    08 Dec 2016
    24 Nov 2011
    Link to this post
    Hi Devin,

    We have this planned, but it is not yet implemented. You can display categories, but they are rendered as text, not linking to provide filtering.

    Greetings,
    Stanislav Velikov
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  5. Stephanie
    Stephanie avatar
    19 posts
    Registered:
    16 Mar 2011
    29 Nov 2011
    Link to this post
    Stanislav,

    The functionality that Devin is looking for is what I was trying to explain also.  Do you know how far off something like this is from being implemented?  It seems like a feature that most CMSs have. 

    Thank you,

    Stephanie
  6. Devin
    Devin avatar
    149 posts
    Registered:
    09 Jun 2009
    03 Dec 2011
    Link to this post
    Hi Stephanie,
    I ended up modifying the Blog list template, using a Category control and jQuery to achieve this functionality.

    Modified Blog list template
    <%@ 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" %>   
     
    <telerik:RadListView ID="Repeater" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
        <LayoutTemplate>
            <sf:ContentBrowseAndEditToolbar ID="MainBrowseAndEditToolbar" runat="server" Mode="Add"></sf:ContentBrowseAndEditToolbar>
            <ul class="sfpostsList sfpostListTitleDateSummary">
                <asp:PlaceHolder ID="ItemsContainer" runat="server" />
            </ul>
        </LayoutTemplate>
        <ItemTemplate>
            <li class="sfpostListItem">
     
                <div class="blog-post">
                    <div class="sfpostAuthorAndDate">
                        <%--<asp:Literal ID="Literal2" Text="<%$ Resources:Labels, By %>" runat="server" />
                        <sf:PersonProfileView ID="PersonProfileView1" runat="server" />--%>
                        <sf:FieldListView ID="PostDate" runat="server" Format="{PublicationDate.ToLocal():MMM dd, yyyy}" />
                    </div>
     
                    <h2 class="sfpostTitle">
                        <sf:DetailsViewHyperLink ID="DetailsViewHyperLink1" TextDataField="Title" ToolTipDataField="Description" runat="server" />
                    </h2>
                 
                    <sf:FieldListView ID="PostContent" runat="server" Text="{0}" Properties="Summary" WrapperTagName="div" WrapperTagCssClass="sfpostSummary" />
                </div>
     
    <sitefinity:HierarchicalTaxonField ID="HierarchicalFieldControl" runat="server" TaxonomyId="E5CD6D69-1543-427b-AD62-688A99F5E7D4" DisplayMode="Read"
        WebServiceUrl="~/Sitefinity/Services/Taxonomies/HierarchicalTaxon.svc" Expanded="true" TaxonomyMetafieldName="Category" ExpandText="ClickToAddCategories" BindOnServer="true"  
        />
     
                <sf:DetailsViewHyperLink ID="FullStory" Text="Full story" runat="server" CssClass="sfpostFullStory" />
                <sf:ContentBrowseAndEditToolbar ID="BrowseAndEditToolbar" runat="server" Mode="Edit,Delete,Unpublish"></sf:ContentBrowseAndEditToolbar>
     
            </li>
        </ItemTemplate>
    </telerik:RadListView>
    <sf:Pager id="pager" runat="server"></sf:Pager>

    jQuery
    $('.sfCategoriesList li span span').each(function() {
        var category = $(this).html();
        var catLink = $('.sftaxonHorizontalList .sftaxonItem').children('a:contains(' + category +')').clone();
        $(this).html(catLink);
    });

    Thanks!
    Devin
  7. Stephanie
    Stephanie avatar
    19 posts
    Registered:
    16 Mar 2011
    06 Jan 2012
    Link to this post
    Hi Devin,

       Where did you add the jQuery code?  Did you put it at the end of the template, or did you add it to the master page where the blog list was going to be used?

    Thanks,

    Steph
  8. Brian
    Brian avatar
    3 posts
    Registered:
    23 Jan 2012
    27 Jan 2012
    Link to this post
    Hi Stephanie,
    Were you able to get this working?
  9. Stephanie
    Stephanie avatar
    19 posts
    Registered:
    16 Mar 2011
    02 Feb 2012
    Link to this post
    Hi Brian,

    I have yet to get this working.  I tried using Devin's approach, but am unsure where to add the jQuery code.  Do you have any suggestions?

  10. Praneeth
    Praneeth avatar
    26 posts
    Registered:
    22 Jun 2012
    27 Jun 2014
    Link to this post

    Not sure if anyone is still interested in this solution. But I got it working with some tweaks.

    <%@ 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" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Comments.Web.UI.Frontend" TagPrefix="comments" %>
    <%@ Import Namespace="Telerik.Sitefinity" %>
    <%@ Import Namespace="Telerik.Sitefinity.Web.UI" %>

    <telerik:RadListView ID="Repeater" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
        <LayoutTemplate>
            <ul class="sfpostsList sfpostListTitleDateContent">
                <asp:PlaceHolder ID="ItemsContainer" runat="server" />
            </ul>
        </LayoutTemplate>
        <ItemTemplate>
            <li class="sfpostListItem" data-sf-provider='<%# Eval("Provider.Name")%>'  data-sf-id='<%# Eval("Id")%>' data-sf-type="Telerik.Sitefinity.Blogs.Model.BlogPost">
                
                <h2 class="sfpostTitle">
                   <sf:DetailsViewHyperLink TextDataField="Title" ToolTipDataField="Description" data-sf-field="Title" data-sf-ftype="ShortText" runat="server" />
                </h2>
                
                <div class="sfpostAuthorAndDate">
                  Posted on <a class="sfPostedOnDate" href="<%# Eval("ItemDefaultUrl")%>"><sf:FieldListView ID="PostDate" runat="server" Format=" {PublicationDate.ToLocal():MMM dd, yyyy}" /></a>
                  
        
                    <%--<comments:CommentsCountControl runat="server" ID="commentsCounterControl" AllowComments='<%# Eval("AllowComments") %>' ThreadKey='<%# ControlUtilities.GetLocalizedKey(Eval("Id")) %>' ThreadType='<%# Container.DataItem.GetType().FullName %>' DisplayMode="ShortText"/> --%>
                </div>

                <sf:FieldListView ID="PostContent" runat="server" Text="{0}" Properties="Content" WrapperTagName="div" WrapperTagCssClass="sfpostContent" EditableFieldType="LongText"/>
              
              <div class="sfpostAuthorAndDate"> <div>Posted in </div><div> <sitefinity:HierarchicalTaxonField ID="HierarchicalFieldControl" runat="server" TaxonomyId="E5CD6D69-1543-427b-AD62-688A99F5E7D4" DisplayMode="Read" WebServiceUrl="~/Sitefinity/Services/Taxonomies/HierarchicalTaxon.svc" Expanded="false" TaxonomyMetafieldName="Category" ExpandText="ClickToAddCategories" BindOnServer="true" /></div></div>
            </li>
        </ItemTemplate>
    </telerik:RadListView>
    <sf:Pager id="pager" runat="server"></sf:Pager>
    <asp:PlaceHolder ID="socialOptionsContainer" runat="server" />
      

      <%--Hack for making categories link--%>
      <script type="text/javascript">
        $( document ).ready(function() { 
       $('.sfCategoriesList li').each(function(){
         var liText = $(this).text().trim().replace(' ','-');
         var liHtml = $(this).html();
         var newLiHtml="<a class='sfPostedOnDate' href='/blog/-in-category/categories/"+liText+"'>"+liHtml+"</a>"
             $(this).html(newLiHtml);
           });
    });
      </script>

10 posts, 0 answered