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

Forums / Designing with Sitefinity / Add Tags as CSS Classes in News Module?

Add Tags as CSS Classes in News Module?

7 posts, 0 answered
  1. David Park
    David Park avatar
    5 posts
    Registered:
    12 Nov 2005
    19 Nov 2010
    Link to this post
    I'm using the news module in Sitefinity 3.7 with an overridden template for the master view.  In that template, I'd like to add a css class to the summary's markup for each of the tags I've attached to the news item.  For example, I've got a "system-notifications" tag and an "important" attached to a news item.  In the output, I'd like to inject that in the "div" tag that wraps the item:

    01.<div class="system-notifications important">
    02.            <h2 class="sf_newsTitle">
    03.                    <asp:Literal ID="Title" runat="server"></asp:Literal>
    04.            </h2>
    05.            <p class="sf_newsDate">
    06.                <asp:Literal ID="Publication_Date" runat="server" Text="{0}" />
    07.            </p>
    08.            <p>
    09.                <asp:Literal ID="Summary" runat="server" Text=""></asp:Literal>
    10.            </p>
    11.            <p class="sf_readMore">
    12.                <asp:HyperLink ID="fullContent1" runat="server">
    13.                    <asp:Literal ID="LiteralFS" runat="server" Text="<%$Resources:FullStory %>"></asp:Literal>
    14.                </asp:HyperLink>
    15.            </p>
    16.            <asp:PlaceHolder ID="ThumbnailHolder" runat="server">
    17.                <p class="sf_newsThumbnail"><asp:Image ID="Thumbnail" runat="server" /></p>
    18.            </asp:PlaceHolder>
    19.            <p class="sf_newsAuthor">
    20.                    <asp:Literal ID="Author" runat="server"></asp:Literal>
    21.            </p>
    22.            <p>
    23.                <asp:Literal ID="Source" runat="server"></asp:Literal>
    24.            </p>
    25.            <p class="sf_postCategory">
    26.                <asp:HyperLink ID="Category" runat="server" />
    27.            </p>
    28.            <p class="sf_postTags">
    29.                <asp:Repeater ID="Tags" runat="server">
    30.                    <ItemTemplate>
    31.                        <asp:HyperLink ID="tagLink" runat="server" />
    32.                    </ItemTemplate>
    33.                </asp:Repeater>
    34.            </p>
    35.        </div>

    Is this possible?  I have no idea how to access the underlying News object to get the tag data.

    Thanks,
    David
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    19 Nov 2010
    Link to this post
    Hello David,

    You can use JQuey and its css methods to access each element of the html that control outputs.

    Kind regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. David Park
    David Park avatar
    5 posts
    Registered:
    12 Nov 2005
    19 Nov 2010
    Link to this post
    That would work, but how do I get the tag names into my jquery script?  I'm not actually displaying the tags in the output, so I'm unable to use jquery to retrieve them from the rendered markup.
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    21 Nov 2010
    Link to this post
    Hi David,

    Since this is a repeater you can use tagLink as an identification which you can access with jQuery selector.
    Another option is creating a custom control that inherits from NewsView and inside SetItemMetadata method you can get the Tags repeater and its data items and inject the css class as attribute to the HyperLink or using a div.

    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. David Park
    David Park avatar
    5 posts
    Registered:
    12 Nov 2005
    23 Nov 2010
    Link to this post
    Thanks.  I'm trying to implement my own inherited control.  Two issues:

    1. When I add my inherited control to a page I get the following error:

    Invalid resource name (Telerik.News.Resources.ControlTemplates.Frontend.Modes.ListPageMaster.ascx) for assembly (Columbia.Systems.Advancement.Volunteers.Controls, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null) or empty template.


    My control is in its own assembly/separate project from the web site.  Do I need to do something to register the News control resource references in it?

    2.  I'm not sure I'm getting the tags for each news item in the most efficient way.  I'm using this code in SetContentItem:

    protected override void SetItemContent(System.Web.UI.Control itemContainer, IContent contentItem)
            {
                base.SetItemContent(itemContainer, contentItem);
                IList tags = this.Manager.GetTags(contentItem.ID);
                string css = "";
                foreach (string s in tags)
                {
                    css += s.Replace(' ', '-') + " ";
                }
                css = css.Trim();
                System.Diagnostics.Debug.WriteLine(css);
            }

    Seems like that would cause a lot of database overhead by re-querying the DB for tags for each content object.  But I don't find any reference to tags in the IContent interface.  Is there a way to get the tags directly from the IContent object?

    Thanks yet again,
    David
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    23 Nov 2010
    Link to this post
    Hello Davi

    You should override the properties below

    ublic override string ItemListTemplatePath
        {
            get
            {
                return "~/Sitefinity/ControlTemplates/News/ListPageMaster.ascx";
            }
     
        }
     
        public override string SingleItemTemplatePath
        {
            get
            {
                return "~/Sitefinity/ControlTemplates/News/ListPageDetails.ascx";
            }
     
        }
     
     
        public override Type LocalizationAssemblyInfo
        {
            get
            {
                return this.GetType();
            }
            set
            {
                base.LocalizationAssemblyInfo = value;
            }
        }
     
        public override Type AssemblyInfo
        {
            get
            {
                return this.GetType();
            }
            set
            {
                base.AssemblyInfo = value;
            }
        }



    All the best,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. David Park
    David Park avatar
    5 posts
    Registered:
    12 Nov 2005
    23 Nov 2010
    Link to this post
    Thanks, that was the final hurdle.  Here's the complete solution.

    Overridden news control:

    public partial class ClassyNewsControl : NewsView
    {
        public ClassyNewsControl()
        {
        }
     
        public override string ItemListTemplatePath
        {
            get
            {
                return "~/Sitefinity/ControlTemplates/News/ListPageMaster.ascx";
            }
     
        }
     
        public override string SingleItemTemplatePath
        {
            get
            {
                return "~/Sitefinity/ControlTemplates/News/ListPageDetails.ascx";
            }
     
        }
     
     
        public override Type LocalizationAssemblyInfo
        {
            get
            {
                return this.GetType();
            }
            set
            {
                base.LocalizationAssemblyInfo = value;
            }
        }
     
        public override Type AssemblyInfo
        {
            get
            {
                return this.GetType();
            }
            set
            {
                base.AssemblyInfo = value;
            }
        }
     
        protected override void SetItemContent(System.Web.UI.Control itemContainer, IContent contentItem)
        {
            base.SetItemContent(itemContainer, contentItem);
             
            IList tags = this.Manager.GetTags(contentItem.ID);
            string css = "";
            foreach (Tag s in tags)
            {
                css += s.TagName.Replace(' ', '-') + " ";
            }
            css = css.Trim();
     
            // add class to wrapping div
            Control c = itemContainer.FindControl("itemwrap");
            if (c != null && !string.IsNullOrEmpty(css))
            {
                (c as HtmlGenericControl).Attributes.Add("class", css);
            }
            System.Diagnostics.Debug.WriteLine(css);
        }
    }

    ListPageMasterTemplate:

    ...
    <ItemTemplate>
             
            <div id="itemwrap" runat="server">
                <h2 class="sf_newsTitle">
    ...

    Only real change is addition of id on div wrapping the news item and the "runat" tag to make it accessible server-side.
Register for webinar
7 posts, 0 answered