Bricks and Happy files - dynamically load category in gallery

[DLR]

Hi,

i would like to load pictures of a happy files gallery dynamically into a Bricks gallery.

So i have created a category pictures and a subcategroy faces. I’ve put 5 pictures in the subcategory faces.

Than i’ve created a template with a gallery in Bricks and wanted to automatically load the 5 pictures of the subcategory into the gallery using dynamic data function.

At that point i’m not shure how to do that. Also struggling with the dynamic data options, because i can’t find a good documentation on that.

Any advice appreciated.

Thanks!

BTW: Bricks 1.5.3 and Happy Files 1.6 (standard version)

[Michael]

Hi Markus,

One way to do this in Bricks is:

1. Create the different folders in Happyfiles
2. Create a query loop in Bricks using an image
3. Set the query to use Post type > Media
4. Choose the folder in happy files by using the Terms (include) inside the query settings. (see image below).
5. Go to image and choose to insert image via dynamic data and select post id

Screenshot for step 4.

[DLR]

Hi @Michael

thanks for the advice. So i have to put the query loop on the container.

Problem: it still doesn’t work as expected. It shows the preview of the pictures and the right amount of pictures in that category = 5, but it doesn’t show the pictures themselves. Any idea what can cause that?

[Michael]

Ah sorry mate, missed a step. Just added step 5 that will bring through the image for you

[DLR]

Thanks @Michael

Works now. But i have a problem. Pictures that are imported via query loop are stacked above each other and i don’t understand the picture expands over the full width.

Pictures that are added manually are completely fine and the layout is as it should be.

Any ideas? Thanks!

Edit: Seems Bricks puts out every picture as a list, when rendered over a query loop. Unfortunately i don’t know how to get rid of that list.

[HeroRox]

You can set the section direction to horizontal like the screenshot below.

[DLR]

Thanks @HeroRox

That works, but i’m still struggling. Pictures are way to small, because of brxe-image gallery li =33.3% as a preset. WTF.

If i set it to 100% it works. But unfortunately i don’t know how to do that in the builder.

Any help appreciated.

Thanks!

[HeroRox]

Strange: set columns to 1 in the gallery settings and you have 100%…

[DLR]

Thank @HeroRox

Wow. That’s intuitive – NOT

Is that a bug? Or is that by intention?

[HeroRox]

I think it’s not a feature haha

[HeroRox]

Any idea about to set the gallery for more as 1 row (dynamic images)?

[HeroRox]

Here I found a solution in the academy at part “Example 2: Media Gallery”:

Query Loop

[DLR]

@HeroRox

I’ve build example 2 with some adjustments (33.33% instead of 300px for the picture size) and for me it works. But you have to set columns to 1.

[HeroRox]

Yes the column setting to 1 is special.

[robp]

This is just what I need, immensely hidden if you ask me given this is a crucial use of Happy Files for me.

Any idea how to loop through the post alt/caption in this loop too to grab that with the images?

EDIT: post excerpt returns the captions - IS there a way to reorder the media in HF, or do we need another plugin?

[tmueller]

Hi everyone, I just saw this thread as I do have the same problem. Reading through the answers I realized, that (as far as I can tell) @DLR used the image gallery block inside his loop.
This of course creates an image gallery for every image found, which in return renders a huge overhead of DOM elements and is responsible for the weird “stacking” behavior of the images.

In other terms, unfortunatly the media gallery block is not sufficient for query loops. You have to use the actual image block if you want to run a query loop.

This brings me to the question: Why is it not possible to select a media folder when using the image gallery block? Wouldn’t that be the most obvious thing? Or do I miss something?

Thanks in advance

[jmsuan]

Hi everyone,

Just wanted to contribute here because I found a workaround to enable this powerful feature. You must add some PHP code into the mix to accomplish this using the Image Gallery. I used a code snippet plugin to create a custom function that returns all the post IDs of attachments in a given category (I’m using WP ASE’s Media Categories, but the taxonomy will vary depending on what you’re using to categorize your media files). Here is my code:

<?php
function media_by_category( $slug ) {
    return get_posts([
        'post_type'      => 'attachment',
        'post_status'    => 'inherit',
        'posts_per_page' => -1,
        'fields'         => 'ids',
        'tax_query'      => [[
            'taxonomy' => 'asenha-media-category',
            'field'    => 'slug',
            'terms'    => $slug,
        ]],
    ]);
}

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

You must then approve of the custom code in your Bricks settings. After you’ve done so, you can then use {echo:media_by_category("illustration")} (or whatever slug your category is) in the “Dynamic Data” field of your Image Gallery. You can call get_posts() directly with the given attributes, but a custom function is much cleaner. Feel free to reply to this if you have trouble getting yours working!