Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

SVG Graphic on Top of Query Loop Image

  • Hey,

    We are using QueryLoop to show posts on Categories.
    Now we are preparing for Xmas 😉

    We would like to add a svg image on top of the Big post. For that we already have just one single query loop. The problem is to get that image on top. Using the Advance Background solves the issue, but disabled the dynamic featured image.

    Do you have an idea to solve the issue?

  • And a follow up:

    I have two images – a jpg and a svg which i would like to have both as background. The svg on top of the jpg (Link 3). I changed the settings a little bit, so it should work like the documentation said, but it doesn`t.

  • Hi there,

    I wonder if it would be easier to add the SVG as a Shape to the Container?

    Alternatively, we could add them as regular images inside of the same Container that has the background image, and tell them to position: absolute so they sit on top?

    Let me know 🙂

  • Hey Tom

    Thank you for your time. I tried it with a Sharpe (its active now) but maybe something is wrong with my settings, to its not there where it should be. Any Tip?

    Btw any idea for my second message?

  • Hi there,

    theres a couple of issues:

    1. Overflow Hidden
    The parents container with the class of lines-separation_gap_48
    And the Query Loop – Post Template block
    Both of them have Overflow set to Hidden
    This would need to be changed to overflow default

    2. vertical position of shape.
    Select the query loop post template block and give it a CSS Class of: has-xmas-overlay

    Then add this CSS to pull the shape up.

    
    .has-xmas-overlay .gb-shape {
        top: -60px !important;
    }
    
  • Hey David

    Thank you.
    I just found one Overflow on the elements to change. I added the CSS but need a hack to get the rest of the image in front of the white background.

    And did you could help me here a little bit https://generate.support/topic/svg-graphic-on-top-of-query-loop-image/#post-129757

  • oh now also the border radius is gone after changing overflow

  • yeah the border radius will break if you remove overflow hidden
    If you leave overflow hidden then it means you won’t see the shape overflow above the post. Does that work for you ?

  • okey thank you. But what would be now the right setting to get the Now over the Box like on link 2

  • The Container with the background image.
    Change its Layout > Overflow X and Overflow Y to VISIBLE.

  • Done, now the border is gone and the sharpe is still not right.
    https://share.cleanshot.com/CPffcg8wy1jS3yZKdknZ

  • 1. Set post template container’s overflow-x and overflow-y to hidden.

    2. Add the shape to the parent container of the query loop instead of adding it to the post template.

  • Hey Ying

    Thank you. I made these things, also moved the has-xmas-overlay to that container. But now its still not over the Container.

    Best Kevin

  • The Container with the .lines-separation_gap_48 class attached to it.
    You need to set its Layout > Overflow to visible

  • Wonderful 😉

    Now we have the issue with the grid lines, which are not perfect there and this is still open
    https://generate.support/topic/svg-graphic-on-top-of-query-loop-image/#post-129757

  • You currently have 5 lines, is there only supposed to be 2 lines, 1 vertical and 1 horizontal?

Viewing 16 posts - 1 through 16 (of 20 total)
  • You must be logged in to reply to this topic.