Hi, I’d like to set up a nestable slider on a page (not a template) to show all the images in a pods multi image field that I attached to that page in Wordpress .
I’d like it to work in exactly the way a Bricks carousel works when the multi image field in dynamic data is selected - all the images from the multi image field are displayed. I’d use the carousel, but I need the extra flexibility of the nestable slider
However, only the first image from the Pods Multi-image field shows in the builder and in the front end, nothing shows, just the grey background of the slider.
How do I set up the slider to show all the images from a multi-image field ?
I’d really appreciate some help on this, even if it’s just to say it’s probably too difficult for a new user of Bricks to set up. I asked a very similar question a few weeks ago which also went unanswered. One of the things that made me commit to buying two licenses was the emphasis that Bricks is community based, which made me believe that help would be available. However I’m finding myself at a standstill for days on end because I can’t overcome some technical detail. Is Bricks primarily aimed at developers, which is why questions such as mine ( which are probably very basic) are going unanswered?
I’ve trawled YouTube looking for my specific case regarding the slider , but not found anything, or on the web either. I’ve found ChatGPT very helpful where answers to general css html questions are needed, but it doesn’t have a clue about Bricks specific questions.
Bricks seems to be fantastic software, and I really like it. It’s capable of so many things, but only if you know how to use it.
I thought I had a solution, but in fact all that was happening was that adding entries to the Pods multi image field attached them to the page. The combination of ‘Child of’ set to Post_ID and 'Background image also set to Post_Id, simply displays all images attached to the page. I suspected that when I removed an item from the multi field and it continued to be displayed.
It should be possible to make this work with Pods, people have got it working with ACF and JetEngine,
I’ve tried a lot of things to make this work, the latest iteration is the following which I’ve pasted into a code block on the page in the Bricks Builder, If I try to post it into the Query Editor in the interface for the query loop it won’t sign, so the code block is the right place or not?
<?php
function bricks_query_vars_filter( $query_vars, $settings, $element_id ) {
if ( $element_id === 'mxxzcg' && function_exists( 'pods_field' ) ) {
global $post;
$post_id = $post->ID; // Get the post ID from the global $post variable
// Assuming 'gallery' is the name of the Pods field
$gallery = pods_field( 'gallery', $post_id );
if ( empty( $gallery ) ) {
// Make sure that no posts are returned when there are no images in the gallery
$query_vars['post__in'] = [0];
return $query_vars;
}
// Process the gallery field data as needed
if ( is_array( $gallery ) ) {
// Get image IDs from image arrays
$gallery = array_map( 'get_image_id', $gallery );
} else if ( is_string( $gallery ) ) {
// Try to get image IDs from image urls
$gallery = array_map( 'attachment_url_to_postid', $gallery );
}
$query_vars['post__in'] = $gallery;
}
return $query_vars;
}
function get_image_id( $image_array ) {
return $image_array['ID'];
}
add_filter( 'bricks/posts/query_vars', 'bricks_query_vars_filter', 10, 3 );
?>
In the query loop I have ‘Child of’ set to Post_ID, and also under style, for ‘Background Image’.
it still isn’t working
Latest iteration, but still not working. Can it be that the problem is that the Pods multi image field doesn’t return Image IDs? I think the codes that work for ACF require that the gallery field in ACF is set to return Image IDs? I don’t know because I don’t have the Pro version of that plugin. In any case I don’t see an option in Pods to make it return Image IDs, I don’t know if it does or not.
I’m still unsure if the Pods field should be set to return as a WP Gallery or not?
I have this posted in the query loop editor section of the slide, it’s supposed to get around the possibility that the field maybe doesn’t return Image IDs: It shows nothing in the builder or the front end.
/* use gallery field id from Pods */
$gallery_images = pods_field( 'gallery' );
if ( ! empty( $gallery_images ) ) {
// Initialize an array to store attachment IDs
$attachment_ids = array();
// Convert image URLs to attachment IDs
foreach ( $gallery_images as $image_url ) {
$attachment_id = attachment_url_to_postid( $image_url );
if ( $attachment_id ) {
$attachment_ids[] = $attachment_id;
}
}
if ( ! empty( $attachment_ids ) ) {
// Set up the query arguments to retrieve attachments
$query_args = array(
'post_type' => 'attachment',
'post_status' => 'inherit',
'orderby' => 'post__in',
'post__in' => $attachment_ids,
'posts_per_page' => -1,
);
return $query_args;
}
}
I’ve worked on this on and off over the weekend, but still not getting it to work.
This is the latest code, can anyone suggest what might be wrong? The custom field is called ‘gallery’, the pod is called ‘page’ (is the ‘pod’ the global thing that holds all the custom fields?)
add_filter( 'bricks/posts/query_vars', 'bricks_query_vars_filter', 10, 3 );
function bricks_query_vars_filter( $query_vars, $settings, $element_id ) {
/* Place your loop element id */
if ( $element_id === 'mxxzcg' && function_exists( 'pods' ) ) {
global $post;
$post_id = isset( $post->ID ) ? $post->ID : 0;
// Assuming 'gallery' is the name of the Pods multi-image field
$pod = pods( 'page', $post->ID ); // Replace 'your_pod_name' with the name of your Pods
if ( ! empty( $pod ) ) {
$gallery = $pod->field( 'gallery' ); // Retrieve the multi-image field data
if ( empty( $gallery ) ) {
/* Make sure that no posts are returned when
* there are no images in the gallery
*/
$query_vars['post__in'] = [0];
return $query_vars;
}
// Convert the gallery IDs array into an array of integers
$gallery_ids = array_map( 'intval', $gallery );
$query_vars['post__in'] = $gallery_ids;
}
}
return $query_vars;
}
I enabled the ‘Output as WP Gallery’ option in the custom field and modified the code (with ChatGPT) to see if that would work, still not working.
add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
if ( $element_id === 'cghjvv' && function_exists( 'pods_shortcode' ) ) {
// Get the gallery shortcode content
$gallery_shortcode_content = pods_shortcode( array(
'name' => 'gallery',
'field' => 'gallery',
'data' => get_the_ID(), // Assuming this is within the loop
) );
// Parse the gallery shortcode to extract image IDs
preg_match_all('/\[gallery.*ids=.(.*).\]/', $gallery_shortcode_content, $matches);
// Check if matches were found
if ( isset( $matches[1][0] ) ) {
// Get image IDs from the shortcode
$gallery_ids = explode( ',', $matches[1][0] );
$gallery_ids = array_map( 'trim', $gallery_ids );
// Set the post__in query var to filter by these image IDs
$query_vars['post__in'] = $gallery_ids;
} else {
// If no matches were found, make sure no posts are returned
$query_vars['post__in'] = array( 0 );
}
}
return $query_vars;
}, 10, 3 );
