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

Forums / Developing with Sitefinity / Make image a link

Make image a link

12 posts, 1 answered
  1. Boulevard
    Boulevard avatar
    8 posts
    Registered:
    08 Jul 2013
    27 Dec 2013
    Link to this post
    I have the text that appears below the ProductShot as a link, but how do I make the image a link in this template?
     
        <ItemTemplate>
            <li class="brand"  data-sf-provider='<%# Eval("Provider.Name")%>' data-sf-id='<%# Eval("Id")%>' data-sf-type="Telerik.Sitefinity.DynamicModules.Model.DynamicContent">
                <sf:ImageAssetsField runat="server" DataFieldName="ProductShot" IsThumbnail="True" />
                <h6 class="brand">
                    <sf:DetailsViewHyperLink ID="DetailsViewHyperLink" TextDataField="BrandName" runat="server" data-sf-field="BrandName" data-sf-ftype="ShortText" />
                </h6>
       <sitefinity:TextField runat="server" DisplayMode="Read" Value='<%# Eval("MiniDescription")%>' />
              <sf:CommentsCountControl runat="server" ID="commentsCounterControl" CssClass="sfCommentsCounter" ThreadType='<%# Container.DataItem.GetType().FullName%>' ThreadKey='<%# ControlUtilities.GetLocalizedKey(Eval("Id")) %>' DisplayMode="ShortText" />
            </li>

      </ItemTemplate>
  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    27 Dec 2013 in reply to Boulevard
    Link to this post
    Have you tried this?

      <sf:DetailsViewHyperLink ID="DetailsViewHyperLink" TextDataField="BrandName" runat="server" data-sf-field="BrandName" data-sf-ftype="ShortText">
              <sf:ImageAssetsField runat="server" DataFieldName="ProductShot" IsThumbnail="True" />
    </sf:DetailsViewHyperLink>

  3. Boulevard
    Boulevard avatar
    8 posts
    Registered:
    08 Jul 2013
    27 Dec 2013
    Link to this post
    Yes, that gives this parse error:

    Parser Error Message: The ID 'DetailsViewHyperLink' is already used by another control.
  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    27 Dec 2013 in reply to Boulevard
    Link to this post
    Well you didn't cut and paste that in right....because in .net IDs have to be unique...I was saying modify the existing one, or if you want both to be seperate links



    <sf:DetailsViewHyperLink ID="DetailsViewHyperLink2" TextDataField="BrandName" runat="server" data-sf-field="BrandName" data-sf-ftype="ShortText">
              <sf:ImageAssetsField runat="server" DataFieldName="ProductShot" IsThumbnail="True" />
    </sf:DetailsViewHyperLink>
  5. Boulevard
    Boulevard avatar
    8 posts
    Registered:
    08 Jul 2013
    27 Dec 2013 in reply to Steve
    Link to this post
    I replaced it like you intended this time and the Product Shot disappears...

    Reverted back and tried it with your second post and it did the same thing...
  6. Stephen2
    Stephen2 avatar
    94 posts
    Registered:
    05 Feb 2012
    28 Dec 2013
    Link to this post
    I don't much use the "sf:" fields, so I could be wrong here but an asp:HyperLink, if you specify "Text" property, all the nested controls will fail to render.

    On the above DetailsViewHyperLink2 please try removing "TextDataField" property, such that the link will get no .Text, then see if the image renders inside the link.
  7. Boulevard
    Boulevard avatar
    8 posts
    Registered:
    08 Jul 2013
    30 Dec 2013
    Link to this post
    I replaced with this and it rendered the same way; no image, and a hyperlink:
    <sf:DetailsViewHyperLink ID="DetailsViewHyperLink2" runat="server" data-sf-field="BrandName" data-sf-ftype="ShortText">
              <sf:ImageAssetsField runat="server" DataFieldName="ProductShot" IsThumbnail="True" />
    </sf:DetailsViewHyperLink>

    This is a really simple task in standard HTML development. I can't believe it's this difficult.
  8. Boulevard
    Boulevard avatar
    8 posts
    Registered:
    08 Jul 2013
    30 Dec 2013
    Link to this post
    Ok, here's what worked:
     <sf:DetailsViewHyperLink ID="DetailsViewHyperLink" runat="server" data-sf-field="BrandName">
              <sf:ImageAssetsField runat="server" DataFieldName="ProductShot" IsThumbnail="True" />
     </sf:DetailsViewHyperLink>         
                <h6 class="brand">
                    <sf:DetailsViewHyperLink ID="DetailsViewHyperLink2" TextDataField="BrandName" runat="server" data-sf-field="BrandName" data-sf-ftype="ShortText" />
                </h6>
       <sitefinity:TextField runat="server" DisplayMode="Read" Value='<%# Eval("MiniDescription")%>' />

    In addition to Stephen2's suggestion of removing the "TextDataField", I also removed "data-sf-ftype="ShortText" from Steve's original suggestion.

    Thanks for your help Steve and Stephen!

    Answered
  9. Stephen2
    Stephen2 avatar
    94 posts
    Registered:
    05 Feb 2012
    31 Dec 2013
    Link to this post
    That was harder than it should have been, I agree... I don't like those SF fields much because I don't understand them.  I will usually use standard <asp> fields, with various Eval functionality instead.
  10. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    01 Jan 2014 in reply to Stephen2
    Link to this post
    @Stephen
      Well in this case you can't use a hyperlink because the Sfdetailsview control resolves whatever page you set as the 'single' view.  So the only way for you to use hyperlink is if you always know the page and forgo letting the user pick the single page.

    Actually that sfdetailsview inherits from the asphyperlink anyway so you get all those properties as well.

    Steve
  11. Stephen2
    Stephen2 avatar
    94 posts
    Registered:
    05 Feb 2012
    01 Jan 2014 in reply to Steve
    Link to this post
    You'll probably laugh, but I genuinely have done this in the past:
    <asp:HyperLink runat="server" NavigateUrl='<%# ((HyperLink)Container.FindControl("DetailsViewHyperLink")).NavigateUrl %>'>
      <asp:Image xxxxx />
    </asp:HyperLink>

  12. 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 posts, 1 answered