More in this section

Forums / General Discussions / How to Filter Image Gallery on Custom Classification?

How to Filter Image Gallery on Custom Classification?

2 posts, 0 answered
  1. Chris
    Chris avatar
    11 posts
    16 Sep 2014
    15 Jan 2015
    Link to this post

    Hi all,

     I'm trying to add a filter to the image gallery control so that users can narrow the images down based on a custom classification that populates the dropdown list. I know there is FilterExpression, and I tried using that to adjust the filter, but it looks like FilterExpression gets applied before the postback data makes it to the server. Is there a way I can delay the execution of the FilterExpression, or is there an alternative way within Sitefinity's code that will allow me to filter the images based on a custom classification?

    The template I'm using is basically the same as Sitefinity's default for the Simple List View:


    <%@ Control Language="C#" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" 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 Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Comments.Web.UI.Frontend" TagPrefix="comments" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Import Namespace="Telerik.Sitefinity.Web.UI" %>
    <%@ Import Namespace="Telerik.Sitefinity.Modules.Comments" %>
    <sf:BrowseAndEditToolbar ID="browseAndEditToolbar" runat="server" Mode="Edit">
    <sf:SitefinityLabel id="title" runat="server" WrapperTagName="h2" HideIfNoText="true" HideIfNoTextMode="Server" CssClass="sfmediaFieldTitle" />
    <asp:DropDownList runat="server" ID="productColorDDL"></asp:DropDownList>
    <telerik:RadListView ID="ItemsList" ItemPlaceholderID="ItemsContainer" runat="server"
        EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
        <ul class="sfimagesTmbList">
          <asp:PlaceHolder ID="ItemsContainer" runat="server"/>
        <li class="sfimagesTmb"
          <sf:SitefinityHyperLink runat="server" id="singleItemLink" />
    <sf:Pager id="pager" runat="server">
    <asp:PlaceHolder ID="socialContainer" runat="server"></asp:PlaceHolder>

    And the code I have so far:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Sitefinity;
    using Telerik.Sitefinity.GenericContent.Model;
    using Telerik.Sitefinity.Modules.Libraries;
    using Telerik.Sitefinity.Modules.Libraries.Web.UI.Images;
    using Telerik.Sitefinity.Taxonomies;
    using Telerik.Sitefinity.Taxonomies.Model;
    using Telerik.Sitefinity.Web.UI;
    namespace SitefinityWebApp.UserControls.Extranet
        public class DealerNetImagesControl : ImagesView
            protected override void CreateChildControls()
                this.ControlDefinition.Views.Where(v => v.ViewName == this.MasterViewName).SingleOrDefault().ViewType = typeof(DealerNetImage);
        public partial class DealerNetImage : MasterThumbnailSimpleView
            private string layoutTemplatePath = "~/UserControls/Extranet/DealerNetImagesTemplate.ascx";
            public override string LayoutTemplatePath
                    return this.layoutTemplatePath;
                    base.LayoutTemplatePath = value;
            public virtual DropDownList ProductColor
                    return this.Container.GetControl<DropDownList>("productColorDDL", false);
            protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container, Telerik.Sitefinity.Web.UI.ContentUI.Contracts.IContentViewDefinition definition)
                var taxonomyManager = TaxonomyManager.GetManager();
                var productColorCategory = taxonomyManager.GetTaxonomies<FlatTaxonomy>().Where(t => t.Name == "product-colors").Single();
                var productColors = productColorCategory.Taxa;
                this.ProductColor.DataTextField = "Title";
                this.ProductColor.DataValueField = "Id";
                this.ProductColor.DataSource = productColors;
                this.ProductColor.Items.Insert(0, new ListItem("Choose color..."));
                this.ProductColor.AutoPostBack = true;
                base.InitializeControls(container, definition);

    Thanks in advance to anyone who can help me out. Even if it's just saying there's no way to do this within Sitefinity API.

  2. Sabrie Nedzhip
    Sabrie Nedzhip avatar
    534 posts
    17 Aug 2017
    05 Feb 2015
    Link to this post
    Hi Chris,

    Can you please try to use the built-in Categories widget or the Tags widget and configure the widgets to filter Images tagged with a particular tag. To do this please open the widget in edit mode and find the ContentType field and enter in the field: Telerik.Sitefinity.Libraries.Model.Image.

    Then please drag the Image gallery widget on this page. Publish the page and run it in browser. On the frontend when you click on a classification the Image gallery widget will be filtered and will display only images which are tagged with the selected classification.

    I am sending attached a short video demonstrating the steps on my side to filter the images in the Image gallery widget by categories.

    You may also refer to the following documentation articles for more details about the classifications widgets:

    Tags widget
    Categories Widget

    Sabrie Nedzhip
    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 Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
2 posts, 0 answered