Card Link

Wappler General Need Help
1

Hi,
How would I simply add a link to an image that’s in a bootstrap card. I see no input in the Properties Inspector for an A Href attribute for an image that I have selected.

Thanks.

2

Hi Jim, welcome to Wappler.

Instead of adding an image to your card, add an anchor image. Then you will have the link properties.

Screen Shot 2022-04-15 at 1.58.38 PM

3

Thanks.
Is there a card type available in the Add New Component dialogue that has this type of image available upon insertion to the page?

4

Further, is it advisable/possible to have an Href around the entire card element?

5

I don't think there a a pre-built card with an anchor image in it. Just select the card that is closest to the one you want. For example the card that has an image in it already.

  • Add the Card to your page.
  • Click on the image that is there (if there is one) or any other element.
  • Click on the blue plus sign above or below the selected item and choose anchor image from the UI

Yes, but you would have add that manually in the code. Having said that try this:

  • Select your card
  • Go to Dynamic Attributes in the properties panel
  • Add Link.

I haven't tried that but should work.

6

OK. Thanks.

7

Add an anchor element with a class of stretched-link as in

<a href="#" class="stretched-link">Go somewhere</a>

For more, see:

3 Likes
8

I don’t quite understand stretched links. What’s the difference between that and a normal link?

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

So what would be clickable in the above card?

9

Have a look at
https://pleysier.com.au/brad

image
image1920×1050 335 KB

1 Like
10

Huh, that’s very interesting. Thanks @ben.

The stretched link is definitely the way to go for the original poster of this thread. I’m going to experiment with that further. Thank you for this.

Edit:

Your code for the stretched link is:

<div class="col">
                <div class="card h-100">
                    <img class="card-img-top" alt="Card image cap" src="assets/images/Wapen_groot.jpg">
                    <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <p class="card-text">With Stretched-Link, clicking anywhere on the card will take you to Google.</p>
                        <a href="https://www.google.com/" class="btn btn-primary stretched-link">Go somewhere</a>
                    </div>
                </div>
            </div>

How does it know which is the parent tag? I would have thought that the card-body div tag would have been the parent?

1 Like
11

This is what the Bootstrap documentation states:

Add .stretched-link to a link to make its containing block clickable via a ::after pseudo element. In most cases, this means that an element with position: relative; that contains a link with the .stretched-link class is clickable. Please note given how CSS position works, .stretched-link cannot be mixed with most table elements.

Cards have position: relative by default in Bootstrap, so in this case you can safely add the .stretched-link class to a link in the card without any other HTML changes.

Multiple links and tap targets are not recommended with stretched links. However, some position and z-index styles can help should this be required.

When you select the Card element in Wappler and go to the Styles tab, you will see:

image

Edit: What do you think of the Pleysier family coat pf arms! :sunglasses:

1 Like
12

Thanks. Stretched Link. Very Helpful. – Superb videos you put out! Thank You Kindly for those. :+1: