This Pro tutorial provides the steps for setting up a hero section in Bricks having images that pan and move as a background slideshow with the content (a title, text and a button – same for all slides) over the top.
We shall create a Page-specific Repeater using ACF Pro where slides with image and animation origin for each Page can be set.
After that, load UIKit, add a couple of custom PHP functions for getting the slide image’s URL and alt text and “build” the hero section’s structure by copy pasting the provided JSON.
Step 1
Install and activate ACF Pro.
At ACF → Field Groups, import the field group using the following JSON:
Click Save Changes.
Note: The Location Rule in this tutorial is going to be
Post Type = Page
If you want to set up the Ken Burns slideshow just for your site’s homepage make changes in this step and other steps accordingly.
Step 2
Edit your Pages and populate the Repeater.
Step 3
Add the following in child theme‘s functions.php or a code snippets plugin:
add_image_size( 'page_slideshow', 1920, 1280, true );
function bl_get_page_slideshow_slide_url() {
$acf_row = BricksQuery::get_loop_object();
return $acf_row['slide']['url'];
}
function bl_get_page_slideshow_slide_alt() {
$acf_row = BricksQuery::get_loop_object();
return $acf_row['slide']['alt'];
}Change the width and image in
add_image_size( 'page_slideshow', 1920, 1280, true );as needed.
You may have to regenerate thumbnails.
Step 4
Whitelist the two custom functions.
Ex.:
<?php
add_filter( 'bricks/code/echo_function_names', function() {
return [
'bl_get_page_slideshow_slide_url',
'bl_get_page_slideshow_slide_alt'
];
} );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
Go to Media → Library, open your slide images and ensure that Alt text is filled in.
Step 6
Edit your Page or template with Bricks.
Copy this JSON and paste.
Ensure that for the Dynamic data condition of the “Ken Burns Container” layer, the Bricks ID is that of the Block on which the ACF Repeater query loop is enabled.
Step 7
Click on the gear icon (Settings) → PAGE SETTINGS → CUSTOM CODE.
Custom CSS:
/* ========================================================================
Component: Slideshow
========================================================================== */
/*
* 1. Prevent tab highlighting on iOS.
*/
.uk-slideshow {
/* 1 */
-webkit-tap-highlight-color: transparent;
}
/* Items
========================================================================== */
/*
* 1. Create position and stacking context
* 2. Reset list
* 3. Clip child elements
* 4. Prevent displaying the callout information on iOS.
* 5. Disable horizontal panning gestures
*/
.uk-slideshow-items {
/* 1 */
position: relative;
z-index: 0;
/* 2 */
margin: 0;
padding: 0;
list-style: none;
/* 3 */
overflow: hidden;
/* 4 */
-webkit-touch-callout: none;
/* 5 */
touch-action: pan-y;
}
/* Item
========================================================================== */
/*
* 1. Position items above each other
* 2. Take the full width
* 3. Clip child elements, e.g. for `uk-cover`
* 4. Optimize animation
*/
.uk-slideshow-items > * {
/* 1 */
position: absolute;
top: 0;
left: 0;
/* 2 */
right: 0;
bottom: 0;
/* 3 */
overflow: hidden;
/* 4 */
will-change: transform, opacity;
}
/*
* Hide not active items
*/
.uk-slideshow-items > :not(.uk-active) {
display: none;
}
/*
* Cover
*/
.uk-position-cover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* Transform
========================================================================== */
.uk-transform-center {
transform: translate(-50%, -50%);
}
/* Transform Origin
========================================================================== */
.uk-transform-origin-top-left {
transform-origin: 0 0;
}
.uk-transform-origin-top-center {
transform-origin: 50% 0;
}
.uk-transform-origin-top-right {
transform-origin: 100% 0;
}
.uk-transform-origin-center-left {
transform-origin: 0 50%;
}
.uk-transform-origin-center-right {
transform-origin: 100% 50%;
}
.uk-transform-origin-bottom-left {
transform-origin: 0 100%;
}
.uk-transform-origin-bottom-center {
transform-origin: 50% 100%;
}
.uk-transform-origin-bottom-right {
transform-origin: 100% 100%;
}
/* ========================================================================
Component: Animation
========================================================================== */
[class*='uk-animation-'] {
animation: 0.5s ease-out both;
}
/* Direction modifier
========================================================================== */
.uk-animation-reverse {
animation-direction: reverse;
animation-timing-function: ease-in;
}
/* Animations
========================================================================== */
/*
* Fade
*/
.uk-animation-fade {
animation-name: uk-fade;
animation-duration: 0.8s;
animation-timing-function: linear;
}
/*
* Scale
*/
.uk-animation-scale-up {
animation-name: uk-fade, uk-scale-up;
}
.uk-animation-scale-down {
animation-name: uk-fade, uk-scale-down;
}
/*
* Slide
*/
.uk-animation-slide-top {
animation-name: uk-fade, uk-slide-top;
}
.uk-animation-slide-bottom {
animation-name: uk-fade, uk-slide-bottom;
}
.uk-animation-slide-left {
animation-name: uk-fade, uk-slide-left;
}
.uk-animation-slide-right {
animation-name: uk-fade, uk-slide-right;
}
/*
* Slide Small
*/
.uk-animation-slide-top-small {
animation-name: uk-fade, uk-slide-top-small;
}
.uk-animation-slide-bottom-small {
animation-name: uk-fade, uk-slide-bottom-small;
}
.uk-animation-slide-left-small {
animation-name: uk-fade, uk-slide-left-small;
}
.uk-animation-slide-right-small {
animation-name: uk-fade, uk-slide-right-small;
}
/*
* Slide Medium
*/
.uk-animation-slide-top-medium {
animation-name: uk-fade, uk-slide-top-medium;
}
.uk-animation-slide-bottom-medium {
animation-name: uk-fade, uk-slide-bottom-medium;
}
.uk-animation-slide-left-medium {
animation-name: uk-fade, uk-slide-left-medium;
}
.uk-animation-slide-right-medium {
animation-name: uk-fade, uk-slide-right-medium;
}
/*
* Kenburns
*/
.uk-animation-kenburns {
animation-name: uk-kenburns;
animation-duration: 15s;
}
/* Keyframes used by animation classes
========================================================================== */
/*
* Fade
*/
@keyframes uk-fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*
* Scale
*/
@keyframes uk-scale-up {
0% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
@keyframes uk-scale-down {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/*
* Slide
*/
@keyframes uk-slide-top {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
@keyframes uk-slide-bottom {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
@keyframes uk-slide-left {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes uk-slide-right {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
/*
* Slide Small
*/
@keyframes uk-slide-top-small {
0% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
@keyframes uk-slide-bottom-small {
0% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
@keyframes uk-slide-left-small {
0% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
@keyframes uk-slide-right-small {
0% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
/*
* Slide Medium
*/
@keyframes uk-slide-top-medium {
0% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
@keyframes uk-slide-bottom-medium {
0% {
transform: translateY(50px);
}
100% {
transform: translateY(0);
}
}
@keyframes uk-slide-left-medium {
0% {
transform: translateX(-50px);
}
100% {
transform: translateX(0);
}
}
@keyframes uk-slide-right-medium {
0% {
transform: translateX(50px);
}
100% {
transform: translateX(0);
}
}
/*
* Kenburns
*/
@keyframes uk-kenburns {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
/*
* Shake
*/
@keyframes uk-shake {
0%,
100% {
transform: translateX(0);
}
10% {
transform: translateX(-9px);
}
20% {
transform: translateX(8px);
}
30% {
transform: translateX(-7px);
}
40% {
transform: translateX(6px);
}
50% {
transform: translateX(-5px);
}
60% {
transform: translateX(4px);
}
70% {
transform: translateX(-3px);
}
80% {
transform: translateX(2px);
}
90% {
transform: translateX(-1px);
}
}
/*
* Stroke
*/
@keyframes uk-stroke {
0% {
stroke-dashoffset: var(--uk-animation-stroke);
}
100% {
stroke-dashoffset: 0;
}
}Body (footer) scripts:
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.17.8/dist/js/uikit.min.js" defer></script>That’s it! Check the front end and ensure that the background slideshow with Ken Burns effect is working.
Now you are ready to explore the element structure and make any desired changes.