[Resolved] Two questions and two issues with GP & GB

Home Forums Support Two questions and two issues with GP & GB

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1275869
    Chip

    Hi guys,

    Long time user but never really had any issues until I dug into more advanced stuff.
    Trying to get rid of Elementor and replace a few bits with GB and some custom code.

    Question 1 – How can I show a grid of all my child pages on a parent page?
    I’m using a custom Elementor script now that shows them a three-column layout but don’t know how to do it with GB, Gutenberg or any GP hooks. See the link attached.

    Question 2 – On the GB Container element – is it possible to use the page’s featured image as a background? Alternatively an ACF image field, but a code snippet would be better if possible.

    Problem 1 – A GB container with three grid columns is not centering on mobile or tablet. I’ve tried everything 0 just not working.

    Problem 2 – Buttons not showing on mobile as well – just the linked text but that’s it. Is that a GB bug or some minification issue on my end?

    #1276045
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. What’s the script you’re currently using? I assume there’s some PHP going on to get the child pages?

    2. Right now it’s not possible, but we’ll be adding dynamic stuff like this in the pro version/adding filters so it’s possible in the free version.

    3. What do you mean by not centering? Are we looking at the backpacks at the top?

    4. Where can I see this?

    #1276324
    Chip

    Hi Tom,

    1. This is the Elementor’s script:

    add_action( ‘elementor_pro/posts/query/my_custom_filter’, function( $query ) {
    // Get current post tags
    $current_page = get_queried_object_id();
    // Modify the query
    $query->set( ‘post_parent’, $current_page );
    } );

    Then I added the custom “my_custom_filter” in the Elementor’s query field and it pulls every child page and sorts them like this:

    Would this be possible with GP or GB? I basically want certain pages to list all their child pages in the same or similar format. A bit like an archive/category page outputting all the child pages.

    2. Awesome thanks!

    3&4 – Yes, we’re looking at the backpacks, same for 4. as well:

    #1276599
    Chip

    Ok, after a bit of digging I came upon this:

    function wpb_list_child_pages() {

    global $post;

    if ( is_page() && $post->ID )
    $childpages = wp_list_pages( ‘sort_column=menu_order&title_li=&child_of=’ . $post->ID . ‘&echo=0&depth=2’ );

    if ( $childpages ) {
    $string = ‘

      ‘ . $childpages . ‘

    ‘;
    }

    return $string;
    }

    add_shortcode(‘wpb_childpages’, ‘wpb_list_child_pages’);

    Using the shortcode will list all the child pages but no other attributes.
    Is it possible using GP blocks or something else to achieve something similar to the Elementor view?

    #1276997
    Tom
    Lead Developer
    Lead Developer

    GenerateBlocks doesn’t have an option to query posts at the moment. If we do something like that, it won’t come until later.

    You can definitely use a shortcode to query the posts (like you’ve shown), but you’ll need to build the HTML/CSS by hand instead of using blocks.

    As for the columns/buttons, here’s what I’m seeing on mobile: https://www.screencast.com/t/3WYd0u3tF

    Can you show me what you’re seeing?

    #1277566
    Chip

    Yes, 3&4 are resolved – possibly a CF or WPRocket caching/minifying issue.
    2. is not that important, I can figure something out at a later stage or withing the premium version of GB which I will certainly buy once it is an option.

    Problem #3 is still pending.

    Seeing that you developed WP Show Post – is it possible to query pages that are subpages to the page where a shortcode is placed?
    I understand that it is not the right place to ask, but would something similar to the Elementor’s custom query filter would work?
    Any other ideas – I’m not a developer so trying to find optimal solution.

    #1277590
    Chip

    Actually figured it our with the help of this:

    https://wordpress.org/support/topic/show-pages-child-parent-sibling/

    I thought the plugin was updated to include $settings but it wasn’t yet so I added it manually into the code.
    It all seems to work now as intended except for issue #2 which is not super important yet.

    #1277741
    Chip

    Another question before I mark this as resolved.
    Is it possible to change the default page layout to full width?
    I can’t seem to find the option.

    P.S. Figured that out too – new element, no sidebars, apply to all pages – voila!

    #1278107
    Tom
    Lead Developer
    Lead Developer

    Awesome! Everything good to go now? 🙂

    #1278278
    Chip

    Yes, all good except one little thing.
    Do GB buttons have drop shadow in the settings?
    If not – how do I add one?

    #1278346
    Tom
    Lead Developer
    Lead Developer

    Not at this time – it’s likely something we’re going to add to the pro version.

    For now, you would have to use CSS.

    #1278702
    Chip

    What would be the correct property to attach drop shadow in CSS?
    The buttons will be used globally so preferably I’d like to add global drop shadow.

    Another question that popped in the process.

    I’ve created something similar to this, where the frame is a background image to the Container element.
    Would it be possible to hide the frame on mobile and if so – how?

    View post on imgur.com

    #1279067
    David
    Staff
    Customer Support

    Hi there,

    something like this:

    .gb-button-wrapper a.gb-button {
        box-shadow: 0 3px 4px 0px rgba(0,0,0,0.5);
    }
    #1279112
    Chip

    That worked nicely! Thanks David!

    Last issue – is it possible to disable a GB Container’s background image on mobile only?

    #1279284
    David
    Staff
    Customer Support

    Give the Container Block an Additional CSS Class of no-mobile-background
    Then add this CSS:

    @media(max-width: 768px) {
        .gb-container.no-mobile-background {
            background-image: none !important;
        }
    }
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.