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

Forums / Developing with Sitefinity / Adding image to Blog module

Adding image to Blog module

16 posts, 1 answered
  1. Magnus
    Magnus avatar
    28 posts
    Registered:
    26 May 2009
    18 Sep 2009
    Link to this post
    Hi there!

    First of all i would like to say that i'm kind an beginner with sitefinity and asp.net/C#. Coming from the PHP-world, so i'm not equal with you guys in knowledge.

    But i'm getting to learn more and more each day, and i really starting to like Sitefinity alot. Now to my problem. I know this might be a very easy task to do. But i couldnt make it all the way. (This might be a good example for other people with the same experience as me)

    My problem. I want to add a Image to my Blog Module using the Image Library control. (i've did some searching first and found this very useful link How to Associate an Image Library with Content ). Which gave me some guidance.

    1. I copied the blog external template files (PostEdit, PostNew and the App_Localresources files) into my project under /Sitefinity/Admin/ControlTemplates/Blogs/
    2. Also added those viewSettings in the the App_data/config../...Controlsconfig.xml
    3. Added this code in web.config
            <add key="Blogs.Image" valueType="ShortText" visible="True" searchable="False" sortable="False" defaultValue=""/> 

    4.Added this code in PostNew and PostEdit
    <%@ Register TagPrefix="sfLib" Namespace="Telerik.Libraries.WebControls" Assembly="Telerik.Libraries" %>

    ...
    ...
    ...

    <
    h3> 
                          <asp:Literal ID="Literal2" runat="server" Text="<%$Resources:Image %>"></asp:Literal></h3
                            <fieldset class="set"
                                <ol class="setIn clearfix"
                                    <li class="selector"
                                        <asp:Label ID="Label2" AssociatedControlID="Image" runat="server"
                                            <asp:Literal ID="Literal25" runat="server" Text="<%$Resources:Image %>"></asp:Literal> 
                                            <em id="ImageLabel" runat="server"></em></asp:Label> 
                                        <asp:TextBox ID="Image" Text="" runat="server" MaxLength="250"></asp:TextBox> 
                                        <sfLib:ButtonSelector WindowNavigateUrl="~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx" AssociatedControls="Image" ItemTemplatePath="~/Sitefinity/Admin/ControlTemplates/News/Dialogs/ButtonSelector.ascx" runat="server" cssclass="pickerWrapper" ButtonText="<%$Resources:Select%>" /> 
                                        <class="example"
                                            <asp:Literal ID="Literal26" runat="server" Text="<%$Resources:ImageNote %>"></asp:Literal></p
                                    </li> 
                                </ol> 
                            </fieldset> 

    5. Added the fields Image, ImageNote and Select in the  resources files (.resx)

    6. Added the ContentViewItemList.ascx from the Extenden Templates files in my /sitefinity/controltemplates/blogs/
    7. Tried to get the url into a <asp:Image> which didnt work out so well.. I cant see any image. But if i use <asp:label id="Image"> i can see the url to the image in the libary.
                <asp:PlaceHolder ID="ImageHolder" runat="server"
                    <class="sf_postImage"><asp:Image ID="Image" runat="server" /></p
                </asp:PlaceHolder> 


    So... what have i missed? I think i'm pretty close alteast..

    Kind Regards / Magnus

  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    18 Sep 2009
    Link to this post
    Hi Magnus,

    Thank you for using our services.

    Well you are almost there. You should add some logic for adding the url to the image control. Here is some sample code. First create a literal with the id Image (or the same as in your metafilelds section). Then on page load you will get the value of the literal, get the url for the image and assign it to an image control:
    <asp:Image id="BlogImage" runat="server" /> 
    <asp:Literal ID="Image" runat="server" Visible="false" /> 

    And add the following C# script:
    public void Page_Load(object sender, EventArgs e) 
            string item = Image.Text; 
            Guid guid = new Guid(item.Substring(item.IndexOf("]")+1)); 
            Telerik.Libraries.LibraryManager manager= new Telerik.Libraries.LibraryManager(); 
            Telerik.Cms.Engine.IContent cnt = manager.GetContent(guid); 
            BlogImage.ImageUrl = cnt.UrlWithExtension; 

    Try this and tell us how it goes.

    Kind regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Magnus
    Magnus avatar
    28 posts
    Registered:
    26 May 2009
    18 Sep 2009
    Link to this post
    Hi Radoslav.


    Thanks for the info. I thought i had to do something like that.. just didn't know how to.

    I've made a new Usercontrol with an .ascx.cs file. Don't know if that it's the correct way to add some C# code).
    After that i added your C# code, i couldn't find the controls in the .ascx from the .ascx.cs file.

    My Files:

    ListHeadBlogItemList.ascx

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ListHeadBlogItemList.ascx.cs" Inherits="Sitefinity_ControlTemplates_Blogs_ListHeadBlogItemList" %> 
    <%@ Register Assembly="Telerik.Blogs" Namespace="Telerik.Blogs.WebControls" TagPrefix="sfWeb" %> 
     
    <telerik:CssFileLink ID="CssFileLink1" EmbeddedFileName="Telerik.Blogs.Resources.ControlTemplates.Frontend.blogsCommonLayout.css" FileName="" Media="screen" runat="server" /> 
     
    <sfWeb:HeaderLinks id="headerLinks" runat="server" /> 
     
    <asp:HyperLink ID="backLink" runat="server" Text="<%$Resources:GoBack %>" /> 
    <asp:Repeater ID="repeater" runat="server"
     <HeaderTemplate> 
            <ul class="sf_postListing"
        </HeaderTemplate> 
        <ItemTemplate> 
            <li> 
                <asp:Literal ID="Image" runat="server" />  
                 
                <h2 class="sf_postTitle"
                    <asp:HyperLink ID="fullContent1" runat="server"
                        <asp:Literal ID="Title" runat="server"></asp:Literal> 
                    </asp:HyperLink> 
                </h2> 
                <class="sf_postDate"
                    <telerik:DateTimeLiteral runat="server" ID="Publication_Date" DateFormatString="D"></telerik:DateTimeLiteral> 
                </p> 
                <asp:Panel id="pnlPostContent" runat="server" CssClass="sf_postContent"
                    <asp:Literal ID="content" runat="server"></asp:Literal> 
                </asp:Panel> 
                <class="sf_readMore"
                    <asp:HyperLink ID="fullContent2" runat="server"
                        <asp:Literal ID="Literal1" runat="server" Text="<%$Resources:FullStory %>"></asp:Literal> 
                    </asp:HyperLink> 
                </p> 
                <class="sf_postComments"
                    <asp:HyperLink ID="CommentsLink" runat="server" NavigateUrl="{0}#comments"
                        <asp:Literal ID="Literal3" Text="<%$Resources:Comments %>" runat="server"></asp:Literal> 
                        (<asp:Label ID="CommentsCount" runat="server"></asp:Label>
                    </asp:HyperLink> 
                </p> 
                <class="sf_postAuthor"
                    <asp:Literal ID="Literal2" runat="server" Text="<%$Resources:Author %>"></asp:Literal> 
                    <asp:HyperLink ID="postedBy" runat="server"
                        <asp:Literal ID="Author" runat="server"></asp:Literal> 
                    </asp:HyperLink> 
                </p> 
                <class="sf_postCategory"
                    <asp:Literal ID="CategoryLiteral" runat="server" Text="<%$Resources:Category %>" /><asp:HyperLink ID="Category" runat="server" /> 
                </p> 
                <class="sf_postTags"
                     
                    <asp:Repeater ID="Tags" runat="server"
                    <HeaderTemplate> 
                        <asp:Literal ID="TagsLiteral" runat="server" Text="<%$Resources:Tags %>" /> 
                    </HeaderTemplate> 
                        <ItemTemplate> 
                            <asp:HyperLink ID="tagLink" runat="server" /> 
                        </ItemTemplate> 
                    </asp:Repeater> 
                </p> 
            </li> 
        </ItemTemplate> 
        <FooterTemplate> 
            </ul> 
        </FooterTemplate> 
    </asp:Repeater> 
    <telerik:Pager ID="pager1" runat="server"
        <LayoutTemplate> 
             <asp:Repeater ID="PageRepeaterLinkButton" runat="server"
                <HeaderTemplate> 
                    <ol class="sf_pager"
                    <li><asp:LinkButton ID="PreviousPage" runat="server" Text="<%$Resources:PreviousPage %>"></asp:LinkButton></li
                </HeaderTemplate> 
                <ItemTemplate> 
                    <li> 
                        <asp:LinkButton ID="SingleItem" runat="server" /> 
                    </li> 
                </ItemTemplate> 
                <FooterTemplate> 
                    <li><asp:LinkButton ID="NextPage" runat="server" Text="<%$Resources:NextPage %>"></asp:LinkButton></li
                    </ol> 
                </FooterTemplate> 
            </asp:Repeater> 
            <asp:Repeater ID="PageRepeaterHyperLink" runat="server"
                <HeaderTemplate> 
                    <ol class="sf_pager"
                    <li><asp:HyperLink ID="PreviousPage" runat="server" Text="<%$Resources:PreviousPage %>"></asp:HyperLink></li
                </HeaderTemplate> 
                <ItemTemplate> 
                    <li> 
                        <asp:HyperLink ID="SingleItem" runat="server" /> 
                    </li> 
                </ItemTemplate> 
                <FooterTemplate> 
                    <li><asp:HyperLink ID="NextPage" runat="server" Text="<%$Resources:NextPage %>"></asp:HyperLink></li
                    </ol> 
                </FooterTemplate> 
            </asp:Repeater> 
            
        </LayoutTemplate> 
    </telerik:Pager> 


    ListHeadBlogItemList.ascx.cs

    using System; 
    using System.Collections; 
    using System.Configuration; 
    using System.Data; 
    using System.Linq; 
    using System.Web; 
    using System.Web.Security; 
    using System.Web.UI; 
    using System.Web.UI.HtmlControls; 
    using System.Web.UI.WebControls; 
    using System.Web.UI.WebControls.WebParts; 
    using System.Xml.Linq; 
     
    public partial class Sitefinity_ControlTemplates_Blogs_ListHeadBlogItemList : System.Web.UI.UserControl 
        public void Page_Load(object sender, EventArgs e) 
        {  
            string item = this.Image.Text; // <-- Cant find "Image" 
            Guid guid = new Guid(item.Substring(item.IndexOf("]") + 1)); 
            Telerik.Libraries.LibraryManager manager = new Telerik.Libraries.LibraryManager(); 
            Telerik.Cms.Engine.IContent cnt = manager.GetContent(guid); 
            this.BlogImage.ImageUrl = cnt.UrlWithExtension; // <-- Cant find "BlogImage" 
        }  
     




    Like i said before, my asp.net knowledge isn't the best. So what can i do to be able to use the controls in the .cs-file?


    Kind Regards / Magnus




  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    18 Sep 2009
    Link to this post
    Hi Magnus,

    The code I sent you would work for the single blog view, where the items are not placed into the item template of a asp:repeater control.
    Just a note, I do not see the <asp:Image> control on your template, I just see the <asp:Literal id="Image>


    To find the controls in the .ascx page you can use the following, C# script. This can be added directly to the page without creating a code file:
    <script type="text/C#" runat="server">    
        public void Page_Load(object sender, EventArgs e)  
        { 
            Literal image; 
            Image blogImage; 
            foreach (Control item in repeater.Controls) 
            { 
                if (item.FindControl("Image") != null) 
                { 
                    image = (Literal) item.FindControl("Image"); 
                    break; 
                }          
            } 
            foreach (Control item in repeater.Controls) 
            { 
                if (item.FindControl("BlogImage") != null) 
                { 
                    blogImage = (Image) item.FindControl("BlogImage"); 
                    break; 
                } 
            } 
            string item = image.Text; 
            Guid guid = new Guid(item.Substring(item.IndexOf("]") + 1));  
            Telerik.Libraries.LibraryManager manager = new Telerik.Libraries.LibraryManager();  
            Telerik.Cms.Engine.IContent cnt = manager.GetContent(guid);  
            blogImage.ImageUrl = cnt.UrlWithExtension;   
        }  
     </script> 

    You should use similar approach when you want to find nested controls on an .aspx page or .ascx user control in ASP.NET

    Sincerely yours,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Magnus
    Magnus avatar
    28 posts
    Registered:
    26 May 2009
    18 Sep 2009
    Link to this post
    Hi again.

    My problems doesnt seem to be solved. 

    First of all i sent you a code without the <asp:Image> control like you pointed out (i copied the testing code). My bad there.

    But i really cant get this to work out. The repeater just dont want to be "bounded".  The controls within the repeater is empty and i cant find any controls when i'm trying to loop the repeater. =/

    Your code didn't find any controls either. It seems that the repeater is being bound later on. So i've tried some other ways.Like using repeater_OnItemDataBound, but that didnt seem to work either.

    So, what can i do more?

    My Code in a shorter version.
    <asp:Repeater ID="repeater" runat="server"
     <HeaderTemplate> 
            <ul class="sf_postListing"
        </HeaderTemplate> 
        <ItemTemplate> 
            <li> 
                <asp:Image id="BlogImage" runat="server" />  
                <asp:Literal ID="Image" runat="server" />  
            </li> 
        </ItemTemplate> 
        <FooterTemplate> 
            </ul> 
        </FooterTemplate> 
    </asp:Repeater> 

    and the ascx.cs

        public void Page_Load(object sender, EventArgs e) 
        { 
            Literal image; 
            Image blogImage; 
            Telerik.Libraries.LibraryManager manager = new Telerik.Libraries.LibraryManager(); 
     
            foreach (Control item in repeater.Controls) 
            { 
                if (item.FindControl("Image") != null)   // <-- it just dont seems to run this code.
                { 
                    image = (Literal)item.FindControl("Image"); 
     
                    string item2 = image.Text; 
                    Guid guid = new Guid(item2.Substring(item2.IndexOf("]") + 1)); 
                    Telerik.Cms.Engine.IContent cnt = manager.GetContent(guid); 
                    if (item.FindControl("BlogImage") != null) 
                    { 
                        blogImage = (Image)item.FindControl("BlogImage"); 
                        blogImage.ImageUrl = cnt.UrlWithExtension; 
                    } 
                    break; 
                } 
            } 


    Regards / Magnus


  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    18 Sep 2009
    Link to this post
    Hi Magnus,

    I am sorry about that. Page_Load indeed is too early to find the controls. Here is how to do it in ItemDataBoumd:
    void repeater_ItemDataBound(object sender, RepeaterItemEventArgs e) 
        { 
            if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item) 
            { 
                Image blogImage = e.Item.FindControl("BlogImage"as Image; 
                Literal image = e.Item.FindControl("Image"as Literal; 
                if (blogImage != null && image!=null
                { 
                    string item = image.Text; 
                    Guid guid = new Guid(item.Substring(item.IndexOf("]") + 1)); 
                    Telerik.Libraries.LibraryManager manager = new Telerik.Libraries.LibraryManager(); 
                    Telerik.Cms.Engine.IContent cnt = manager.GetContent(guid); 
                    blogImage.ImageUrl = cnt.UrlWithExtension; 
                } 
            } 
        } 


    Greetings,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. Magnus
    Magnus avatar
    28 posts
    Registered:
    26 May 2009
    18 Sep 2009
    Link to this post
    Sorry Radoslav.

    But i'm still having problems.

    the variable item (Images.Text) wont receive the guid. And if it's empty i'm getting a Error that the format is incorrect for the Guid (which should). So i made a:

    if (item != "") 

    But that variable just dont want to get the Guid from the .Text. Although when i'm using the <asp:literal id="Image"... />

    i'm getting the guid on the site "[Libraries]8e6115d6-2003-4fcd-8536-a739ea1f3da1"


    Any other suggestions?

    Thanks for all the help btw. / Magnus
  8. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    18 Sep 2009
    Link to this post
    Hi Magnus,

    The string "[Libraries]8e6115d6-2003-4fcd-8536-a739ea1f3da1" represents both the provider name and the Guid. The provider name is enclosed in the brakets, and the Guid starts after the "]". This is why in my sample code I am just taking the substring that starts after the "]" :
    string item = image.Text; 
    Guid guid = new Guid(item.Substring(item.IndexOf("]") + 1)); 


     Are you using the same approach? Can you see in debug mode what value is getting passed to the literal and try to form the guid by stripping unnecessary chars?

    All the best,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  9. Magnus
    Magnus avatar
    28 posts
    Registered:
    26 May 2009
    18 Sep 2009
    Link to this post
    Hi.... again.. =)

    Yepp. i'm aware of the syntax for the guid. that's not the problem. the problem is that Image.Text is always empty. (but i can see the guid text when i'm running the site (i've did set the visible to true, just to check).

    string item = image.Text;    // image.Text just dont have the guid text when i'm running the OnItemDataBound on the repeater.


    Hope you understood my problem better now. I'm not so good at explaining my problems. ;)


    Regards / Magnus
  10. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    18 Sep 2009
    Link to this post
    Hello Magnus,

    Can you try the same with the template attached? It works on my end.

    Best wishes,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Answered
  11. Magnus
    Magnus avatar
    28 posts
    Registered:
    26 May 2009
    18 Sep 2009
    Link to this post
    That did the trick.

    Thanks you so very much for help!

    Found what i did wrong.

    I tried binding the repeater like this:
    <asp:Repeater ID="repeater" OnItemDataBound="repeater_ItemDataBound" runat="server"

    instead of binding it in the Page_Load with you are doing in the template.
            repeater.ItemDataBound += new RepeaterItemEventHandler(repeater_ItemDataBound); 


    Guess i've still got much to learn. ;)


    Have a nice weekend and thanks for all the help! / Magnus


  12. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    18 Sep 2009
    Link to this post
    Hello Magnus,

    Thank you for the feedback.

    We are always glad to assist our community. If you have more questions, I think you know how to contact us.

    Kind regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  13. Trevor
    Trevor avatar
    17 posts
    Registered:
    18 Nov 2010
    25 Nov 2010
    Link to this post
    Hi,

    I've been following this Post and have successfully managed to get it all working. The only thing i'm still having trouble with is getting the Image to hyperlink to the blog entry. From what I see the hyperlinking at the moment is generated based on the ID from the blogs code?

    How could I replicated the linking for the image? I would really appreciate your help!

    Trevor
  14. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    25 Nov 2010
    Link to this post
    Hi Trevor,

    Most probably you are not resolving the image ID.  The code above pass the item value ( which is string) to GetContent method  which should return an Image (IContent ) . Then the ImageUrl is set to the UrlWithExtension of the content item.

    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
  15. Trevor
    Trevor avatar
    17 posts
    Registered:
    18 Nov 2010
    25 Nov 2010
    Link to this post
    Hi Ivan,

    Thank you very much for your response, I'm not sure if I maybe asked my question correctly. The image renders correctly, no problem there; but what I'd like to do is that if a person clicks the image that they'd be taken to the blog detailed page (similar to the Full Story button.)

    Since resolving the GUID on the image only gives me the image url. I need the actual blog page, is this possible?
  16. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    25 Nov 2010
    Link to this post
    Hi Trevor,

    You need to get the blog post as IContent item and its UrlWithExtension. Then wrap the Image inside a HyperLink. The NavigateUrl of the HyperLink should be set to the UrlWithExtension value of the blog post. Note that you should expose another property where you set the page on which you have blog posts control, because UrlWithExtension will return only the post url. The content item does not know on which page you have dropped BlogPosts control.

    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
Register for webinar
16 posts, 1 answered