Archived topic
Two questions and two issues with GP & GB
16 replies · Started by Chip on May 8, 2020
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?
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?
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:
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?
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?
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.
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.
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!
Awesome! Everything good to go now? :)
Yes, all good except one little thing.
Do GB buttons have drop shadow in the settings?
If not - how do I add one?
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.
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?
Hi there,
something like this:
.gb-button-wrapper a.gb-button {
box-shadow: 0 3px 4px 0px rgba(0,0,0,0.5);
}
That worked nicely! Thanks David!
Last issue - is it possible to disable a GB Container's background image on mobile only?
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;
}
}