Hi to all,
I need to create a slide gallery from a Gallery field.
I have tried to use these two guides:
The first shows how to create a testimonial block: https://www.advancedcustomfields.com/resources/create-your-first-acf-block/
The second shows how to display the slider from the gallery custom field:
https://www.advancedcustomfields.com/resources/gallery/#display-images-in-a-slider
Then, in my child theme I created the blocks/acf-gallery folders, and inside it I uploaded the block.json and acf-gallery.php files.
In functions.php I have added this code:
function gnm_acf_gallery_block() {
/**
* We register our block's with WordPress's handy
* register_block_type();
*
* @link https://developer.wordpress.org/reference/functions/register_block_type/
*/
register_block_type( __DIR__ . '/blocks/acf-gallery' );
}
// Here we call our tt3child_register_acf_block() function on init.
add_action( 'init', 'gnm_acf_gallery_block' );
The block.json code is:
{
"name": "acf/gallery",
"title": "ACF Gallery",
"description": "A custom gallery block that uses ACF fields.",
"category": "formatting",
"icon": "admin-comments",
"keywords": ["gallery", "quote"],
"acf": {
"mode": "preview",
"renderTemplate": "acf-gallery.php"
},
"supports": {
"anchor": true
}
}
In the acf-gallery.php I have added the following code:
<?php
$images = get_field('galleria_casasi');
if( $images ): ?>
<div id="slider" class="flexslider">
<ul class="slides">
<?php foreach( $images as $image ): ?>
<li>
<img />" alt="<?php echo esc_attr($image['alt']); ?>" />
<p><?php echo esc_html($image['caption']); ?></p>
</li>
<?php endforeach; ?>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<?php foreach( $images as $image ): ?>
<li>
<img />" alt="Thumbnail of <?php echo esc_url($image['alt']); ?>" />
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif;>
Into the <head> I have added the following script:
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
Now, inside the blocks list I can find the Gallery Block, but it doesn’t works fine. It doesn’t display the slider gallery.
What is wrong and what should I do to solve the issue?
Thanks
