+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

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

by Ivan Osmak
I've wrote a blog post few days ago on subject of associating ImageGallery with content item (such as news item). Apparently, I was in such a hurry that I didn't notice that single images could not be opened once the gallery displays.

Now, this comes from the fact that both NewsView control and Gallery are based on the ContentView control, hence the IDs passed by the url get mixed up... anyhow. A very quick and effective fix for this is to switch gallery to LightBox mode which will open the image on the client.



To get this working, just modify the ListPageDetailsMode.ascx file (for more details go to the original post) like following:

<%@ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Cms.Web.UI" TagPrefix="sf" %> 
<%@ Register Assembly="Telerik.Cms.Engine" Namespace="Telerik.Cms.Engine.WebControls" TagPrefix="sfWeb" %> 
<%@ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Web.UI.SpamProtection" TagPrefix="sfWeb" %> 
<%@ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Cms.Web.UI" TagPrefix="sfWeb" %> 
<%@ Register Assembly="Telerik.Libraries" Namespace="Telerik.Libraries.WebControls" TagPrefix="sfLib" %> 
<%@ Register Assembly="App_Code" Namespace="RandomSFCode.MetaMaster2008" TagPrefix="cc1" %> 
 
<cc1:MetaMaster ID="MetaMaster1" runat="server">    
    <Mappings>   
        <cc1:MetaMapping MetaKey="GalleryID" TargetControlId="ImageGallery" TargetProperty="FilterExpression" TargetPropertyStringFormat="ParentID = {0}" />   
    </Mappings>   
</cc1:MetaMaster>   
               
<sf:CssFileLink ID="CssFileLink1" FileName="~/Sitefinity/ControlTemplates/News/newsCommonLayout.css" 
    Media="screen" runat="server" /> 
<div class="sf_singleNews">  
    <asp:HyperLink ID="backToList1" Text="<%$Resources:AllNews %>" CssClass="sf_back" runat="server"></asp:HyperLink> 
    <h2 class="sf_NewsTitle">  
        <asp:Literal ID="Title" runat="server"></asp:Literal> 
    </h2> 
    <class="sf_newsDate">  
        <asp:Literal ID="Publication_Date" runat="server" Text="{0}" /> 
    </p> 
    <p> 
        <asp:Literal ID="Summary" runat="server"></asp:Literal> 
    </p> 
    <p> 
        <asp:Literal ID="content" runat="server"></asp:Literal> 
    </p> 
    <p> 
        <sfLib:ImageGallery id="ImageGallery" runat="server" GalleryTemplateMode="Lightbox"></sfLib:ImageGallery> 
    </p> 
    <class="sf_newsAuthor">  
        <asp:Literal ID="Author" runat="server"></asp:Literal> 
    </p> 
    <p> 
        <asp:Literal ID="Source" runat="server"></asp:Literal> 
    </p> 
    <class="sf_postCategory">  
        <asp:HyperLink ID="Category" runat="server" /> 
    </p> 
    <class="sf_postTags">  
        <asp:Repeater ID="Tags" runat="server">  
            <ItemTemplate> 
                <asp:HyperLink ID="tagLink" runat="server" /> 
            </ItemTemplate> 
        </asp:Repeater> 
    </p> 
    <class="sf_postBookmark">  
        <asp:Repeater ID="Bookmarks" runat="server">  
            <ItemTemplate> 
                <asp:HyperLink ID="BookmarkLink" runat="server">  
                    <asp:Image ID="BookmarkImage" runat="server" /> 
                </asp:HyperLink> 
            </ItemTemplate> 
        </asp:Repeater> 
    </p> 
    <div id="comments" class="sf_contentComments">  
        <sfweb:commentslist id="commentsList" runat="server" cssclass="sf_commentsList">  
        <Template> 
        <asp:Repeater ID="commentsRepeater" runat="Server">  
    <HeaderTemplate> 
        <asp:PlaceHolder runat="server" ID="headerHolder">  
            <h2 class="sf_commentsTitle">  
                <asp:Literal ID="Literal1" runat="server" Text="<%$Resources:Comments %>" /> 
                &nbsp;<asp:Literal ID="commentsCount" runat="server"></asp:Literal> 
            </h2> 
        </asp:PlaceHolder> 
        <ul class="sf_commentListing">  
    </HeaderTemplate> 
    <ItemTemplate> 
         <!-- comment goes here --> 
        <sfWeb:CommentItem Id="anonCommentContainer" runat="server" CssClass="sf_anonymousComment" >   
          
         <Template> 
           <class="sf_commentAuthor">  
                <strong> 
                    <asp:HyperLink ID="webSiteLink" runat="server" Visible="false" rel="nofollow"></asp:HyperLink> 
                    <asp:Literal runat="Server" ID="authorName"  Visible="false"></asp:Literal>   
                </strong> 
                <abbr class="date" id="commentDate" runat="server" > </abbr> 
            </p> 
            <asp:Label ID="text" runat="server"></asp:Label> 
        </Template> 
         
        </sfWeb:CommentItem> 
         
        <sfWeb:CommentItem Id="authorCommentContainer" runat="server"  CssClass="sf_authorComment">   
         <Template> 
             <class="sf_commentAuthor">  
                <strong> 
                    <asp:HyperLink ID="webSiteLink" runat="server" Visible="false" rel="nofollow"></asp:HyperLink> 
                    <asp:Literal runat="Server" ID="authorName"  Visible="false" ></asp:Literal>   
                </strong> 
                <abbr class="date" id="commentDate" runat="server"</abbr> 
                  
            </p> 
            <asp:Label ID="text" runat="server"></asp:Label> 
         </Template> 
          
       </sfWeb:CommentItem> 
    </ItemTemplate> 
    <FooterTemplate> 
        </ul> 
    </FooterTemplate> 
