[Support request] Inserting text + date over image in WPshowposts/GBlocks

[robchanoi]

Hi,

I would like to have the title text within the image and date if possible in order to place in sidebar.

Came across this from David https://generatepress.com/forums/topic/how-to-insert-text-inside-images-in-wp-show-posts/
but it appears that the pro version of WPshowposts has been merged with GB however I haven’t managed to locate how this is achieved using GB.
Could you kindly point me in the direction of how this is done or if this is not possible with free version.

Thank you.

edit: smt like these images in right sidebar on this site below which I think is created with elementor.

[Fernando]

Hi Robchanoi,

To clarify, may we know what exactly you’re trying to do? Are you trying to query posts, and alter the look as WPSP does?

If so, such functionality would indeed be available in GenerateBlocks 1.5.0: https://generateblocks.com/generateblocks-1-5-dynamic-data-query-loops-image-blocks/

Here’s a short screen recording I made for demo purposes: https://share.getcloudapp.com/bLuBe7AX

Hope this helps!

[robchanoi]

Hi,

Thanks. Yes exactly, to alter the look of WPSP so the text and date overlay the image in the right sidebar i.e like the example in priv box.

So, element – block – container – query loop : I dont see query loop so have updated WP and and need to update GB to 1.5.0 but just want make sure that uploading new GB (as it isn’t asking me to update in plugins) – that it won’t remove previous data?

Put simply – will uploading new GB plugin delete past data?

Thanks

[Fernando]

Uploading GB 1.5.0 wouldn’t delete any post data.

It’s good practice though to always take a backup of your site when making changes.

Hope this clarifies!

[robchanoi]

Thanks – sorry – for this query loop though as it will be just one column appearing in right sidebar with say 3 post images with text/date overlaying – do I select just the “title and date” layout query loop?

Thanks.

[Fernando]

Yes, you may. Then, you can just set the image as a dynamic background image in the Container Block.

[robchanoi]

So this wld be 3 containers one on top of the other or one query loop and under dynamic data 3 posts per page?

1. Under query loop I have selected 1 post per page. If I select 3, under dynamic data in fist post title it assigns what post I choose to all 3 post titles. Alternatively, I cannot see “duplicate” container under query loop to do it another way, so should I assign 3 query loops and have 3 containers? Edit – solved – I see you can duplicate query loop.

2. How to place in right sidebar?

Thanks

[Fernando]

Correct, If you’re wanting to show 3 posts, you’ll need to set the Posts per page to 3.

You shouldn’t need to create 3 Container Blocks.

You can create One Query loop Block, then show 3 posts.

Lastly, you may add it to the Right side bar through Appearance > Widgets > Right Sidebar.

Sidenote: Here’s the reference to Query Loop Blocks: https://docs.generateblocks.com/article/query-loop-overview/

Hope this clarifies!

[robchanoi]

Thanks – but i would like to choose specific posts to show on specific pages. I can do the latter part using widgets context.
Choosing the specfic page then changes the 2 other posts to that same post so I have 3 of the same posts. I’m obviously missing something and got it working through duplicating the query loop.

https://menspleasures.com/wp-content/uploads/2022/06/query-loop.jpg

Almost there this way but because I created a left sidebar menu with black background it is therefore black on right sidebar – pls see link in priv box below.

I am trying to set background to white in css – came across these two css,

#right-sidebar {
background-color: #ffffff;
}

No joy, but the this changed left sidebar to white background,

.sidebar .widget:first-child {
background-color: #ffffff;
}

Do u know what the right sidebar css is please.

Also – can’t seem to bring the height down of these containers – I have set height through each container in query loop to min heoght 175 and main container housing the 3 query loops to min height 700. It might have smth to do with padding as top padding in each conatiner is 125 to bring down the title and date (showing yesterdays date not “published date” as assigned)

Thanks

[Ying]

Hi there,

If you want to show 3 specific posts, add the include posts parameter:
https://www.screencast.com/t/BCMCuaKCTxEd

Remember to revert the title’s source post to current post.

I am trying to set background to white in css – came across these two css,

You don’t need CSS for that, the setting is at customizer > colors > sidebar.

.sidebar .widget:first-child this selector isn’t targeting the widget in your right sidebar as the first child in your right sidebar doesn’t have widgetclass, and it’s not even visible.
https://www.screencast.com/t/5QNAdJOHk

So what are you exactly trying to target? Let me know!

Also – can’t seem to bring the height down of these container

As you mentioned, you’ve set the min height, it’s not max height. It will only go beyond the min height.
If you want it to be shorter, reduce the top/bottom padding setting for each container.

[robchanoi]

Tks

Remember to revert the title’s source post to current post.

Got it – tks.

But how do u add a background image to each post if u just have one container?

Also – published date showing as yesterday still for all 3 posts in the 3 query loops version.

Yes – sidebar color is set to black in customizer so I can create the left menu.

But I don’t want the right sidebar with black background I would like it white pls.

If I reduce the padding then, how do I make the title and post date come to the bottom of the image?

tks

[Fernando]

But how do u add a background image to each post if u just have one container?

You can add a Background Image by Enabling the Dynamic data of the Container Block. This can retrieve the featured image of a post or a post meta image if you’ve created one.

Also – published date showing as yesterday still for all 3 posts in the 3 query loops version.

Can you check if the Date type is set to Published and the “Replace with updated Date” is disabled as such: https://share.getcloudapp.com/8Lu07pBe

With regards to the Background color of the right sidebar, here’s a CSS you may try adding in Appearance > Customize > Additional CSS:

.inside-right-sidebar aside.widget {
    background-color:#fff;
}

If I reduce the padding then, how do I make the title and post date come to the bottom of the image?

You may opt to add only top Padding to make the title and the date display at the bottom.

Hope this clarifies!

[robchanoi]

Hi,

Thanks Fernando & Ying, truly almost there.

For some reason the reduction in horizontal gap between each post is working in editing screen but not live.

I have reduced horizontal & vertical gaps in grid to 5.

And just finally – possible to make whole image clickable?

Thanks again.

[Fernando]

From my end, I can see that the gap is set to 5px. Can you try clearing you browser’s cache or try viewing it in a different browser? This might be a browser caching issue.

With regards to making the image clickable, you may set the Container Block’s link type in its Dynamic settings as such: https://share.getcloudapp.com/xQuwDz18

Hope this helps!

[robchanoi]

Not seeing link type there in the container under query loop.

https://menspleasures.com/wp-content/uploads/2022/06/no-link-type.jpg

I have also cleared cache but chrome/epic/ff – all still roughly 1 cm gap – are u seeing slim gap like above?

https://menspleasures.com/wp-content/uploads/2022/06/horizontal-gap.jpg

[Author]

Posts