[Resolved] Make picture clickable in a side by side query loop block

[Oliver]

I copied one of Mikes query loops templates from generateblocks into my website, specifically the one that shows the first post in a double grid where the featured picture is to the left and the title, terms and date is to the right. I see that it works differently than a normal query loop block in the sense that there is no picture block to the left, but rather a container background. I guess this is to ensure the layout stays the same no matter what picture is dynamically added as the background. Is there a way to make it so that the picture is also clickable like the other posts on the page?

Thanks in advance

[David]

Hi there.

Whilst its using a Container Block background you would need GenerateBlocks Pro, as that includes an option to make the container a link.

[Oliver]

Ok David, thanks for the answer! I´ll consider that option!

By the way, I like your designs the best from the site library and pattern library. Please create some more when you have the time 🙂

have a nice day

[David]

Aww man – thank you for the kind words 🙂

Do you have a site with the query block in place?
If so share a link and ill see if we can make that image clickable 🙂

[Oliver]

Amazing! Yes, I do:
Thanks a lot man!

[David]

1. Select the Grid block thats inside Query Loops post template:

https://www.screencast.com/t/7Oo4HM8cUzqm

And in Advanced > Additional CSS Classes add: aside-featured-post

2. Add this CSS:

.aside-featured-post {
	position: relative;
}

.aside-featured-post h2 a:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

That should make the whole post clickable.

[Oliver]

it is not working quite yet.

I applied the class and added the class to additional CSS but .aside-featured-post and .aside-featured-post h2 a:before are red as if something is wrong with those two sentences

maybe you want to login and try yourself? if so i´m pasting you the login details

[Ying]

There’s a } missing before David’s CSS 🙂
https://www.screencast.com/t/bHJpd8Kupo0P

[Oliver]

That did it! Thank you very much Ying and have a nice rest of the day!

[Ying]

You are welcome 🙂

[Author]

Posts