Need help hyperlinking an <img class> resource

[AWOLVol]

[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!

[Funce]

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.

 

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?

[AWOLVol]

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!

[Funce]

All good, all good.

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

[dsonesuk]

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.

[AWOLVol]

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

 

Edited January 24, 2020 by AWOLVol

[Ingolme]

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.

[AWOLVol]

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. 

[dsonesuk]

Instead of wrapping img tag with anchor, try wrapping the div container with class "card-image-wrap".

[dsonesuk]

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.

[AWOLVol]

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!

[Funce]

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;
}

 

[dsonesuk]

If using Dreamweaver don't use its inbuilt browser view, always view in an actual browser on a local server.