[Support request] Hyperlink Background Image via a Loop Element

[Patrick]

Hi there,

I’m trying to create a ‘card’ style blog look and feel, using the query loop approach in Elements. It’s gone fairly well – see https://thisisplanetpatrick.com/blog/

Originally, I pulled through the Feature Image as a GB Image block and was able to make this a clickable link. However, I was getting something of a zoom effect on the Feature Image and/or couldn’t get it to stretch to the edges of the upper border radius. So I’m trying a solution of using a container + background image block, with a spacer in the container block of 250px, which is resulting in good proportions that stretch to the upper edge of the overall card container.

However, I think I might be unable to make a container with a background image into a clickable link in the usual way. I was seeking out solutions here in the Forum and was wondering if this CSS would work?

https://generatepress.com/forums/topic/background-image-link-with-generateblock/

(Separate issue I will raise in a different query – how to make the ‘cards’ all be the same height, as title lengths and excerpts can throw off the height).

Thanks!
Patrick

[Patrick]

Fixed the height issue in each query loop ‘card’ and any buttons issue.
Still have the background image linking question. Thanks!

[Ying]

Hi Patrick,

The CSS you found will not work based on your layout, as you don’t have a link added in the container block with the background image.

The container link is a GB Pro feature: https://docs.generateblocks.com/article/container-links/

If you want to keep the current layout and have the image clickable, it’s better to use the GB image block.

You can also set the border radius for the GB image block, for your reference:
https://www.screencast.com/t/tNBk53HAOh

[Author]

Posts