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

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

Posted on October 29, 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.

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... :(
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