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

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

Posted on October 22, 2008 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

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
~/Sitefinity/Admin/News/ControlTemplates/ControlPanelEdit.ascx


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:

<li> 
<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>  
</asp:Label> 
<mycontrols:GalleryPicker ID=”GalleryID” runat=”server” /> 
</li> 
 

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:

~/Sitefinity/ControlTemplates/News/Modes/ListPageDetails.ascx

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:

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

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:

~/Sitefinity/ControlTemplates/News/Modes/ListPageDetails.ascx

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”>    
    <Mappings>   
        <cc1:MetaMapping MetaKey=”GalleryID” TargetControlId=”ImageGallery” TargetProperty=”FilterExpression” TargetPropertyStringFormat=”ParentID = {0}” />   
    </Mappings>   
</cc1:MetaMaster> 
 

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:

~/Sitefinity/ControlTemplates/News/Modes/ListPageDetails.ascx

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

Conclusion

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.

progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments

Comments are disabled in preview mode.
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation