+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Can i wrap hyperlink around picture?

Can i wrap hyperlink around picture?

12 posts, 1 answered
  1. Waseem
    Waseem avatar
    24 posts
    Registered:
    31 Jul 2012
    20 Apr 2012
    Link to this post
    Hi,
    I have employee custom module. In this module i am displaying employee information including employee picture. Everything is working fine and now as per requirements I have to change that image to "Hyper Link" and on click I have to display a dialog where i have to validate email address so that picture will be allowed to download.

    Could please anyone help me how to make employee image a hyperlink and also how to navigate it to the dialog box?

    Will appreciate any help.
    Kind Regards,
    Waseem
  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    20 Apr 2012
    Link to this post
    You could do that with jQuery perhaps?

    $(document).ready(function(){
      $("#yourrootdiv img").wrap("<a class='openelement' href='#' />") ; //Wrap the images in an anchor
      
      $(".openelement").click(function(e){
           //Code to Open your dialog goes here
          e.preventDefault();
       });
    });
  3. Waseem
    Waseem avatar
    24 posts
    Registered:
    31 Jul 2012
    20 Apr 2012
    Link to this post
    Hi Steve,
    I have picture coming from DB in Sitefinity AssetsField and also i have converted the list template into my own SfCtrlPresentation User Control so in this way wouldn't i be pretty much helpless in using out of box options? Really appreciate your help. Thanks!
    Could you please help me, following is the code snippet

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="OpenAccessDataProvider,a4a794260c0b4440b466f75d11146db8.ascx.cs" Inherits="SitefinityWebApp.SfCtrlPresentation.OpenAccessDataProvider_a4a794260c0b4440b466f75d11146db8" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Comments" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Fields" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

    <telerik:RadListView ID="dynamicContentListView" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
        <LayoutTemplate>
            <ul class="sfitemsList sfitemsListTitleDateTmb">
                <asp:PlaceHolder ID="ItemsContainer" runat="server" />
            </ul>
        </LayoutTemplate>
        <ItemTemplate>
          <li class="sfitem sfClearfix">
                <h2 class="sfitemTitle">
                    <sf:DetailsViewHyperLink ID="DetailsViewHyperLink" TextDataField="Title" runat="server" />
                </h2>
               <sf:AssetsField ID="AssetsField1" runat="server" DataFieldName="Picture"/>
     <sf:SitefinityLabel ID="SitefinityLabel1" runat="server" Text='<%# Eval("Designation")%>'  WrapperTagName="div" HideIfNoText="true" CssClass="sfitemShortTxt" />            
              <sf:SitefinityLabel ID="SitefinityLabel2" runat="server" Text='<%# Eval("CompanyName")%>' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemShortTxt" />
              <sf:AssetsField ID="AssetsField2" runat="server" DataFieldName="Documents"/>
          </li>
        </ItemTemplate>
    </telerik:RadListView>
    <sf:Pager id="pager" runat="server"></sf:Pager>

  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    20 Apr 2012
    Link to this post
    Great thanks, can you give me the rendered markup for one list item?
  5. Waseem
    Waseem avatar
    24 posts
    Registered:
    31 Jul 2012
    20 Apr 2012
    Link to this post
    Steve, I am very much new to Sitefinity and JQuery. Could you please advice me how to get the rendered markup?
  6. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    20 Apr 2012
    Link to this post
    Just right-click on your browser and go to view source, then find a single <li class="sfitem node and paste it in if you could :)
  7. Waseem
    Waseem avatar
    24 posts
    Registered:
    31 Jul 2012
    20 Apr 2012
    Link to this post
    here is the rendered list, Thanks!
     
          <li class="sfitem sfClearfix">
                <h2 class="sfitemTitle">
                    <a id="ctl20_ctl00_ctl00_dynamicContentListView_ctrl0_DetailsViewHyperLink" href="home/~/UserControls/ValidateEmail">Some Name</a>
                </h2>
              
              <div id="ctl20_ctl00_ctl00_dynamicContentListView_ctrl0_AssetsField1">

    <div class="sfimageWrp">
    <img id="ctl20_ctl00_ctl00_dynamicContentListView_ctrl0_AssetsField1_ctl00_ctl00_imageControl_ctl00_ctl00_imageItem" src="/images/employee-pictures/lighthouse.jpg?sfvrsn=0" alt="" />

    <div id="ctl20_ctl00_ctl00_dynamicContentListView_ctrl0_AssetsField1_ctl00_ctl00_imageControl_ctl00_ctl00_browseAndEditToolbar" style="display:none;">

    </div>
    </div>
    </div>

     <div id="ctl20_ctl00_ctl00_dynamicContentListView_ctrl0_SitefinityLabel1" class="sfitemShortTxt">
    Software Developer
    </div>            
              <div id="ctl20_ctl00_ctl00_dynamicContentListView_ctrl0_SitefinityLabel2" class="sfitemShortTxt">
    Light Speed IT Solutions
    </div>
              <div id="ctl20_ctl00_ctl00_dynamicContentListView_ctrl0_AssetsField2">

    <div class="sfdownloadFileWrp">
    <a id="ctl20_ctl00_ctl00_dynamicContentListView_ctrl0_AssetsField2_ctl00_ctl00_documentLink_ctl00_ctl00_documentLink" class="sftxt" href="/docs/default-document-library/radpdfroleproperties.txt?sfvrsn=0" target="_blank">RADPDFROLEPROPERTIES</a>
    <div id="ctl20_ctl00_ctl00_dynamicContentListView_ctrl0_AssetsField2_ctl00_ctl00_documentLink_ctl00_ctl00_browseAndEditToolbar" style="display:none;">
    </div>
    </div>
    </div>
              <a href="/home/email-verification">Download File</a>
              <a href="Documents">Test  Link</a>
          </li>

  8. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    20 Apr 2012
    Link to this post
    Try this template, then click on a picture

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="OpenAccessDataProvider,a4a794260c0b4440b466f75d11146db8.ascx.cs" Inherits="SitefinityWebApp.SfCtrlPresentation.OpenAccessDataProvider_a4a794260c0b4440b466f75d11146db8" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Comments" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Fields" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <telerik:RadListView ID="dynamicContentListView" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
        <LayoutTemplate>
            <ul class="sfitemsList sfitemsListTitleDateTmb employeeList">
                <asp:PlaceHolder ID="ItemsContainer" runat="server" />
            </ul>
        </LayoutTemplate>
        <ItemTemplate>
          <li class="sfitem sfClearfix">
                <h2 class="sfitemTitle">
                    <sf:DetailsViewHyperLink ID="DetailsViewHyperLink" TextDataField="Title" runat="server" />
                </h2>
               <sf:AssetsField ID="AssetsField1" runat="server" DataFieldName="Picture"/>
               <sf:SitefinityLabel ID="SitefinityLabel1" runat="server" Text='<%# Eval("Designation")%>'  WrapperTagName="div" HideIfNoText="true" CssClass="sfitemShortTxt" />           
              <sf:SitefinityLabel ID="SitefinityLabel2" runat="server" Text='<%# Eval("CompanyName")%>' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemShortTxt" />
              <sf:AssetsField ID="AssetsField2" runat="server" DataFieldName="Documents"/>
          </li>
        </ItemTemplate>
    </telerik:RadListView>
    <sf:Pager id="pager" runat="server"></sf:Pager>
     
    <script type="text/javascript">
        $(document).ready(function () {
            $(".employeeList .sfimageWrp img").click(function () {
                alert("HEY THERE " + $(this).attr("src")); //This can be removed
                //Remove the alert and add in the code to open your dialog somehow
            });
        });
    </script>
    Answered
  9. Waseem
    Waseem avatar
    24 posts
    Registered:
    31 Jul 2012
    20 Apr 2012
    Link to this post
    Steve Thank you very much for your help. It is working now. just looked for the list name and replaced it with .employeeList and its working absolutely fine now. :)
    Thanks once again!
  10. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    20 Apr 2012
    Link to this post
    ..perhaps jQuery isnt loaded, try this

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="OpenAccessDataProvider,a4a794260c0b4440b466f75d11146db8.ascx.cs" Inherits="SitefinityWebApp.SfCtrlPresentation.OpenAccessDataProvider_a4a794260c0b4440b466f75d11146db8" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Comments" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Fields" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <sf:ResourceLinks runat="server" UseEmbeddedThemes="true" Theme="Basic">
        <sf:ResourceFile JavaScriptLibrary="JQuery"/>
    </sf:ResourceLinks>
     
    <telerik:RadListView ID="dynamicContentListView" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
        <LayoutTemplate>
            <ul class="sfitemsList sfitemsListTitleDateTmb employeeList">
                <asp:PlaceHolder ID="ItemsContainer" runat="server" />
            </ul>
        </LayoutTemplate>
        <ItemTemplate>
          <li class="sfitem sfClearfix">
                <h2 class="sfitemTitle">
                    <sf:DetailsViewHyperLink ID="DetailsViewHyperLink" TextDataField="Title" runat="server" />
                </h2>
               <sf:AssetsField ID="AssetsField1" runat="server" DataFieldName="Picture"/>
               <sf:SitefinityLabel ID="SitefinityLabel1" runat="server" Text='<%# Eval("Designation")%>'  WrapperTagName="div" HideIfNoText="true" CssClass="sfitemShortTxt" />           
              <sf:SitefinityLabel ID="SitefinityLabel2" runat="server" Text='<%# Eval("CompanyName")%>' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemShortTxt" />
              <sf:AssetsField ID="AssetsField2" runat="server" DataFieldName="Documents"/>
          </li>
        </ItemTemplate>
    </telerik:RadListView>
    <sf:Pager id="pager" runat="server"></sf:Pager>
     
    <script type="text/javascript">
        $(document).ready(function () {
            $(".employeeList .sfimageWrp img").click(function () {
                alert("HEY THERE " + $(this).attr("src")); //This can be removed
                //Remove the alert and add in the code to open your dialog somehow
            });
        });
    </script>
  11. Bishoy
    Bishoy avatar
    27 posts
    Registered:
    15 Aug 2013
    19 Jun 2015
    Link to this post

    I had to disable its own link and wrap internal div  into my link 

     

    <sf:DetailsViewHyperLink runat="server" Enabled="false">
                    <a href="/news-and-events/all-news/news-details?id=<%# Eval("Id")%>">

     

    <sf:DetailsViewHyperLink runat="server" Enabled="false">
        <a href="/news-and-events/all-news/news-details?id=<%# Eval("Id")%>">
            <div class="news-image">
              <img src='<%# Eval("Image.MediaUrl")%>' alt='<%# Eval("Image.AlternativeText")%>' title='<%# Eval("Image.Title") %>' style="width:222px; height:171px;" />
            </div>
            <div class="news-content">
           
              <sf:FieldListView ID="Title" runat="server" Text="{0}" Properties="Title" WrapperTagName="h3" EditableFieldType="ShortText" />
              <p class="date"><sf:FieldListView ID="PublicationDate" runat="server" Format="{PublicationDate.ToLocal():dd MMM yyyy}" /></p>
            </div>
        </a>
    </sf:DetailsViewHyperLink>
               

  12. Nicholas
    Nicholas avatar
    1 posts
    Registered:
    11 Apr 2014
    08 Sep 2015
    Link to this post

    You don't need to wrap the <a> with <sf:DetailsViewHyperLink runat="server" Enabled="false">.

     

    This is how I did it:

    <a href="/<%# Eval("FilePath")%>" target="_blank">
        <span class="download-name"><%# Eval("Title")%></span>
    </a>

12 posts, 1 answered