Image Gallery inside blog posts?

Posted by Community Admin on 29-Jul-2011 00:00

Hey everyone,

Had a different request today from a client - they have asked if it's possible to include an image gallery inside of a blog post, by use of the Gallery widget? I'm not 100% sure if it's even possible to add in the widgets into posts, but I figured I'd ask!

Posted by Community Admin on 03-Aug-2011 00:00

Hello Brad,

This is a tough one. Blog post template should be modified to take an album on Page_Load to execute the page load in the template put in <script runat="server">. Images taken from album should be repeated with a repeater or RadListView. In the backend when creating the blog post create a custom field that will reference a control with album selector so the user can select which album to display in the blog post. The image gallery widget cannot be used directly in blog post.

Greetings,
Stanislav Velikov
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

Posted by Community Admin on 04-Aug-2011 00:00

Hey Stanislav,

I wasn't able to find anywhere on the site or forum to add a custom field specifically for the Album Selector or ImageSelector. Ideally, the custom field would be a popup just like the Gallery Widget is right now. Are there any posts or references that you know of/can show me that would point in the right direction of doing this?

Thanks again,
Brad

Posted by Community Admin on 09-Aug-2011 00:00

Hi Brad,

Here is a sample of the album selector. It displays all albums which have at least one image in them. The control is composed from a template and code file.
To use this in your custom field for blogs create new custom field for blogs of type short text. Go to Administration->Settings->Advanced->Blogs->Controls->PostsBackend->Views->BlogsBackendEditPost->Sections->CustomFieldSection->Fields->YourField and set field type (namespace.class of the selector control).
Here is the code file(you take the namespace and class from here)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Sitefinity.Web.UI.Fields;

using Telerik.Sitefinity.Modules.Libraries;

using Telerik.Sitefinity.Libraries.Model;

namespace SitefinityWebApp.Choice

public class ChoiceFieldCustom : ChoiceField

public ChoiceFieldCustom()

this.RenderChoicesAs = Telerik.Sitefinity.Web.UI.Fields.Enums.RenderChoicesAs.RadioButtons;//you can render choices differently to suit yor purpose

protected override void CreateChildControls()

var librariesManager = LibrariesManager.GetManager();

var albums = librariesManager.GetAlbums();

foreach (Album alb in albums)

if (alb.Items.Count > 0)//list albums with images in them

ChoiceItem ci = new ChoiceItem();

ci.Text = alb.Title;

ci.Value = alb.Title;

this.Choices.Add(ci);

base.CreateChildControls();

protected override string LayoutTemplateName

get

return ChoiceFieldCustom.layoutTempalte;

public override IEnumerable<System.Web.UI.ScriptDescriptor> GetScriptDescriptors()

var descriptors = base.GetScriptDescriptors();

var descriptor = (ScriptControlDescriptor)descriptors.Last();

descriptor.Type = typeof(ChoiceField).FullName;

return descriptors;

private const string layoutTempalte = "~/Samples/SitefinityWebApp.Choice.AlbumSelectorField.ascx";//set the virtual path to choice field template

The template file which represents the choice field that is used to select albums.

<%@ Control Language="C#" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>

<sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">

<Templates>

<sf:ConditionalTemplate ID="ConditionalTemplate1" Left="DisplayMode" Operator="Equal" Right="Read" runat="server">

<sf:SitefinityLabel id="titleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfTxtLbl" />

<sf:SitefinityLabel id="read" runat="server" WrapperTagName="div" HideIfNoText="false" />

</sf:ConditionalTemplate>

<sf:ConditionalTemplate ID="ConditionalTemplate2" Left="RenderChoicesAs" Operator="Equal" Right="CheckBoxes" runat="server">

<sf:SitefinityLabel id="titleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfTxtLbl" />

<asp:CheckBoxList ID="checkBoxes" runat="server" RepeatLayout="Flow" CssClass="sfCheckListBox sfFieldWrp"></asp:CheckBoxList>

</sf:ConditionalTemplate>

