Media query and Nestable slider (acf/ JetEngine gallery field)

[Mehdimoradi]

Bricks Version: 1.6.2
*Browser chrome

Hi guys
It will be so helpful if nestable slider support media query like what carousel does

its a quite useful option because we will be able to use Nestable slider to output gallery field (acf/ JetEngine) in SINGLE template

[aslotta]

It does. Just choose Posts with the post type Media.

See Query Loop – Bricks Academy.

[Mehdimoradi]

Thank you for your reply, I meant gallery field added by plugins like acf/ JetEngine

Assume that you have added a galley field to the POSTS and in your single template you want to show the gallery field through Nestable slider

At the moment its not possible

[aslotta]

Ok. Got it.

You can create your own query for this scenario. In my example below I added an ACF gallery field (called gallery) to the regular post post type.

add_filter( 'bricks/setup/control_options', function( $control_options ) {
    $control_options['queryTypes']['gallery'] = esc_html__( 'Galerie', 'as' );
    return $control_options;
} );

add_filter( 'bricks/query/run', function( $results, $query_obj ) {
    switch ( $query_obj->object_type ) {
        case 'gallery':
            $images = get_field( 'gallery' );
            if ( ! empty( $images ) ) {
                $results = $images;
            }
            break;
    }
    
    return $results;
}, 10, 2 );

add_filter( 'bricks/query/loop_object', function( $loop_object, $loop_key, $query_obj ) {
    switch ( $query_obj->object_type ) {
        case 'gallery':
            global $post;
            $post = get_post( $loop_object['ID'] );
            setup_postdata( $post );
            break;
    }
    
    return $post;
}, 10, 3 );

Result:

CleanShot 2023-02-13 at 09.44.51

[Mehdimoradi]

Thank you
In my case i should replace custom field name (gallery), yes?
Whats Galerie? Should i change it too?

By the way i like to ask @timmse to make it compatible so it will be easier, because i don’t know about coding

[aslotta]

I thought about it again and there is an even easier way without a completely custom query. Just use the bricks/posts/query_vars hook.

add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
    if ( $element_id === 'cghjvv' && function_exists( 'get_field' ) ) {
        $gallery = get_field( 'gallery' );
        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;
        }
        
        /* Get the first gallery item to automatically determine
         * the ACF gallery field's return format
         */
        $test_item = current( $gallery );
        if ( is_array( $test_item ) ) {
            // Get image IDs from image arrays
            $gallery = array_map( function( $image_array ) {
                return $image_array['ID'];
            }, $gallery );
        } else if ( is_string( $test_item ) ) {
            // Try to get image IDs from image urls
            $gallery = array_map( function( $image_url ) {
                return attachment_url_to_postid( $image_url );
            }, $gallery );
        }
        
        $query_vars['post__in'] = $gallery;
    }
    
    return $query_vars;
}, 10, 3 );

Just change the element ID in my snippet (cghjvv) to the ID of your query loop element’s ID. And change gallery to the name of your custom gallery field.

And these are the query loop settings.

Again: This code is using ACF.

[timmse]

Hey Mehdi,
This is not a bug report, but a feature request I will move the thread.

Official feature requests are still to be submitted via the Idea Board: https://bricksbuilder.io/ideas/
This way we can see how many users have a need for this feature. Until then, I think Andre’s code is very easy to use.

@Mehdimoradi

…because i don’t know about coding…

You don’t have to, that’s what you have @aslotta for

Best regards,
timmse

[Mehdimoradi]

Thank you for your reply, and also thanks to @aslotta
I thought its a quite useful feature and its easy for you guys to implement

Also almost in every website with a cpt (real estate, services, portfolio and etc) we need a gallery
And Nestable slider would be a great choice to render the results

[robp]

Agree with this totally

[robp]

Awesome help thanks aslotta. If we wanted to use this query across a few different elements, is there a better/cleaner way than targeting the element ID(s)?

Also, are you choosing the post type that contains the ACF when you pick ‘Medien’ please? When I do that, it just loops through the posts in that post type instead

[galasio]

I’m using JetEngine but i can’t figure it out how I can make this work. In the database I have the meta field “bildergalerie” with the image IDs as the meta_value (4601,4600,4599). I tried it with this function but it didn’t work:

jet_engine()->listings->data->get_meta( 'bildergalerie' );

Would it be better to change the meta_value from “Media ID” to “Array with media ID and URL”? And do I habe to use the ID with the prefix “brxe” or without?

Thanks in advance.
Ioannis

[MartinWB]

I am trying to do the same.

Have you found solution??

[galasio]

Hey Martin,

no I didn’t figure it out. Instead I used a repeater field for the images.

I hope this will help you.

[MartinWB]

I have tweaked @aslotta code a bit. It was try an error but this is working.

add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
   /* Place your loop element id */
    if ( $element_id === 'cewxop' ) {
        global $post;
        $gallery = get_post_meta( $post->ID, 'gallery', true ); // JetEngine media meta field (array with 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;
        }

        // Convert the gallery IDs string into an array
        $gallery_ids = array_map( 'intval', explode( ',', $gallery ) );

        $query_vars['post__in'] = $gallery_ids;
    }
    
    return $query_vars;
}, 10, 3 );

Hope it helps someone later on .

[auwers]

@aslotta Could you help me achieve this with Metabox?

[Laurent]

Hi, your code save my life, thanks.
Do you know if there is a way to order by order in jetengine gallery field?

Thanks again.

[MartinWB]

I made new code:

/* use gallery field id from ACF or JetEngine */
$gallery_images = get_field("my_gallery");
/* in case you want to use ACF Option field */
// $acf_images = get_field("my_gallery", "option");

if(!empty($gallery_images)) {

return [
    'post_type'      => 'attachment',
    'post_mime_type' => 'image',
    'post_status'    => 'inherit',
    'orderby'        => 'post__in',
    'post__in'       => $gallery_images,
    'posts_per_page' => -1,
]; }

else {

  	return [];

}

@ivan_nugraha made a video how to use it. You may adjust order and other things here.

[Laurent]

Oh OK , thank you very much, I’ll try this tomorrow.

[Laurent]

Hi,
This code works , it is modified for jetengine.
In field settings, select value format as Array with media ID and URL

$jetengine_images = get_post_meta( get_the_ID(), 'my-galerie', true );

// Check if the array is not empty
if (!empty($jetengine_images)) {
    // Extract only the IDs of the images
    $image_ids = array_map(function($item) {
        return $item['id']; // Ensure that the key for IDs is correct
    }, $jetengine_images);

    // Use these IDs in the WP_Query
    return [
        'post_type'      => 'attachment',
        'post_mime_type' => 'image',
        'post_status'    => 'inherit',
        'orderby'        => 'post__in',
        'post__in'       => $image_ids,
        'posts_per_page' => -1,
    ];
} else {
    return [];
}

Thanks.

[MartinWB]

I would try this → set value format to media ID

$gallery = get_post_meta( get_the_ID(), 'gallery', true);

if(!empty($gallery)) {
  
$images = explode(",", $gallery);
$galleryArray = array_map('intval', $images);

return [
    'post_type'      => 'attachment',
    'post_mime_type' => 'image',
    'post_status'    => 'inherit',
    'orderby'        => 'post__in',
    'post__in'       => $galleryArray,
    'posts_per_page' => -1,
]; }

else {
  	return [];
}