[Resolved] Clickable links on cover images in columns that have a text link on the image.

[Heather]

Hi there – I have been pulling my hair out with this one and need advice please.

I have created an element which includes columns (x3) and in each one I have already inserted an image, typed text, and linked the text to a post. All good so far. I also want the image to be clickable and linked (along with the text) to the same post but do not know how to do this.

I did find an article that you had written that seemed to cover my point (see below) and I did carry out those instructions, but again I cannot seem to find how I can add a link to the image AND leave the text as a link as well.

Any suggestions greatly welcomed.

****
In order to link the entire box, you’ll likely need to use javascript.

For example, create columns and add cover blocks inside of them. Then link the text inside the cover to the target page.

Then, give the columns container a custom class so we can target it. For example, “linked-boxes”.

Now we can add this CSS:

.linked-boxes .wp-block-cover {
cursor: pointer;
}

.linked-boxes .wp-block-cover,
.linked-boxes .wp-block-cover-image {
min-height: 350px;
}
Now we need to do the javascript:

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to wp_footer
3. Add this as the content:

<script>
jQuery( document ).ready( function( $ ) {
$( ‘.linked-boxes .wp-block-cover’ ).on( ‘click’, function() {
var _this = $( this ),
url = _this.find( ‘a’ ).attr( ‘href’ );

if ( url ) {
window.location.href = url;
}
} );
} );
</script>
Then set your Display Rules.

[Heather]

Update – I have checked my website and somehow the first column/cover image is now linked (have no idea how that happened) but not the other two (just the text is linked).

I have set the hook element to ‘generate_inside_site_container’ and the display rules for the ‘entire site’

[David]

Hi there,

the simplest solution without JS is you take advantage of CSS pseudo elements.
Add this CSS:

p.box-link a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Then give each of the Text Blocks that contain the link a class of box-link
As the Cover Blocks position is relative, this should fill the container with the link target.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Heather]

Oh thank you soooo much for that – I have already updated the site with the information you sent and it is working.

The only other thing I need to sort out is there is no space between the images on the mobile version, they are just stacked. Can you work your magic again for me 🙂

[David]

You could add some bottom margin to columns like so:

@media (max-width: 599px) {
    .wp-block-column {
        margin-bottom: 20px;
    }
}

Just for future interest you may want to check out our GenerateBlocks:

https://wordpress.org/plugins/generateblocks/

It has full responsive controls 🙂
And the upcoming Pro version will have Clickable containers as a built in option.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Heather]

You guys are just the best – great customer service. Thank you so much.

Happy New Year to you all.

Stay safe.

[David]

You’re welcome !

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts