Using ACF Gallery Field with jQuery Backstretch Plugin

To have an enduser add or edit images used as multiple backgrounds for use in a backstretch script you can use the ACF Gallery field for the user to add the images and then use a foreach loop to add the images to the backstretch init script.

Set up the gallery field and link it to your page.

acf gallery field

Set up ACF gallery field

 

 

acf link to a page

Target a page

 

In the page add the images via the new gallery field

Then enqueue the main backstretch.min.js, then for the init script you can add that directly to your WordPress page template using the foreach php loop inside the jQuery script. So the php runs on the server before the jQuery script is rendered in the browser.

<?php //<~ don't add me in
add_action ('wp_head', 'themeprefix_backstretch_init', 90 );
/**
* Add in ACF Gallery Images via backstretch
*
*/
function themeprefix_backstretch_init() {
$images = get_field('home_slider');// Add your field name
?>
<script>
jQuery(document).ready(function($) {
$(".header").backstretch([ // Add your HTML element
<?php
foreach( $images as $image ) {
echo '"' . $image['url'] . '",';
}
?>
],{
duration:3000,
fade:750,
});
});
</script>
<?php
}
view raw page.php hosted with ❤ by GitHub

 

Leave a Comment





%d bloggers like this: