Try Now
More in this section
Blogs RSS feed

How to associate Image Gallery with content item (e.g. news item)

by Ivan Osmak
Reading through the support tickets I’ve come across an interesting request. One of our clients wanted to know how to associate an image gallery with a content item. Now, some of you may have already seen the kb on how to associate content item with a file (http://www.sitefinity.com/support/knowledge-base/kb-article/b1154K-bakd-b1154T-cgh.aspx), but in this post we’ll take it a step further. We will associate a news item with an image gallery and display a gallery when user opens a news item.

NOTE: This example applies only to Sitefinity 3.5 or higher.



The basic idea

In this sample we will associate Image Gallery with a news item. The procedure is almost completely same for all Generic Content based modules (e.g. Blogs, Events…).

In order to associate an Image Gallery with a content item we will need to perform following tasks:

  • Add GalleryID metafield to the News module
  • Create a gallery picker control which will be used as control on the admin side for choosing which gallery to be associate with the particular news item
  • Modify the details template of the NewsView control and add ImageGallery control there
  • Modify the details template of the NewsView control and add MetaMaster2008 control there to map GalleryID meta field to the FilterExpression property of ImageGallery control (more about MetaMaster2008 you can find here: MetaMaster 2008 - finally released , note however that the version used in this example is enhanced with TargetPropertyFormatString property).

Take a look at Figure 1 for a high level overview of the tasks we will perform.


Figure 1 – the high level overview of implemented functionalities

Before we start go ahead and download all the files for this project. You can do so from here.

If you are not interested in how this all actually works, you can scroll to the bottom of the post and use Quick Installation Guide.


Add GalleryID metafield to the News module

Open web.config file and register a GalleryID metafield. This field will carry the ID of the gallery that we wish to associate with a particular News item. Locate the following section in web.config telerik/cmsEngine/metaFields and add following line to it:

<add key=”News.GalleryID” valueType=”ShortText” visible=”True” searchable=”False” sortable=”False” defaultValue=”” /> 


Create a gallery picker control and add it to admin templates of News module

Since we do not want to force our users to remember the Guid ID of the ImageGallery to associate with the news item, we will use a special control which is nothing more than a drop down list with some binding logic. We will create a control called GalleryPicker and bind all ImageGalleries to it.

Brief overview of how Sitefinity saves metafields

Control Panel of Generic Content based modules (such as news, blogs etc.) has templates ControlPanelInsert.ascx and ControlPanelEdit.ascx. These two templates define the layout of the control panel when in insert and edit mode respectively. When you wish to add a new metafield, in order for it to become usable, you will need to add controls in these two templates so that your users can work with this new metafield. The control that we are adding to these templates must have the same id as is the key of the metafield for which it will be used (so if our metafield is GalleryID, that means that the ID of our control used for editing that metafield must also be GalleryID). Another requirement is that the control implements ITextControl interface, which means that it will have Text property (e.g. TextBox implements this interface). This is needed because Sitefinity will save the value of that Text property as the value of the metafield.

The problem may arise when you want to use a control that does not natively implement ItextControl property, such as RadComboBox. The solution here is to create a wrapper user control which will implement ItextControl and map the mandated Text property to whatever it is that you want (e.g. SelectedValue of the RadComboBox).

You can find and examine the GalleryPicker control in the MyControls folder that came in the zip file you have downloaded. Download it from here if you haven’t already.

Once we have our GalleryPicker ready we need to add it to these two templates:

~/Sitefinity/Admin/News/ControlTemplates/ControlPanelInsert.ascx and

First we’ll need to register the control at the top of both templates, putting this line:

<%@ Register TagPrefix=”mycontrols” Src=”~/MyControls/GalleryPicker.ascx” TagName=”GalleryPicker” %> 

And then we’ll need to add actual control (for example right after the thumbnail control). The code that we will add will look like this:

<asp:Label ID=”Label99” AssociatedControlID=”GalleryID” runat=”server”>    <asp:Literal ID=”Literal24” runat=”server” Text=”Associated gallery”> </asp:Literal> 
<em id=”Em2” runat=”server”></em>  
<mycontrols:GalleryPicker ID=”GalleryID” runat=”server” /> 

You can examine how the templates should look in the project you have downloaded in the Sitefinity/Admin/ControlTemplates/News folder.

Modify the details template of the NewsView control to add the built-in ImageGallery control

Now that we have taken care of the admin side of our sample, we are left with the public side. The idea is to display the selected ImageGallery in the details mode of your NewsView control. To do so we’ll have to open following template:


At the top of the file, register the built in ImageGallery control by putting the following line:

<%@ Register Assembly=”Telerik.Libraries” Namespace=”Telerik.Libraries.WebControls” TagPrefix=”sfLib” %> 

Then add the control somewhere in the template, for example right after the content. The code that you will add will look like this:

   <sfLib:ImageGallery id=”ImageGallery” runat=”server”></sfLib:ImageGallery> 

Now, we have almost done, but are still missing one very important functionality. Namely the ImageGallery property will show images from all libraries. In versions prior to 3.5 you would typically set ParentIDs property, however, that property has been marked obsolete because it is rather rigid and inflexible. So, instead of setting the ParentIDs property we will set the value of the new FilterExpression property introduced on all ContentView based controls. We will set it to

ParentID = GalleryID

NOTE: we will actually need to replace GalleryID with the actual ID selected on the admin side.

Finally, the last step is to somehow map the value of GalleryID metafield to the FilterExpression property. Generally, this would be done by overriding the NewsView control – however there is a simple control (appropriately named MetaMaster2008) that can save you the pain of doing so and you can find it in this post. For this example, the control has been a bit enhanced with TargetPropertyFormatString property to allow us to build FilterExpression, not simply map the value to the property.

Modify the details template of the NewsView control to add MetaMaster2008 control and map the GalleryID metafield to FilterExpression of ImageGallery control

If you have closed the template we were working on in the previous paragraph, please open it again:


NOTE: Make sure you’ve copied the two classes from the App_Code folder that came with the project you’ve downloaded to the App_Code folder of your website.

First we have to register the control. We’ll do so by placing this line at the top of the template:

<%@ Register Assembly=”App_Code” Namespace=”RandomSFCode.MetaMaster2008” TagPrefix=”cc1” %> 

Now, add the meta master control to the template before any other control (careful! Order is important). The control will look like this:

<cc1:MetaMaster ID=”MetaMaster1” runat=”server”>    
        <cc1:MetaMapping MetaKey=”GalleryID” TargetControlId=”ImageGallery” TargetProperty=”FilterExpression” TargetPropertyStringFormat=”ParentID = {0}” />   

Basically, this control maps the value of GalleryID metafield to the FilterExpression property of the ImageGallery control (which is based on ContentView) and it does so by formatting the value of property to look like the string specified in the TargetPropertyStringFormat ( “{0}” will be replaced with the actual Guid GalleryID).

If you want to see how does the template looks after all the modifications you can open following file from the project you have downloaded:


And that’s it. Create few image libraries, create a news item, associate it with an image gallery and it should work.

Quick installation guide

  • Download the whole project from here.
  • Register the GalleryID meta field with news module. You can open the web.config file that came with the project and examine the telerik/cmsEngine/metaFields section to see how it looks like. You should add this line to telerik/cmsEngine/metaFields section:
    <add key=”News.GalleryID” valueType=”ShortText” visible=”True” searchable=”False” sortable=”False” defaultValue=”” /> 
  • Copy everything from the App_Code folder in the project you have downloaded to your App_Code folder
  • Copy MyControls folder from the project you have downloaded to the root of your website
  • Copy everything from the ~/Sitefinity/Admin/ControlTemplates/News folder from the project you have downloaded to the ~/Sitefinity/Admin/ControlTemplates/News folder of your website
  • Copy everything from the ~/Sitefinity/ControlTemplates/News/Modes folder from the project you have downloaded to the ~/Sitefinity/ControlTemplates/News/Modes folder of your website
  • Create several image galleries, go to the news module, create few news items and assign them galleries. Drag a news view control, set it to list and page mode, publish the page and test it


While this is a practical example, I believe there are several important concepts covered here that will help you to modify Sitefinity modules radically if you wish to do so. I hope you’ll find it useful and please leave a comment if you run into a problem, have a question or suggestion.


Leave a comment
  1. prakash Oct 23, 2008
  2. Romi Oct 24, 2008
    Fantastic Ivan, Thanks. Some litle help to expose the Gallery properties to be able to select the method to see images.
  3. MedicalWebGeek Oct 27, 2008
    Thanks again for this great tool. Here are my questions/concerns: 1) Rather than the image gallery opening up when I click on an image, it takes me back to the news summary page. 2) Not all of my news articles have image galleries, but now my standard news control is looking for the attached gallery. If I do not have a gallery associated to the news article, I get the following error: Object reference not set to an instance of an object. Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. Exception Details: System.NullReferenceException: Object reference not set to an instance of an object. Source Error: Line 101: { Line 102: IContent cnt = cntManager.GetContent(contentView.SelectedItemId); Line 103: string metaValue = cnt.GetMetaData(this.MetaKey).ToString(); Line 104: if(!String.IsNullOrEmpty(targetPropertyStringFormat)) Line 105: { Please advise.
  4. MedicalWebGeek Oct 27, 2008
    Disregard #2 - I had created the troubled news releases before adding your photo gallery selector - to fix the issue, I just went back and resaved the articles and left the associated gallery selected to "Select a gallery". Please let me know if you have a fix for #1
  5. Seth Oct 28, 2008
    Hi Ivan, this is great you must have been reading my mind as I was just thinking about this the other day when scoping a project. If you had a large number of content items, say you created a products generic content provider and you had 100 products, creating a library for every single one - would this be the best method? Or would you suggest a different way of associating a collection of images. Cheers.
  6. Ivan Oct 28, 2008
    @MedicalWebGeek, I am sorry I didn't test out this control all the way so that you are running into problems. I'll try to finish the implementation tomorrow or at least by the end of the week. Lots of things going on here... @Seth, yes creating a gallery for each item is an option, but I'll soon start to demonstrate how to use new FilterBuilderClass and FilterExpression. Now if you are wondering what this has to do with your question, here is the short answer: You'll be able to provide a meta field (let's say you call it LibrariesFilter) in your GC based module where you'll be able to enter something like: [Tag.Name = "PDC 2008"] and then pass this to the FilterBuilderClass which will parse it into Sitefinity API arguments and return you only images or documents tagged with "PDC 2008". Personally I think that tagging is a slightly better option than having 100 galleries. I still can't say exactly when will this make it to the blog, but I'll give my best.
  7. Ivan Oct 29, 2008
    Hi guys, here is the post with the fix for image gallery + news: http://blogs.sitefinity.com/Ivan/Post/08-10-29/how_to_associate_image_gallery_with_content_item_e_g_news_item_-_finishing_touches.aspx
  8. Seth Oct 29, 2008
    Hi Ivan, well I was going to suggest tags so that options sounds great exactly what I was looking for. Will wait expectedly for this post. I am very interested in this new filter expression that keeps getting talked about in 3.5. Is there any explaination about it anywhere? Cheers
  9. Richard Sep 09, 2013
    The links are broken now. Can you provide new links?

    Leave a comment