</asp:Repeater> 
<asp:PlaceHolder ID="moderationHolder" runat="server" Visible="false">  
    <class="sf_commentMessage">  
        <asp:Literal ID="Literal2" runat="server" Text="<%$Resources:CommentMessageModeration %>"></asp:Literal> 
    </p> 
</asp:PlaceHolder> 
    <fieldset class="sf_contentCommentForm">  
        <legend>Post a comment!</legend> 
        <ol> 
            <li> 
                <asp:Label ID="Label2" runat="Server" Text="<%$Resources:Name %>" AssociatedControlID="authorTxt"></asp:Label> 
                <asp:TextBox ID="authorTxt" runat="server" ValidationGroup="commentInfo" size="30"></asp:TextBox> 
                <asp:RequiredFieldValidator runat="server" ID="authorVal" ControlToValidate="authorTxt" 
                        ErrorMessage="<%$Resources:NameEmpty %>" Display="dynamic" ValidationGroup="commentInfo" 
                        CssClass="sf_commentsValidator"></asp:RequiredFieldValidator> 
 
            </li> 
            <li> 
                <asp:Label ID="Label3" runat="Server" Text="<%$Resources:Email %>" AssociatedControlID="emailTxt"></asp:Label> 
                <asp:TextBox ID="emailTxt" runat="server" ValidationGroup="commentInfo" size="30"></asp:TextBox> 
                <asp:RegularExpressionValidator runat="server" ID="emailVal" ControlToValidate="emailTxt" 
                        ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ErrorMessage="<%$Resources:InvalidEmail %>" 
                        Display="dynamic" ValidationGroup="commentInfo" CssClass="sf_commentsValidator"></asp:RegularExpressionValidator> 
            </li> 
            <li> 
                <asp:Label ID="Label4" runat="Server" Text="<%$Resources:WebSite %>" AssociatedControlID="webSiteTxt"></asp:Label> 
                <asp:TextBox ID="webSiteTxt" runat="server" size="30"></asp:TextBox> 
            </li> 
            <li class="texarea-wrapper">  
                <asp:Label ID="Label1" runat="Server" Text="<%$Resources:Comment %>" AssociatedControlID="commentTxt"></asp:Label> 
                <asp:TextBox ID="commentTxt" runat="server" TextMode="MultiLine" ValidationGroup="commentInfo" 
                                Rows="5" Columns="20"></asp:TextBox> 
                <asp:RequiredFieldValidator runat="server" ID="contentVal" ControlToValidate="commentTxt" 
                        ErrorMessage="<%$Resources:CommentEmpty %>" Display="dynamic" ValidationGroup="commentInfo" 
                        CssClass="sf_commentsValidator"></asp:RequiredFieldValidator> 
            </li> 
            <li> 
                      
            <sfweb:spamprotector id="SpamProtector1" runat="server" cssclass="commentsValidator hide" 
                validationgroup="commentInfo" enableautobotdiscovery="true" enablehiddentextboxstrategy="true" 
                hiddentextboxerrormessage="Hidden TextBox has some text in it!" hiddentextboxlabel="Do not fill this textbox!" 
                hiddentextboxlabelcssclass="hide" hiddentextboxinputcssclass="hide" enablemintimeoutstrategy="true" 
                mintimeout="2" mintimeouterrormessage="Submission too fast!" /> 
            <asp:Button ID="submitBtn" runat="server" Text="<%$Resources:PostThisComment %>" 
                ValidationGroup="commentInfo" CssClass="comment-submit" /> 
            </li> 
        </ol> 
    </fieldset> 
        </Template> 
    </sfweb:commentslist> 
    </div> 
</div> 
 

the only thing I've actually modified is to add GalleryTemplateMode on line 31:

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

And that'll do the trick.

ContentView designer series

I have promised to demonstrate today how to implement custom designer setting, unfortunately I will not be able to do so due to one unfortunately privately declared interface. Namely, we have made a small architectural mistake (which I have already fixed today) and we'll have to wait for the service pack with that sample.

The series will continue with other topics, such as presentation modes and custom designers. I am sorry... :(

6 comments

Leave a comment
  1. Seth Oct 29, 2008
    Hey Ivan, we'll forgive you. Maybe you can talk about how to pass a tag to the gallery or document library from a GC module instead :-) LOL
  2. Pierre Oct 29, 2008
    Ivan, thanks! .....more...more...more....
  3. MedicalWebGeek Oct 29, 2008
    Perfect!
  4. MedicalWebGeek Oct 29, 2008
    OK - I have one more request. To deal with the fact that there is no way to sort how my images are displayed in SF, I am having my photographers name the images using numerical numbers (01, 02, 03) and then title the photos using the Alt Text. With the standard image gallery control, I set the SortExpression to Name and the images display in the correct order. How can I do this using your solution above?
  5. MedicalWebGeek Oct 29, 2008
    Disregard - I added SortExpression="Name ASC" to the line of code above.
  6. MedicalWebGeek Oct 29, 2008
    I really like this concept and I have an idea to take it one step further. I think it would be cool to tie in the first image in the gallery as the thumbnail item on the Gallery List view. I tried finding where I could do this in the code, but none of my modifications worked correctly. I was thinking about doing something like the following: asp:Image ID="Thumbnail" ImageUrl='Libraries//01.tmb.ashx?width=150&height=150&decreaseOnly=true&proportional=true' runat="server" Any suggestions?

    Leave a comment