Archived topic
Make picture clickable in a side by side query loop block
9 replies · Started by Oliver on July 20, 2022
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
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.
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
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 :)
Amazing! Yes, I do:
Thanks a lot man!
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.
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
There's a } missing before David's CSS :)
https://www.screencast.com/t/bHJpd8Kupo0P
That did it! Thank you very much Ying and have a nice rest of the day!
You are welcome :)
