Site logo

Archived topic

Add background image to top level container

6 replies · Started by Brian on July 19, 2022

Viewing posts 1–7 of 7

Hi I am working on a new layout using query loops
https://sluggerotoole.com/home/

You see the top part in red, I would like to set the featured image as the background image for that section. This kind of thing
https://www.screencast.com/t/ksYR3yDraDd

The issue is when I set dynamic data is does not work. I suspect the issue is because I am trying to set it on this container which is above the query loop?
https://www.screencast.com/t/RO5MEiwkr0

If I set it on post template container it works fine but it only shows in the middle container, I would like it to stretch the whole red area like the first screenshot
https://www.screencast.com/t/fWttqhVMcK1

I know I can manually choose a post to pull the image from but I want to automatic it show the lastest post featured image.

Any suggestions?

Thanks

If that section is to be the Latest Post then you would need to add 2 x query loops.
The first one should have just 1 post with your featured image background set on the Container.

Then your other query loop will be as is with an Offset Parameter of 1 so it skips the first post.

I don't think you are supposed to add a query loop block into another query loop block.

I think i nearly have it, this seems to work
https://www.screencast.com/t/hCahbifE

But does it look a little overkill?

One last issue is I can't seem to get an option to set inner container to restricted, so the content is to the left.
https://sluggerotoole.com/home/

I can add padding to the text, but I think I am missing something obvious.

I decided just to go with a fixed container so I will close this.

Thanks

Just to cover, the issue you were having above is you had a Query Loop inside another query loop, and thats not supported today, in the future it will allow nested loops, for example loop for the Category terms and under each term show a list of posts.

For your need it would require 2 x Query Loops, both of which are separate so in the list view they would both be at the root level:

https://www.screencast.com/t/pufVEZk8N6T

But if you're happy with your current solution then that is great :)

This archived topic is closed to new replies.