Dynamic Columns in masonry image gallery

[jschulle]

Hello community,

I created a portfolio page with fetching my portfolio items in a loop. Sometimes there are only 1 or 2 photos in the item. Is it somehow possible to get the masony gallery doing the columns dynamic?

at the moment I set ist to 3, but as you see in the screenshot below it looks with one photo not so good.

[SuatB]

you can easily do this by having the column-count as a variable, and adding a dynamic attribute to the masonry-element, with the query-result-count of your loop and some css:

Of course you have to change the grcjrj for the bricks-id of your loop-element

[jschulle]

Hello thank for you reply. On which element I need to do this?

The scenario is:

Page with a image gallery in it which querys from the portfolio items I create. For example Martino has 3 pictures in the portfolio and Jasmina only one. I have an ACF activated with name “js_p_portfolio_main_gallery” which I use in the block for the query.
Sorry I’m totally at the beginning with programming in PHP and HTML.

[SuatB]

Now that I see your structure panel, I’m afraid my suggestion won’t work.

I guess you won’t get around writing some php-code. This Article solves a very simular problem, but I couldn’t get it to work for an attribute:

ACF Gallery Images Count Dynamic Condition in Bricks - BricksLabs

But with this code every image-gallery with that acf-field should return the count as an attribute, so you can use similiar css like I posted before:

add_filter('bricks/element/set_root_attributes', function ($attributes, $element) {

  if ($element->name !== 'image-gallery') return $attributes;

  $gallery_field = get_field('js_p_portfolio_main_gallery');

  if (empty($gallery_field)) return $attributes;

  $gallery_count = count($gallery_field);

  $attributes["data-image-count"] = strval($gallery_count);

  return $attributes;
}, 10, 2);

Cheers Suat

[jschulle]

Dear Suat you are the best. It works

Could I get one minute of your time again. Is it possible to center the image when there is only one in the galerie?

Best regards Hannes

[SuatB]

Hi Hannes,

This can also be done. But again we need to write some code, since we can’t output the ACF-field-count with the standard dynamic-data-tag of bricks (otherwise we could use bricks conditions).

I would suggest you put an Image-Element inside the query loop and we programmatically tell bricks to render either the Image-Element or the Image-gallery-Element, depnding on the itemcount of your ACF-Field.

this is what your strucutre panel should look like, and I also marked the parts that you would need to change for your code to work.

add_filter('bricks/element/render', function ($render, $element) {
  if ($element->name !== 'image-gallery') return $render;

  if ($element->element["id"] !== 'haavzm') return $render; // change bricks-id of your Image-Gallery-Element

  // $gallery_field = get_field('image-gallery', $element->post_id); // my example ACF field
  $gallery_field = get_field('js_p_portfolio_main_gallery', $element->post_id); // your ACF field

  if (empty($gallery_field)) return $render;

  $gallery_count = count($gallery_field);

  if ($gallery_count <= 1) {
    $render = false;
  }

  return $render;
}, 10, 2);

add_filter('bricks/element/render', function ($render, $element) {
  if ($element->name !== 'image') return $render;

  if ($element->element["id"] !== 'oprpzx') return $render; // change bricks-id of your Image-Element

  // $gallery_field = get_field('image-gallery', $element->post_id); // my example ACF field
  $gallery_field = get_field('js_p_portfolio_main_gallery', $element->post_id); // your ACF field

  if (empty($gallery_field)) return $render;

  $gallery_count = count($gallery_field);

  if ($gallery_count > 1) {
    $render = false;
  }

  return $render;
}, 10, 2);

This should work, and now you can style your single image hower you’d like. for example put margin auto on each side, so it’s centered.

Cheers Suat

[jschulle]

Hi Suat,

I tried it and it works now with the single image. Is there any chance to also get again the number of elements back like in your last code:

$attributes[“data-image-count”] = strval($gallery_count);

When I try setup another return variable it is not working. Or makes it sense to create another image gallery which only shows up when there are 2 elements in it?

I tried this:

add_filter(‘bricks/element/render’, function ($render, $element) {
if ($element->name !== ‘image-gallery’) return $render;

if ($element->element[“id”] !== ‘second_gallery’) return $render; // change bricks-id of your Image-Gallery-Element

// $gallery_field = get_field(‘image-gallery’, $element->post_id); // my example ACF field
$gallery_field = get_field(‘js_p_portfolio_main_gallery’, $element->post_id); // your ACF field

if (empty($gallery_field)) return $render;

$gallery_count = count($gallery_field);

if ($gallery_count <= 1 && $gallery_count > 2) {
$render = false;
}

return $render;
}, 10, 2);

BR Hannes

[jschulle]

Maybe this is better? To check the item is not 2?

if ($gallery_count != 2) {
$render = false;
}

Edit: The new solution works now I think. Need to test a few portfolio items again.

BR Hannes