<sf:ConditionalTemplate ID="ConditionalTemplate3" Left="RenderChoicesAs" Operator="Equal" Right="DropDown" runat="server">

<asp:Label ID="titleLabel" runat="server" CssClass="sfTxtLbl" AssociatedControlID="dropDown"></asp:Label>

<span class="sfDropdownList sfFieldWrp"><asp:DropDownList ID="dropDown" runat="server"></asp:DropDownList></span>

</sf:ConditionalTemplate>

<sf:ConditionalTemplate ID="ConditionalTemplate4" Left="RenderChoicesAs" Operator="Equal" Right="ListBox" runat="server">

<asp:Label ID="titleLabel" runat="server" CssClass="sfTxtLbl" AssociatedControlID="listBox"></asp:Label>

<asp:ListBox ID="listBox" runat="server"></asp:ListBox>

</sf:ConditionalTemplate>

<sf:ConditionalTemplate ID="ConditionalTemplate5" Left="RenderChoicesAs" Operator="Equal" Right="RadioButtons" runat="server">

<sf:SitefinityLabel id="titleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfTxtLbl" />

<asp:RadioButtonList ID="radioButtons" runat="server"

RepeatLayout="Flow"

RepeatDirection="Vertical"

CssClass="sfRadioList sfFieldWrp">

</asp:RadioButtonList>

</sf:ConditionalTemplate>

<sf:ConditionalTemplate ID="ConditionalTemplate6" Left="RenderChoicesAs" Operator="Equal" Right="HorizontalRadioButtons" runat="server">

<sf:SitefinityLabel id="titleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfTxtLbl" />

<asp:RadioButtonList ID="radioButtons" runat="server"

RepeatLayout="Flow"

RepeatDirection="Horizontal"

CssClass="sfRadioList sfFieldWrp">

</asp:RadioButtonList>

</sf:ConditionalTemplate>

<sf:ConditionalTemplate ID="ConditionalTemplate7" Left="RenderChoicesAs" Operator="Equal" Right="SingleCheckBox" runat="server">

<sf:SitefinityLabel id="titleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfTxtLbl" />

<asp:CheckBox ID="singleCheckBox" runat="server" />

</sf:ConditionalTemplate>

</Templates>

</sf:ConditionalTemplateContainer>

<sf:SitefinityLabel id="descriptionLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfDescription" />

<sf:SitefinityLabel id="exampleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfExample" />

