NO BUG: Bricks Gallery style issue with images in a Happy Files folder

[Webbod]

If I add images manually, the gallery works perfectly.
When I use a query loop to add images from a Happy Files folder, the images show as one long list.

This seems to be because when the Happy Files folder is loaded, although the structure appears the same, instead of the outer div and ul using ID they use class.

I want to allow the client to manage their galleries by just adding and removing images in the relevant Happy Files folder but I can’t do that because of this issue.

Is there a workaround for this?

[timmse]

Hi Belinda,
Thanks so much for your report, and welcome to the forum!

I’m not sure how you use the query loop to add images to the Image Gallery

Anyway, there is a separate Happyfiles Gallery element where you can choose the folder directly, which should solve your problem.

Best regards,
timmse

[Webbod]

Unfortunately the styling of the Happy File gallery is not as nice or flexible as the Bricks Gallery.
It is also not full width and the images are smaller and of poorer quality for some reason.

So it does not solve my problem.

It may not be a bug, but it may well be a conflict with the Happy Files Gallery?

Certainly the loop styling which is causing the issue is being changed when a Happy Files folder is selected. In addition the styling is similar to that used in the Happy Files Gallery.

I added the folder as I would add a Post Loop, add a Query Loop to the container:
Type = Posts
Post Type = Media
Terms = [name of folder]

In the Gallery I select Dynamic Data and use Post ID

Is it possible to disable the Happy Files Gallery to test for a conflict?

[aslotta]

Hey Belinda,

I do not see a HappyFiles gallery element on your screenshots. With your current setup you’re creating one gallery element for each image.

As @timmse recommended try the actual HappyFiles gallery element and make sure to set it up correctly:

Best,

André

[Webbod]

Thank you aslotta,

I can see what you mean in the html.

As I’ve already said, I would prefer to use the Bricks gallery as it has more options.

In the screenshot the Bricks Gallery at the top is what I want - but I had to choose each image individually which is not client-friendly.

The middle screenshot is the Happy Files Gallery but it only has the grid option, reduces the quality of the images and does not go full width so, while it is client-friendly, it is limited compared with the Bricks Gallery.

The bottom image is the issue that I would ideally like to fix - using the images from a Happy Files folder to create a Bricks Gallery.

If the current setup I am using with the Bricks gallery is creating one gallery per image, how do I set it to use the images from one Happy Files folder so it creates a gallery from the folder?

If it is not possible, then I will have to try alternative approaches. If it is possible then I’d love to know how and move this out of this section into the How Do I section.

[aslotta]

Hey Belinda,

if you need to use the regular gallery element you can create a small helper function. Should look something like this:

function get_hf_folder_image_ids( $folder_name ) {
    $images = get_posts( [
        'post_type' => 'attachment',
        'posts_per_page' => -1,
        'tax_query' => [
            [
                'taxonomy' => 'happyfiles_category',
                'field' => 'name',
                'terms' => $folder_name
            ]
        ],
        'fields' => 'ids'
    ] );

    return $images;
}

You can then use this function in the gallery element and pass your folder name (in my case the folder is called Gallery:

{echo:get_hf_folder_image_ids(Gallery)}

Best,

André

[FranklyCo]

Hey @aslotta - Is there a way to dynamically include the folder name via an ACF taxonomy field? Right now, the only “dynamic” functionality to this is manually changing the folder name in the function. I tried inserting the ACF field name into the {echo:get_hf_folder_image_ids({acf_happy_files_folder})} but it does not accept it. Would love to solve this one finally for fully dynamic post galleries. Any ideas?

Thank you!
Rhett

[aslotta]

Hey @FranklyCo,

I would just adjust the function in this situation so you do not have to pass any argument at all:

function get_hf_folder_image_ids() {
    $image_ids = [];

    $terms = get_field( 'happyfiles_folder' ); // Change this to your custom taxonomy field name

    if ( empty( $terms ) ) {
        return $image_ids;
    }

    $image_ids = get_posts( [
        'post_type' => 'attachment',
        'posts_per_page' => -1,
        'tax_query' => [
            [
                'taxonomy' => 'happyfiles_category',
                'terms' => $terms
            ]
        ],
        'fields' => 'ids'
    ] );

    return $image_ids;
}

You can then just use {echo:get_hf_folder_image_ids} in your gallery element.

Best,

André

[FranklyCo]

Fantastic, thank you! My snippet modification was close but yours actually works haha