Issue with Thumbnail field for blogpost
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: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"
/>
Anyone have any idea, or a nudge in the right direction perhaps?
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")%>' />