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

Forums / Developing with Sitefinity / Issue with Thumbnail field for blogpost

Issue with Thumbnail field for blogpost

3 posts, 0 answered
  1. Bob
    Bob avatar
    14 posts
    Registered:
    06 Jul 2012
    21 Feb 2013
    Link to this post

    I posted this in the Template Builder forum, but I get the feeling it's not the right forum. So I'm trying here:

    Hello,

    I'm trying to create a blog where the posts are displayed in a list with a summary, as per the default available template, but with a thumbnail image to the left side of the summary, so as to spice up the blog for visitors. So far, after doing some research, I found out that Sitefinity has a built-in image selector widget that I can add as a custom field to my 'Create blog post' window (see here and here). What I did: 

    • I added a custom field to the blog posts menu, and pasted Telerik.Sitefinity.Web.UI.Fields.ImageField as its Interface Widget. So far so good, I am indeed able to select an image from my image library to add it to the post. 
    • I then went to the Blog widget on the actual page, and into its settings. Went to the List template (Title, date and summary in my case) and yep, there was my Thumbnail field on the right hand list. 
    • I then inserted it into the template like you can see in the attached code (line 23).When I save the template and return to the page with the blog on it, the image isn't displayed. Instead, I get the image's URL as plain text. It's the correct URL (when pasted into a different window it loads as the image), but it's somehow not rendered as an image but just as plain text, between the post's title and summary text. 

    So, question 1: What's going wrong here? Do I need to put it differently into the template so that it'll render as an image?

    And question number 2 as a follow up: How can I make it so the image displays to the left of a post's summary? I see some <div> tags in the template, to what extent can I use HTML/CSS styling in there to position the thumbnail in relation to the summary / other blogpost elements?

    01.<%@ Control Language="C#" %>
    02.<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
    03.<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    04.<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>
    05.<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    06.<%@ Import Namespace="Telerik.Sitefinity" %>   
    07. 
    08.<telerik:RadListView ID="Repeater" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
    09.    <LayoutTemplate>
    10.        <sf:ContentBrowseAndEditToolbar ID="MainBrowseAndEditToolbar" runat="server" Mode="Add"></sf:ContentBrowseAndEditToolbar>
    11.        <ul class="sfpostsList sfpostListTitleDate">
    12.            <asp:PlaceHolder ID="ItemsContainer" runat="server" />
    13.        </ul>
    14.    </LayoutTemplate>
    15.    <ItemTemplate>
    16.        <li class="sfpostListItem">
    17.            <h2 class="sfpostTitle">
    18.                <sf:DetailsViewHyperLink TextDataField="Title" ToolTipDataField="Description" runat="server" />
    19.            </h2>
    20.            <div class="sfpostDate">
    21.                <sf:FieldListView ID="PostDate" runat="server" Format="{PublicationDate.ToLocal():dd MMMMMMMMM, yyyy}" />
    22.            </div>
    23.          <sitefinity:TextField runat="server" DisplayMode="Read" Value='<%# Eval("Thumbnail")%>' />
    24.           
    25.           
    26.          <sf:FieldListView ID="PostContent" runat="server" Text="{0}" Properties="Summary" WrapperTagName="div" WrapperTagCssClass="sfpostSummary" />
    27.           
    28.          <sf:DetailsViewHyperLink ID="FullStory" Text="<%$ Resources:BlogResources, FullStory %>" runat="server" CssClass="sfpostFullStory" />
    29.           
    30.            <sf:ContentBrowseAndEditToolbar ID="BrowseAndEditToolbar" runat="server" Mode="Edit,Delete,Unpublish"></sf:ContentBrowseAndEditToolbar>
    31.        </li>
    32.    </ItemTemplate>
    33.</telerik:RadListView>
    34.<sf:Pager id="pager" runat="server"></sf:Pager>
    35.<asp:PlaceHolder ID="socialOptionsContainer" runat="server" />

     


  2. Bob
    Bob avatar
    14 posts
    Registered:
    06 Jul 2012
    22 Feb 2013 in reply to Bob
    Link to this post

    Anyone have any idea, or a nudge in the right direction perhaps? 

  3. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    26 Feb 2013
    Link to this post
    Hi Bob,

    The reason why you get the url only is, because by default the widget templates editor will inset the value of your custom ImageField in a textField control, which doesn't render images. What you can do is us an asp Image tag, as following:

    <asp:Image runat="server" ID="Img" ImageUrl='<%# Eval("ImageFieldCustom")%>' />

    Place it on your template and it should render the image properly. As for the alighment, you can use css to align your images. 
    I have created a video, which demonstrates how you can align your image to stand on the right or on the left side of the summary. you simply need to transform it to a block element, by declaring display:block, then you will be able to float it to the left or to the right and to leave spaces between the image and the text, you can set margins or paddings. Please refer to the guide of the css vendor W3C:

    http://www.w3schools.com/w3c/default.asp

    All the best,
    Jen Peleva
    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 posts, 0 answered