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.

Query Loop with multiple posts, but show first image

  • Hi,

    I want to create something as nytimes has (they are using WordPress it seems) with how they do sections on the front page, see example:

    [img]https://i.postimg.cc/RVFR7tHS/temp-Image-VPUMi7.avif[/img]

    I can make something like it, but then with a Grid and point the img manually. But is it possible to make a grid and query loop and show 2 or 3 posts in the left part and the image of the first post (with undertitle image text) in the right part?

    I tried using Featured image on Curren Post, but I think that does not work since it is not in the “Post Template container”. I tried with css class too on the Grid (cu-featured-img) but I get lost there too.

    And: how do I get a separator line between the posts? Meaning that I want a separator line between post 1 and 2, but no separator line under post 2. That won’t work with a border since that repeats.

    Hope my question is clear, best Geert

  • Hi there,

    Do you have GP Premium? We have a template that looks structurally the same as the example you showed above: https://gpsites.co/voice/

  • Yes I have. Thank you for the suggestion, but I think it looks different as this shows a big photo above the post (the central one) if I am not wrong. What I am asking is showing 1 photo (first) in a query with multiple posts.

    ————————————
    post 1 title. | Featured image of post 1
    excerpt. |
    |
    — (separator) |
    |
    post 2 title. |
    excerpt. |
    |

  • Hi there,

    it would require 2 query loops to do that.

    You would first use a Grid Block to create the 2 columns. Making the first column 70% wide and the second column 30% for example.
    Then add a separate query loop within each,.

  • That is a nice approach. Thanks!

    Any light on the separator too? Only in between posts?

  • Can I see what you’ve done? And let me know where you want the separator.

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