How to Associate an Image Library with Content

Introduction

Many Sitefinity users wish to associate a gallery of images, as opposed to one of them, with a piece of content. This article will walk you through associating an image gallery with a news item.

Instructions

To associate an image gallery with content, follow these steps:

1.   Open your project’s web.config
2.   Find this element: <metaFields>
3.   Add this code below the news meta fields:

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

4. In the ~/App_Data/Configuration folder of your project, create a file called Telerik.Sitefinity.Configuration.ControlsConfig.xml
5. To that file, add this code:

    <?xml version="1.0" encoding="utf-8"?>  
 <controlsConfig>  
     <viewMap>  
         <!--Provides user interface for editing a news item in the News module.-->  
         <viewSettings hostType="Telerik.News.WebControls.Admin.NewsItemEdit" layoutTemplatePath="~/Sitefinity/Admin/ControlTemplates/News/NewsItemEdit.ascx" />  
     <!--Provides user interface for adding new news items in the News module.-->  
     <viewSettings hostType="Telerik.News.WebControls.Admin.NewsItemNew" layoutTemplatePath="~/Sitefinity/Admin/ControlTemplates/News/NewsItemNew.ascx" />     
           
     </viewMap>  
 </controlsConfig>  
   
  

6.   Copy the files from the download attachment into the ~/Sitefinity/Admin/News directory and the .resx files in the ~/Sitefinity/Admin/News/App_LocalResources folder of your Sitefinity project
7.   Copy the files in the App_Code folder into the App_Code folder of your application
8.   Copy the MyControls folder into the root directory of your Sitefinity application
9.   Open the NewsItemEdit.ascx and the NewsItemNew.ascx files and add this code to register the Gallery Picker User Control and the meta master:

        <%@ Register Assembly="App_Code" Namespace="RandomSFCode.MetaMaster2008" TagPrefix="cc1" %>   
     <%@ Register TagPrefix="mycontrols" Src="~/MyControls/GalleryPicker.ascx" TagName="GalleryPicker" %>

10. Open both the NewsItemEdit.ascx and the NewsItemNew.ascx files and find this tag:

    <sfGCn:ContentMetaFields  
  

11. Beneath that tag, add the code for the gallery picker:

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

12.   Open your command prompt by going to Start > Run, if you’re using Windows XP. For Windows Vista or Windows Server 2008 users, type cmd in the search box. Then, right click on the command prompt and click Run as Administrator. Type in IISReset
13.   Login to your Sitefinity project and go to Modules > News
14.   Create a new news story and select an image gallery:

15.   In the download, copy ~/Sitefinity/ControlTemplates/News/ListPageDetails.ascx into the corresponding directory in your Sitefinity project
16.   In the download, copy ~/Sitefinity/ControlTemplates/News/App_LocalResources/ListPageDetails.ascx.resx into the corresponding directory in your Sitefinity project
17.    Copy the ~/MyControls directory from the download into the root directory of your project
18.   In your project, open this file: ~/Sitefinity/ControlTemplates/News/ListPageDetails.ascx
19.   Add this code to register the Image Gallery Control on ListPageDetails:

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

20. Add this code to add the control:

    <p>  
     <sfLib:ImageGallery id="ImageGallery" runat="server" GalleryTemplateMode="Lightbox" ItemsPerPage="1" ></sfLib:ImageGallery>   
     </p>  
   
  

* Please note that only the default image gallery view will be displayed. Here, you will click on an image and download it. We are currently working on a fix for this technical issue.

21. Register the slLib tag prefix:

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

22: To the control, add this code:

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

23.   Create a new page in Sitefinity
24.   Drag and drop a news view control
25.   Click edit on the control
26.   Click on the advanced tab
27.   Under the appearance tab, map the location of ListPageDetails.ascx in the SingleItemTemplatePath as shown below:

28.   Click I’m Done
29.   Repeat steps 23 – 25 to ensure that the SingleItemTemplatePath has persisted
30.   Publish the page

Visit that news story and you’ll notice a specific gallery and your news story are displayed:

For more information about meta master and associating content with images, please read the Sitefinity 3.5 version of these instructions.