Jump to content
AWOLVol

Need help hyperlinking an <img class> resource

Recommended Posts

[My first post, and I'm obviously not a developer, so please be gentle]    

I'd like to make the image called in the <img class> tag below into a hyperlink. I know how to make an image a link with the <a href> tag, but I'm locked into this  structure as I'm configuring an existing set-up and that's how they have it. The answer is probably something simple, but it's something I've never done and don't seem to be asking or phrasing the right questions in Google/Bing to find a working sample. 

<div class="col-xs-12 col-sm-6 col-md-3">
<div class="calcite-web">
  <div class="card-base">
    <div class="card-image-wrap">
      <img class="card-image" src="https://image_url" alt="name">
    </div>
    <div class="card-content">
     <h4>Title</h4>
      <p style="min-height: 50px">Description. </p>
      <div aria-label="actions" class="btn-group btn-group-justified" role="group">
      <a class="btn btn-primary" target="_blank" href="https:resource_url">Button Text</a>
      </div>
    </div>
  </div>
</div>
</div>

I don't have access to CSS or anything in the environment I'm in, so I'm going to have to handle it with HTML.

Thank you!

Share this post


Link to post
Share on other sites

Hi there,

Welcome to the forums!

In future if you're going to posting code, you may want to use the Forum's code block feature. That allows us to read it easier.

XcQfW3F.png

 

Now onto your question, there isn't anything too tricky. I'll see if I can lead you to a solution.

  • In HTML5, <a> tags can hold any other element except another interactive tag like another <a> tag or <button>
  • <a> tags provide a click behaviour that navigates to the page noted in its own href attribute.

Are you able to proceed?

Share this post


Link to post
Share on other sites

Thanks for the formatting tip...I have everything to learn on here, so I'm grateful.

I tried wrapping the existing tag in an <a> tag, but it didn't work. I may well have bungled it, though, so I'm happy to try again if you feel it would be worth another try. I would be curious where the best place to align the <a> and </a>  tags would be. I might have just misplaced those. 

Thanks!

Share this post


Link to post
Share on other sites

All good, all good.

How about you post what you've just tried, and we can see what's going on.

Share this post


Link to post
Share on other sites

The anchor tag just needs to wrap the img tag and MUST HAVE a href attribute with image path else it just acts a normal element and does nothing towards linking to your file.

Share this post


Link to post
Share on other sites
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="calcite-web">
  <div class="card-base">
    <div class="card-image-wrap">
     <a href="https://gis.franklincountyva.gov/compviewer/index.html">
      <img class="card-image" src="https://franklincova.maps.arcgis.com/sharing/rest/content/items/a6e74f639ac34dd48e3bc6d9ee390d0a/data" alt="Public GIS Viewer">
     </a>
    </div>
    <div class="card-content">
     <h4>Comprehensive Parcel Search</h4>
      <p style="min-height: 50px">This is a more comprehensive viewer for industry professionals that has more layers and more tools for those who work with land and real estate. </p>
      <div aria-label="actions" class="btn-group btn-group-justified" role="group">
      <a class="btn btn-primary" target="_blank" href="https://gis.franklincountyva.gov/compviewer/index.html">Access GIS Viewer</a>
      </div>
    </div>
  </div>
</div>
</div>

So, the up-shot here is that I'm trying to link the gallery cards' thumbnail images to the same URLs as their buttons (as seen in the attached image). 

I tried to wrap the <img> tag above in <a href> tag, but it did not work in any of the multiple ways I tried it (the last attempt preserved above), so I'm sure I'm missing something. Just an FYI, the code block above is for the "Comprehensive Parcel Search" tool displayed in the image below. The other gallery items, however, are all handled the same way, so what's sauce for the goose, should be sauce for the gander. 

From user feedback on our site, folks have expressed a frustration that the thumbnails are not linked, so I'm just trying to accommodate what is apparently a more intuitive workflow for our users. 

I sincerely thank y'all for any assistance you can offer. 

 

OnlineGISOffice.JPG

Edited by AWOLVol

Share this post


Link to post
Share on other sites

That code looks correct.

If the <div class="card-content"> element has a float CSS property then it would cover up the image with an invisible wall and prevent clicks from getting through to the image. There would be no way to solve it without changing the CSS.

Share this post


Link to post
Share on other sites

That's intriguing. It's a hosted site that I'm just using HTML to configure, but I could inquire with the host about the CSS. My concern is that, since it's a broadly used platform, they may have no interest in making an edit to their CSS just for little old me. 

I wonder, then, if there's a way to accomplish what I'm after purely in HTML, thus avoiding their CSS net. Hmmm...

Well thank you, and have a GREAT weekend. 

Share this post


Link to post
Share on other sites

Or you could try replacing that div as the anchor element instead, using the classes the div was using, it depends on how it was styled but it could possibly give desired result.

Share this post


Link to post
Share on other sites

Thanks, all. I've tried the other suggestions, and it appears nothing else is working. I've brought it into Dreameaver, and I am able to link the thumbnail in pure HTML there, but the same code does not work when I'm back in the hosted site. So I suspect that it's the CSS controlling the page and unfortunately I don't have access to that.

This has been an educational attempt for me, nonetheless, so far from a total loss and I certainly appreciate the suggestions. So thank you to dsonesuk, Ingolme, and Funce!

Share this post


Link to post
Share on other sites

Are your changes getting through at all? Have you tried to make an unrelated but viewable change?

Page could be cached, or you might not be on the right page at all.

I think I've managed to find the page you've linked to, I've manually inserted the anchor tag via the browser dev tools. Everything looks fine.

<div class="calcite-web">
  <div class="card-base">
    <div class="card-image-wrap">
    <a href="https://gis.franklincountyva.gov/compviewer/index.html">
      <img alt="Public GIS Viewer" class="card-image" src="https://franklincova.maps.arcgis.com/sharing/rest/content/items/a6e74f639ac34dd48e3bc6d9ee390d0a/data?w=400">
    </a>
    </div>
    <div class="card-content">
     <h4>Comprehensive Parcel Search</h4>
      <p style="min-height: 50px">This is a more comprehensive viewer for industry professionals that has more layers and more tools for those who work with land and real estate. </p>
      <div class="btn-group btn-group-justified" aria-label="actions" role="group">
      <a href="https://gis.franklincountyva.gov/compviewer/index.html" target="_blank" class="btn btn-primary">Access GIS Viewer</a>
      </div>
    </div>
  </div>
</div>

As an aside:

card-image-wrap has basic styling and uses Flexbox

.card-image-wrap {
    width: 100%;
    position: relative;
    margin-bottom: 0;
    flex: 0 0 auto;
}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...