Post-specific HappyFiles Galleries using a ACF Select Field in Bricks

This Pro tutorial provides the steps to use ACF to select one or more HappyFiles‘ folders and output the images from the selected folder(s) using HappyFiles shortcode or Bricks‘ Image Gallery element or img elements in a query loop.

This is the equivalent of Post-specific HappyFiles Galleries using a Meta Box Select Field in Bricks tutorial but for ACF instead of Meta Box.

Step 1

Install and activate HappyFiles.

Go to Media → Library.

Create folders and categorize images by moving them into the folders.

Step 2

Install and activate ACF.

Go to ACF → Field Groups.

Create a new field group for your post type having a Select-type field.

Leave the Choices empty. We shall populate it programmatically in the next step.

If you would like to be able to select multiple folders, enable the “Select Multiple” option.

If you would like – Select – to appear as the 1st option for this field in the post editor screens, enable Allow Null in the Validation tab.

Step 3

Let’s define a custom function to populate all HappyFiles folder names as options of above Select field.

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

add_filter( 'acf/load_field/name=project_gallery', function ( $field ) {
    // Reset choices
    $field['choices'] = [];

    $args = [
        'taxonomy' => 'happyfiles_category',
        'orderby' => 'name',
        'order' => 'ASC',
        'hide_empty' => false,
    ];

    $folders = get_terms( $args );

    $choices = [];

    foreach ( $folders as $folder ) {
        $choices[ $folder->term_id ] = $folder->name;
    }

    $field['choices'] = $choices;

    return $field;
} );

Replace project_gallery with the name of your Select field.

Reload the field group page in the WP admin and you should see the HF folder names appear as the Choices.

There is no need to save changes.

Step 4

Edit the posts (of your post type) and populate the field.

Step 5

Define another custom function to retrieve the IDs of images from the selected HappyFiles folder(s).

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

<?php 

function bl_get_hf_folders_image_ids(): array {
    $args = [
        'post_type' => 'attachment', // Assuming you want to query media items
        'post_status' => 'inherit',
        'posts_per_page' => -1, // Retrieve all matching items
        'fields' => 'ids',
        'tax_query' => [
            [
                'taxonomy' => 'happyfiles_category',
                'terms'    => get_field( 'project_gallery' ),
            ],
        ],
    ];

    $hf_query = new WP_Query( $args );

    return $hf_query->posts;
}

Replace project_gallery with the name of the Select-type field.

Step 6

Whitelist the bl_get_hf_folders_image_ids function.

Ex.:

<?php 

add_filter( 'bricks/code/echo_function_names', function() {
  return [
    'bl_get_hf_folders_image_ids'
  ];
} );

You should also add other functions (native or custom) being used in your Bricks instance besides bl_get_hf_folders_image_ids. This can be checked at Bricks → Settings → Custom code by clicking the Code review button.

More info on whitelisting can be found here.

Step 7

Time to output the images on the front end.

Create and edit the template that applies to single posts of your post type with Bricks.

Add a Section and inside its Container, an Image Gallery element.

Set its source to

{echo:bl_get_hf_folders_image_ids}

If you would like to instead output the images from the selected folder(s) using HappyFiles’ Shortcode, add a Shortcode element and set it to:

[happyfiles_gallery categories="{acf_project_gallery}" lightbox=true]

Replace acf_project_gallery with the dynamic data tag for your Select-type field.

Apply a dynamic data condition on the Section to ensure that it is output only if the Select field is not empty.

Replace acf_project_gallery with the dynamic data tag for your Select-type field.

Visit single posts to see the result.

If you’d like to output the images in a query loop, enable PHP query editor and paste:

$image_ids_array = bl_get_hf_folders_image_ids();

if ( $image_ids_array ) {
  return [
    'post_type' => 'attachment',
    'post_status' => 'inherit',
    'posts_per_page' => -1,
    'no_found_rows' => true,
    'post__in' => $image_ids_array,
    'orderby' => 'post__in',
  ];
} else {
  return [
    'post__in' => [ 0 ],
  ];
}

Add an Image element inside the query loop-enabled Block and set its source to:

{post_id}

To ensure that the parent Section gets output only if there is at least one result for the query, apply a dynamic data condition like this:

Replace jxploi with the Bricks ID of the query loop-enabled block element.

References

https://www.advancedcustomfields.com/resources/acf-load_field/

https://www.advancedcustomfields.com/resources/dynamically-populate-a-select-fields-choices/