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

Forums / General Discussions / Image Gallery inside blog posts?

Image Gallery inside blog posts?

10 posts, 0 answered
  1. Brad
    Brad avatar
    28 posts
    Registered:
    20 Sep 2010
    29 Jul 2011
    Link to this post
    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!
  2. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    05 Dec 2016
    03 Aug 2011
    Link to this post
    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
  3. Brad
    Brad avatar
    28 posts
    Registered:
    20 Sep 2010
    04 Aug 2011
    Link to this post
    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
  4. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    05 Dec 2016
    09 Aug 2011
    Link to this post
    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
  5. aldo
    aldo avatar
    3 posts
    Registered:
    02 Sep 2010
    26 Sep 2011
    Link to this post
    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
  6. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    05 Dec 2016
    28 Sep 2011
    Link to this post
    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
  7. Jill Wilk
    Jill Wilk avatar
    1 posts
    Registered:
    09 Jun 2010
    26 Oct 2011
    Link to this post
    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.
  8. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    05 Dec 2016
    31 Oct 2011
    Link to this post
    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
  9. Umar
    Umar avatar
    2 posts
    Registered:
    23 Jul 2012
    21 Sep 2012
    Link to this post
    These solutions do not work.   Image gallery appear as a rich text editor instead of radio buttons. any other ideas ?
  10. Umar
    Umar avatar
    2 posts
    Registered:
    23 Jul 2012
    21 Sep 2012
    Link to this post
    These solutions do not work.   Image gallery appear as a rich text editor instead of radio buttons. any other ideas ?
10 posts, 0 answered