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

Forums / Developing with Sitefinity / Two Column Blog Layout:left column only for Image and the right column only for Text content

Two Column Blog Layout:left column only for Image and the right column only for Text content

6 posts, 1 answered
  1. Sheikh Omer
    Sheikh Omer avatar
    3 posts
    Registered:
    15 Mar 2010
    30 Mar 2010
    Link to this post
    Hi,
    I am using the sitefinity for the very first time. My client wants their blog content view list to be displayed in two column.The left column will only contain the image posted using Rad Editor by the end user and the Right Column will contain the text content posted using the RadEditor  by the end user.

    To solve this purpose, I have modified the blog ContentViewItemlist.ascx file and created a table of two column. Now How can I post the image and text content seperately in two column.
    <asp:Panel id="pnlPostContent"  runat="server">
        <asp:Literal ID="Content" runat="server"></asp:Literal>
    </asp:Panel>

    The above code in BlogContentViewItemList.ascx file display the whole content(with image) in one column.

    Please give me a solution.

    Thanks for your help.
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    19 May 2017
    30 Mar 2010
    Link to this post
    Hello Sheikh Omer,

    If the image is part of the content of the blog post ( the blog post is a content item) you need to use RegularExpression that loops through the content and finds the <img> tags. Then you need to get all data between these tags and display it on the another column.

    Another option is using a metakey filed that is especially prepared to hold the image data ( the same key that yo have for news - Thumbnail Image filed). This way is the easiest you can use, because you will just set the metakey name as a ID of an Image control that you will use in the second column.

    I hope that this helps.

    Greetings,
    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. Sheikh Omer
    Sheikh Omer avatar
    3 posts
    Registered:
    15 Mar 2010
    30 Mar 2010
    Link to this post
    Thank you Ivan, for the quick reply. I have used the second approach you described. But I am not getting the result as my image column is not showing the image instead showing an empty image icon. My text content column is still showing the image with the text.

    Here is my code:
    <tr>
                <td>
                <asp:Image ID="thumbnail" runat="server" />
                </td>
                <td>
              <asp:Panel id="pnlPostContent"  runat="server">
                   <asp:Literal ID="Content" runat="server"></asp:Literal>
              </asp:Panel>
    </td>
    </tr>
     
    I think I need to do something more.

    Can you please let me know the step by step process to show the image and text separately in two column in blog post control?

    Thank You for help.
    Regards
    Sheikh Omer   
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    19 May 2017
    30 Mar 2010
    Link to this post
    Hello Sheikh Omer,

    1. Register a new metakey in you web.config under Blogs provider.
    2. Map PostNew and PostEdit external templates - how to map a template
    3. Create a Texbox in the templates where you will set the path to the image.
    4. Map ListPageMaster template for BlogPosts control and set the value of the ImageUrl to the value entered in your custom metakey.

    You can gather more information at Adding Custom Fields section of our User Manual

    Basically you could create a custom control that inherits from BlogPosts where you could set each metakey programmatically by overriding SetItemMetaData method.

    sample code

    protected override void SetItemMetadata(System.Web.UI.Control itemContainer, Telerik.Cms.Engine.IContent contentItem)
       {
           base.SetItemMetadata(itemContainer, contentItem);
           var _image = itemContainer.FindControl("ItemImage") as Image;
           if (_image != null)
           {
               _image.ImageUrl = (string)contentItem.GetMetaData("MyThumb");
           }
       }


    Greetings,
    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. Sheikh Omer
    Sheikh Omer avatar
    3 posts
    Registered:
    15 Mar 2010
    31 Mar 2010
    Link to this post
    Hi Ivan,
    Thanks again for very useful reply. I have registered two new meta key in web.cofig file. Here they are:
    <add key="Blogs.Thumbnail" valueType="ShortText" visible="True" searchable="False" sortable="False" defaultValue="" />
    <add key="Blogs.Summary" valueType="LongText" visible="True" searchable="True" sortable="True" defaultValue="" />
     
    I mapped postNew file and added the textboxes for Thumbnail and Summary.Here They are:

    <asp:Label ID="Label4" AssociatedControlID="Summary" runat="server"><asp:Literal ID="Literal6" runat="server" Text="<%$Resources:Summary %>"></asp:Literal> <em id="SummaryLabel" runat="server"></em></asp:Label
    <asp:TextBox ID="Summary" TextMode="MultiLine" Text="" runat="server"></asp:TextBox
        
    <asp:Label ID="Label3" AssociatedControlID="Thumbnail" runat="server"><asp:Literal ID="Literal14" runat="server" Text="<%$Resources:Thumbnail %>"></asp:Literal> <em id="ThumbnailLabel" runat="server"></em></asp:Label
        
    <asp:TextBox ID="Thumbnail" Text="" runat="server" MaxLength="250"></asp:TextBox
    <sfLib:ButtonSelector WindowNavigateUrl="~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx" ItemTemplatePath="~/Sitefinity/Admin/ControlTemplates/News/Dialogs/ButtonSelector.ascx" AssociatedControls="Thumbnail" runat="server" cssclass="pickerWrapper" ButtonText="Select" /> 
    <p class="example"
        
    <asp:Literal ID="Literal15" runat="server" Text="<%$Resources:ThumbnailNote %>"></asp:Literal
    </p>
    Here is my ContentItemViewList.ascx file code to display the Image and Summary:
    <tr>
    <td>
    <asp:PlaceHolder ID="ThumbnailHolder" runat="server">
    <asp:Image ID="Thumbnail" runat="server" />
    </asp:PlaceHolder>
    </td>
    <td>
    <asp:Panel id="pnlPostContent"  runat="server">
    <p>
    <asp:Literal ID="Summary" runat="server" Text=""></asp:Literal>
    </p>
    </asp:Panel>
     
    Now I am getting the summay in one column which is nice but I my image column is still missing the image url.

    Can you please let me know what I am missing?

    Thank you.
    Regards
    Sheikh A Al Omer
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    19 May 2017
    01 Apr 2010
    Link to this post
    Hi Sheikh Omer,

    You have to create a custom control that inherits from BlogPosts control and implement the logic that will resolve the Thumbnail value - which is Guild . Below is the implementation.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Telerik.Web.UI;
    using System.Web.UI;
    using System.Collections;
    using Telerik.Cms.Engine;
    using Telerik.Cms.Engine.WebControls;
    using Telerik.Cms.Web;
    using Telerik.Cms;
    using Telerik.Blogs.WebControls;
    using Telerik.Web.UI.SpamProtection;
     
     
    public class BlogPostsCustomControl : BlogPosts
    {
        public BlogPostsCustomControl()
        {
        }
        public override string SingleItemTemplatePath
        {
            get
            {
                return "~/Sitefinity/Admin/ControlTemplates/Blogs/Modes/ListPageDetail.ascx";
            }
     
        }
     
        public override string ItemListTemplatePath
        {
            get
            {
                return "~/Sitefinity/Admin/ControlTemplates/Blogs/Modes/ListPageMaster.ascx";
            }
        }
     
     
        protected override void SetItemMetadata(Control itemContainer, IContent contentItem)
        {
            base.SetItemMetadata(itemContainer, contentItem);
            foreach (IMetaInfo info in Manager.MetaKeys.Values)
            {
                Control ctrl = base.FindContentViewControl(info.Key, itemContainer);
                if ((ctrl != null)
                     && (ctrl is System.Web.UI.WebControls.Image)
                     && (info.ValueType == MetaValueTypes.ShortText))
                {
                    string imageUrl = (string)contentItem.GetMetaData(info.Key);
                    if (!String.IsNullOrEmpty(imageUrl))
                    {
                        ((System.Web.UI.WebControls.Image)ctrl).ImageUrl = this.GetItemUrl(imageUrl, false);
                    }
                }
            }
        }
        private string GetItemUrl(string val, bool resolveAsAbsoluteUrl)
        {
            if (val.StartsWith("~/"))
                return this.ResolveUrl(val);
     
            if (val.StartsWith("["))
            {
                int idx = val.IndexOf("]");
                string provider = val.Substring(1, idx - 1);
                string strId = val.Substring(idx + 1);
                Guid id = new Guid(strId);
     
                if (ContentManager.Providers.ContainsKey(provider))
                {
                    IContent cnt = ContentManager.Providers[provider].GetContent(id);
                    if (cnt != null)
                        return VirtualPathUtility.ToAbsolute(cnt.UrlWithExtension, this.Context.Request.ApplicationPath);
                }
                else
                {
                    string url = CmsHelper.GetPageUrl(id, this.Context);
                    if (!string.IsNullOrEmpty(url))
                    {
                        return url;
                    }
                }
                return String.Concat("Item not found: [", provider, "]", id);
            }
            return val.ToString();
        }
     
    }

    You need to add the following control in ListPageMaster template ( you can download the external templates from your account >> Download section)

    <asp:Image ID="Thumbnail" runat="server"></asp:Image>

    The control should be registered in the web.config

    <toolboxControls>
       <clear/>
            <add name="BlogPostsCustomControl" section="Custom" type="BlogPostsCustomControl, App_Code"/>
     
                    ....
                           ....


    Sincerely yours,
    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.
    Answered
Register for webinar
6 posts, 1 answered