Image selector for content items: Add field markup

In Visual Studio:

1. Open the context menu of your project and navigate to Add » New Item…
2. Under C#, choose Web and then select Web User Control.
3. Copy the following markup and paste it to the markup of your field:
   <div id="control-wrapper">

       <div id="albumWrapper">

           <h4>Filter by album:</h4>

           <ul id="albumList" runat="server">

           </ul>

       </div>

     

       <div id="imagesWrapper">

           <ul id="imageList" runat="server">

           </ul>

       </div>

   </div>

   <sitefinity:GenericCollectionBinder ID="imageListBinder"runat="server"

           TargetId="imageList"

           ServiceUrl="~/Sitefinity/Services/Content/ImageService.svc/"

           BindOnLoad="false"

           DataKeyNames="Id"

           DataMembers="Id, Title, ThumbnailUrl">

           <Containers>

               <sitefinity:BinderContainerID="imageTitleContainer" runat="server" RenderContainer="true"ContainerTag="li">

                       <a href="javascript:void(0);"class="sf_binderCommand_selectImage">

                           <img id="itemThumb" sys:src="{{MediaUrl}}" />

                       </a>

                       <div class="tmb-title">{{Title}}</div>

                       <div class="tmb-desc">{{Description}}</div>

               </sitefinity:BinderContainer>

           </Containers>

   </sitefinity:GenericCollectionBinder>

             

   <sitefinity:GenericCollectionBinder ID="albumBinder"runat="server"

           TargetId="albumList"

           ServiceUrl="~/Sitefinity/Services/Content/AlbumService.svc/"

           BindOnLoad="false"

           DataKeyNames="Id"

           DataMembers="Id, Title">

           <Containers>

               <sitefinity:BinderContainerID="albumTitleContainer" runat="server" RenderContainer="false">

                   <li>

                       <a href="javascript:void(0);"class="sf_binderCommand_selectAlbum">

                           {{Title}}

                       </a>

                   </li>

               </sitefinity:BinderContainer>

           </Containers>

   </sitefinity:GenericCollectionBinder>

   In the code, there are two GenericCollectionBinder widgets - one for the images and one for the albums. In addition, there is one HTML server widget, representing an unordered list of images.

   The binders in the code are set to:

   • URL of the services that you are using
   • ID of the target widget displaying the result
   • Name of the data item property serving as a key
   • List of the properties you are using

The items that the services return are rendered according to the BinderContainer template. The parameters inside the curly brackets represent placeholders. The binder replaces them with the corresponding value of the specific properties.