Hey there!
I want to create a dynamic slider with the picutres I have in the metabox custom field “image advanced”. There is also an official example in the bricks documentation of how to accomplish this (https://academy.bricksbuilder.io/…/filter-bricks-posts…/)
I have added the snippet vía WPCodebox.
Unfortunately I can’t get it to work. Does someone know what I am doing wrong?
Hey @kjs90 - Not sure if you figured this out but we’re working on the same thing here: Using Metabox Images Advanced field for individual image divs - #2 by aslotta if that helps!
@kjs90 Did you manage to find a solution for this problem, I’ve run into the same use case.
You may try this in Query editor (PHP)
$gallery_metabox = /* logic to return image ID array from metabox */;
if(!empty($gallery_metabox)) {
return [
'post_type' => 'attachment',
'post_mime_type' => 'image',
'post_status' => 'inherit',
'orderby' => 'post__in',
'post__in' => $gallery_metabox,
'posts_per_page' => -1,
]; }
else {
return [];
}
Should I assign the ID of the advanced image field to $gallery_metabox variable?
And what should I set as the dynamic data for my image?
$gallery_metabox = (array) rwmb_meta('afbeeldingen', ['size' => 'full']);
if(!empty($gallery_metabox)) {
return [
'post_type' => 'attachment',
'post_mime_type' => 'image',
'post_status' => 'inherit',
'orderby' => 'post__in',
'post__in' => $gallery_metabox,
'posts_per_page' => -1,
]; }
else {
return [];
}
Do you mean something like this?
I am not metabox user so haven’t tried that. Is there setting for metabox to return Array of Image IDs? In that case it would be like:
$gallery_metabox = rwmb_meta('afbeeldingen');
Well in that case maybe something like this should work
$gallery_metabox = rwmb_meta('afbeeldingen', array('type' => 'ID'));
I’ll give it a try, what should I set as the content for my individual image?
Ensure that there are no conflicts with other plugins or your theme that may be preventing the code snippet from working as expected. Try deactivating other plugins temporarily to see if that resolves the issue.
My code for reference:
add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
if ( $element_id !== 'hhnzxg') return $query_vars;
$gallery_images = (array) rwmb_meta( 'kfl_rezept_gallery', ['size' => 'full'] );
$gallery_images_ids = array_keys($gallery_images);
// if no gallery images, set empty string array
$gallery_images_ids = count($gallery_images_ids) > 0 ? $gallery_images_ids : [''];
$query_vars['post__in'] = $gallery_images_ids;
return $query_vars;
}, 10, 3 );
For it to work you can NOT change the name of the ID. It has to be the default value (without the “brxe-”). In my case the actual element id is “brxe-hhnzxg”.
I hope that helps. Cheers-
I was able to use de code field from bricksbuilder and php code from meta box to render the images in my template, in my custom code output I gave assigned the bricks classes to the rendered output:
<?php
// Displaying uploaded images:
$images = rwmb_meta( 'afbeeldingen', [ 'size' => 'full' ] );
?>
<?php foreach ( $images as $image ) : ?>
<div class="brxe-block splide__slide"><img src="<?= $image['url']; ?>"></div>
<?php endforeach ?>
Afbeeldingen is the ID of my image_advanced field in Meta Box.
After that I only had to write some custom CSS to make the images fit in my Bricks slider.
Then I was able to loop over my template with a normal query loop by selecting my custom post type.
Result:
very nice 
I’ll keep that in mind for future implementations.
Hi @auwers
Hoping you can shed some light as this is perfect for what I need to do as well. I managed to get the same look with the images scrolling, but it shows all 3x images and i can’t get them to space correctly in the slider.
Can you also advise where you are using this DIV Class? I am a bit confused about how you have assigned it?
<?php foreach ( $images as $image ) : ?>
<div class="***brxe-block splide__slide***"><img src="<?= $image['url']; ?>"></div>
<?php endforeach ?>
UPDATE:
Able to get somewhere with CSS styling but it still tries to push all 3 imates into a single slide.
Can you provide a screenshot of your HTML structure or a link where I can view the actual card?
Hey @stuismad , I went back to the project and looked at my own solution:
I’ve also added some custom CSS onto the Code block inside Bricksbuilder:
%root% {
aspect-ratio: 3/2;
}
.brxe-slider-nested .splide__slide img {
object-fit: cover;
border-radius: 2rem;
}
.brxe-slider-nested .splide__slide{
height: auto !important;
}
I hope this helps.
@auwers Thanks for such a fast reply mate and for your help. 
I managed to get a simpler solution without any PHP code strings and CSS using a nestable slider query loop.
For anyone wondering, I created the card as the screenshots above in Bricks, and for the image slider I just created a single slide/ block with an image inside. The image has a dynamic data of ‘{post_id}’ instead of selecting an image…and the block the image sits inside has the Query Loop.
More info in the official Bricks Academy update from February 28th, 2025 here.
Thanks again.
Thank you for updating this post with a more recent solution.
For anyone landing on this topic please use the solution from @stuismad in the comment above.