How to Filter Image Gallery on Custom Classification?

Posted by Community Admin on 15-Jan-2015 00:00

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:BrowseAndEditToolbar>

<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">

<layouttemplate>

<ul class="sfimagesTmbList">

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

</ul>

</layouttemplate>

<itemtemplate>

<li class="sfimagesTmb">

<sf:SitefinityHyperLink runat="server" id="singleItemLink" />

</li>

</itemtemplate>

</telerik:RadListView>

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

</sf:Pager>

<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);

base.CreateChildControls();

public partial class DealerNetImage : MasterThumbnailSimpleView

private string layoutTemplatePath = "~/UserControls/Extranet/DealerNetImagesTemplate.ascx";

public override string LayoutTemplatePath

get

return this.layoutTemplatePath;

set

base.LayoutTemplatePath = value;

public virtual DropDownList ProductColor

get

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.DataBind();

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.

Posted by Community Admin on 05-Feb-2015 00:00

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

Regards,
Sabrie Nedzhip
Telerik

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

This thread is closed

All Replies