Jump to content

Need help hyperlinking an <img class> resource


AWOLVol
 Share

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!

Link to comment
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?

Link to comment
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!

Link to comment
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
Link to comment
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.

Link to comment
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. 

Link to comment
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!

Link to comment
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;
}

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...