Register the virtual path ~/Samples which is added in the code file. Go to Administration->Settings->Advanced->VirtualPathSettings->VirtualPaths and create new virtual path
VirtualPath: ~/Samples/*
ResourceLocation: Name of your assembly
ResolverName: EmbeddedResourceResolver

Set build action of the template to Embedded resource, build your solution and with the virtual path registered you should have the album selector when editing blog posts. To add the custom field in other dialogs like create post preview and so on go and add the field Administration->Settings->Advanced->Blogs->Controls->PostsBackend->Views-> and complete the already mentioned steps for BlogsBackendInsertPost, BlogsBackendPreviewPost ... .

To display the images in blog posts create a custom widget template. I have copied the template for full blog posts and create a user control with it.
Here is the code.

<%@ Control Language="C#" %>

<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>

<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Comments" Assembly="Telerik.Sitefinity" %>

<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>

<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<%@ Import Namespace="Telerik.Sitefinity" %>

<telerik:RadListView ID="Repeater" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">

<LayoutTemplate>

<sf:ContentBrowseAndEditToolbar ID="MainBrowseAndEditToolbar" runat="server" Mode="Add"></sf:ContentBrowseAndEditToolbar>

<ul class="sfpostsList sfpostListTitleDateContent">

<asp:PlaceHolder ID="ItemsContainer" runat="server" />

</ul>

</LayoutTemplate>

<ItemTemplate>

<li class="sfpostListItem">

<h2 class="sfpostTitle">

<sf:DetailsViewHyperLink ID="DetailsViewHyperLink1" TextDataField="Title" ToolTipDataField="Description" runat="server" />

</h2>

<div class="sfpostAuthorAndDate">

<asp:Literal ID="Literal2" Text="<%$ Resources:Labels, By %>" runat="server" />

<sf:PersonProfileView ID="PersonProfileView1" runat="server" />

<sf:FieldListView ID="PostDate" runat="server" Format=" | PublicationDate.ToLocal():MMM dd, yyyy" />

</div>

<sf:FieldListView ID="PostContent" runat="server" Text="0" Properties="Content" WrapperTagName="div" WrapperTagCssClass="sfpostContent" />

<asp:ImageButton ID="ImageButton1" runat="server" />

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

<asp:Literal runat="server" ID="something" Text="Literal TEXT"></asp:Literal>

<sf:CommentsBox ID="itemCommentsLink" runat="server" CssClass="sfpostCommentsCount"/>

<%--

<div class="sfpostCategoriesAndTagsWrp">

<sitefinity:HierarchicalTaxonField ID="HierarchicalFieldControl" DisplayMode="Read" BindOnServer="true" runat="server" TaxonomyId="E5CD6D69-1543-427b-AD62-688A99F5E7D4" WebServiceUrl="~/Sitefinity/Services/Taxonomies/HierarchicalTaxon.svc" Expanded="false" TaxonomyMetafieldName="Category" Title="Categories" ResourceClassId="TaxonomyResources" HideWhenNoTaxaFound="true" CssClass="sfpostCategoriesWrp" />

<sitefinity:FlatTaxonField ID="FlatFieldControl" DisplayMode="Read" BindOnServer="true" runat="server" TaxonomyId="CB0F3A19-A211-48a7-88EC-77495C0F5374" WebServiceUrl="~/Sitefinity/Services/Taxonomies/FlatTaxon.svc" Expanded="false" TaxonomyMetafieldName="Tags" Title="Tags" ResourceClassId="TaxonomyResources" HideWhenNoTaxaFound="true" CssClass="sfpostTagsWrp" />

</div>

--%>

<sf:ContentBrowseAndEditToolbar ID="BrowseAndEditToolbar" runat="server" Mode="Edit,Delete,Unpublish"></sf:ContentBrowseAndEditToolbar>

</li>

</ItemTemplate>

</telerik:RadListView>

<sf:Pager id="pager" runat="server"></sf:Pager>

Set build action to this template to Embedded Resource and create the logic in a code file that will take the album you selected in the custom field and add it to this template.
Here is a sample code I am currently working on.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Telerik.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Sitefinity.Libraries.Model;

using Telerik.Sitefinity.Modules.Libraries;

using Telerik.Sitefinity.Blogs.Model;

using Telerik.Sitefinity.Model;

namespace SitefinityWebApp.MasterView

public class Test : Telerik.Sitefinity.Modules.Blogs.Web.UI.Public.MasterPostsView

protected override void InitializeListView(IQueryable<Telerik.Sitefinity.Blogs.Model.BlogPost> query, int? totalCount)

base.InitializeListView(query, totalCount);

this.PostList.ItemDataBound += new EventHandler<RadListViewItemEventArgs>(PostList_ItemDataBound);

this.PostList.PreRender += new EventHandler(PostList_PreRender);

void PostList_PreRender(object sender, EventArgs e)

//throw new NotImplementedException();

void PostList_ItemDataBound(object sender, RadListViewItemEventArgs e)

if (e.Item is RadListViewDataItem)

//RadListViewDataItem item = e.Item as RadListViewDataItem;

//Telerik.Sitefinity.Blogs.Model.BlogPost post = item.DataItem as Telerik.Sitefinity.Blogs.Model.BlogPost;

var rep = e.Item.FindControl("ImageButton1") as Repeater;

if (rep != null)

var d = ((Telerik.Web.UI.RadListViewDataItem)(e.Item)).DataItem as BlogPost;

var f = d.GetValue("AlbumSelect").ToString();

if (!String.IsNullOrEmpty(f))

var l = ResolveLibrary(f);

if (l != null && l.Items.Count > 0)

ImageButton img = e.Item.FindControl("ImageButton1") as ImageButton;

//img.ImageUrl =

ResolveImages(l.Id);

public Album FindAlbumById(Guid albumId)

LibrariesManager libManager = LibrariesManager.GetManager();

Album albumToLocate = libManager.GetAlbum(albumId);

return albumToLocate;

public Library ResolveLibrary(string albumName)

var manager = LibrariesManager.GetManager();

var alb = manager.GetAlbums().Where(a => a.Title == albumName).SingleOrDefault();

if (alb != null)

return alb;

return null;

public IQueryable<Telerik.Sitefinity.Libraries.Model.Image> ResolveImages(Guid albumID)

var manager = LibrariesManager.GetManager();

var items = manager.GetImages().Where(img => img.Parent.Id == albumID);

if (items.Count() > 0)

return items;

return null;

public LibrariesManager manager

get

return LibrariesManager.GetManager();

protected override string LayoutTemplateName

get

return null;

public override string LayoutTemplatePath

get

return Test.layoutTemplate;

protected virtual RadListView TemplateListView

get

return this.Container.GetControl<RadListView>("Repeater", true);

private const string layoutTemplate = "~/VppPrefix/SitefinityWebApp.MasterView.BlogPostFrontendWithImages.ascx";

Notice the virtual path I add for Blogs widget template that will be displayed. register the path following steps I mentioned above. The class inherits from MasterPostsView ( this is the view Sitefinity uses to display master blogs details, there is also DetailsPostsView).
To apply this custom template to your blogs widget go to Administration->Settings->Advanced->Blogs->Controls->BlogPostsFrontend->Views->MasterBlogPostsFrontend and in field ViewType enter Namespace.class of your custom template.

Regards,
Stanislav Velikov
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

Posted by Community Admin on 26-Sep-2011 00:00

Hi,
When I tried this sample code
<%@ Control Language="C#" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>

<sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
    <Templates>
        <sf:ConditionalTemplate ID="ConditionalTemplate1" Left="DisplayMode" Operator="Equal" Right="Read" runat="server">
            <sf:SitefinityLabel id="titleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfTxtLbl" />
            <sf:SitefinityLabel id="read" runat="server" WrapperTagName="div" HideIfNoText="false" />
        </sf:ConditionalTemplate>
        <sf:ConditionalTemplate ID="ConditionalTemplate2" Left="RenderChoicesAs" Operator="Equal" Right="CheckBoxes" runat="server">
            <sf:SitefinityLabel id="titleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfTxtLbl" />

I got some error because id titleLabel is already used before, and why in this code there are so many duplicate ID?
can you give me working example please

Posted by Community Admin on 28-Sep-2011 00:00

Hello Aldo,

I have attached the necessary files. The dupliacted ID`s are not an issue because the template build action is set to embedded resource and a code file loads it in the backend with virtual path. Also add the embedded javascript in AssemblyInfo.cs

[assembly: WebResource("SitefinityWebApp.Dialog.EditorContentManagerDialog.ascx.js", "application/x-javascript")]

Regards,
Stanislav Velikov
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

Posted by Community Admin on 26-Oct-2011 00:00

I have the same issue. I am entering blog posts and I would like to point to an image gallery. I do not understand your solution above. Is there an alternative to pointing to an image gallery rather than changing all the code in the backend? It seems too complicated to me.

Posted by Community Admin on 31-Oct-2011 00:00

Hi Jill,

Alternatives to the above implementation is to add the image between the blog`s text to add new custom field of type "long text" where you can select the images you like from image gallery and add the custom field to the blog`s widget template. It does the same thing, but you will need to add the custom field to the blog`s widget. To do this go edit the template for the blog post and in the right you will see all filds that can be added. Click to add your custom field (you specify its name when creating it).

All the best,
Stanislav Velikov
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

Posted by Community Admin on 21-Sep-2012 00:00

These solutions do not work. Image gallery appear as a rich text editor instead of radio buttons. any other ideas ?

Posted by Community Admin on 21-Sep-2012 00:00

These solutions do not work. Image gallery appear as a rich text editor instead of radio buttons. any other ideas ?

This thread is closed

All Replies