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

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

Home Forums Support Inserting text + date over image in WPshowposts/GBlocks

Viewing 15 posts - 1 through 15 (of 36 total)
  • Author
    Posts
  • #2251546
    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.

    #2251562
    Fernando
    Customer Support

    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!

    #2251598
    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

    #2251607
    Fernando
    Customer Support

    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!

    #2251613
    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.

    #2251614
    Fernando
    Customer Support

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

    #2251646
    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

    #2251701
    Fernando
    Customer Support

    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!

    #2251715
    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

    #2252299
    Ying
    Staff
    Customer Support

    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.

    #2252623
    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

    #2252665
    Fernando
    Customer Support

    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!

    #2252703
    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.

    #2252713
    Fernando
    Customer Support

    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!

    #2252744
    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

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