Dynamic Background Slideshow in Bricks

This Pro tutorial provides the steps to cycle the images uploaded to an ACF Gallery field or a Meta Box Image Advanced field as a background slideshow of a section with a fade effect in Bricks.

We shall use CSS animation for the slideshow.

Step 1

ACF

Create a field group having a Gallery-type of field.

Set the location as needed. In this example, we set it as the homepage.

Meta Box

Step 2

Edit your posts/Page and populate the field.

Step 3

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

<?php

/**
 * Get the current loop index beginning with 0
 *
 * @return int
 */
if ( ! function_exists( 'bl_get_loop_index_zero' ) ) {
	function bl_get_loop_index_zero(): int {
		if ( method_exists( 'BricksQuery', 'get_query_object' ) ) {
			$query_object = BricksQuery::get_query_object();

			if ( $query_object ) {
				$value = intval( $query_object::get_loop_index() );
			}
		} else {
			$value = 0;
		}

		$value = isset( $value ) ? $value : 0;

		return $value;
	}
}

function bl_get_animation_delay(): int {
    return bl_get_loop_index_zero() * 5;
}

We will use the bl_get_animation_delay() function in the value of the style data attribute for the slide list items so each slide’s animation delay is further increased by 5.

Step 4

Whitelist these functions:

• wp_get_attachment_url()
• bl_get_animation_delay()

Ex.:

<?php 

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

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

More info on whitelisting can be found here.

Step 5

Edit the Page/template with Bricks.

Copy this JSON of the fully-built Section and paste.

style attribute has been set for the Slide LI element having a value of:

PHP in the query editor on the Slide LI element:

$acf_gallery_images = get_field( 'homepage_slideshow' );

if ( $acf_gallery_images ) {
  return [
    'post_type' => 'attachment',
    'post_status' => 'inherit',
    'posts_per_page' => 20, // a large number
    'no_found_rows' => true,
    'post__in' => $acf_gallery_images,
    'orderby' => 'post__in',
  ];
} else {
  return [
    'post__in' => [ 0 ],
  ];
}

Replace homepage_slideshow with the name of your ACF Gallery field.

If using Meta Box use this PHP instead:

$images = rwmb_meta( 'homepage_gallery', [ 'size' => 'full' ] );

// if no images, return an empty array
if ( ! $images ) {
	return ['post__in' => [ 0 ]];
}

// create an empty array
$image_ids = [];
	
// loop through the images
foreach( $images as $image ) {
	// create a new array with the image IDs
	$image_ids[] = $image['ID'];
}

if ( $image_ids ) {
  return [
    'post_type' => 'attachment',
    'post_status' => 'inherit',
    'posts_per_page' => 20, // a large number
    'no_found_rows' => true,
    'post__in' => $image_ids,
    'orderby' => 'post__in',
  ];
} else {
  return [
    'post__in' => [ 0 ],
  ];
}

Replace homepage_gallery with the ID of your Image Advanced field.

Click “Sign code” and save.

Check on the front end to see the background slideshow in action.

Step 6

Click on Settings (cog icon) → PAGE SETTINGS → CUSTOM CODE.

In the Custom CSS area, paste:

@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  10% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

This custom animation is applied on the slide LI element via its custom CSS.

That’s it!

References

https://codepen.io/srikat-the-vuer/pen/XWLgxEz?editors=1100

https://brickslabs.com/acf-gallery-query-loop-in-bricks/

https://brickslabs.com/media-file-attachment-data-in-bricks/

https://brickslabs.com/meta-box-image-advanced-field-images-in-bricks-query-loop/