-
Hi all,
I know there have been a few posts in relation to ACF Galleries but I couldn’t find what I was looking for.
So I have a page which pulls in dynamic data from a custom post type. Within that CPT there is a gallery which I have used to populate images on the page and create a lightbox modal to view the rest of the images.
<?php $caravan_image_gallery = get_field('caravan_image_gallery'); ?> <?php if (is_array($caravan_image_gallery) && count($caravan_image_gallery) > 0) { echo '<div class="row caravans_sec_2">'; if (!empty($caravan_image_gallery[0]['sizes']['medium_large'])) { echo '<div class="col-md-6"> <div class="canvas_feature_img mb-3 mb-md-0 round-corners"> <img src="' . $caravan_image_gallery[0]['sizes']['medium_large'] . '" class="w-100 round-corners caravan--grid-lede img-fluid"> </div> </div>'; } echo '<div class="col-md-6"> <div class="row">'; if (array_key_exists(1, $caravan_image_gallery)) { echo '<div class="col-md-6 round-corners"><img class="mb-3 w-100 round-corners img-fluid caravan--grid-sub" src="' . $caravan_image_gallery[1]['sizes']['medium'] . '"></div>'; } if (array_key_exists(2, $caravan_image_gallery)) { echo '<div class="col-md-6 round-corners"><img class="mb-3 w-100 round-corners img-fluid caravan--grid-sub" src="' . $caravan_image_gallery[2]['sizes']['medium'] . '"></div>'; } if (array_key_exists(3, $caravan_image_gallery)) { echo '<div class="col-md-6 round-corners"><img class="mb-3 mb-md-0 w-100 round-corners img-fluid caravan--grid-sub" src="' . $caravan_image_gallery[3]['sizes']['medium'] . '"></div>'; } echo '<div class="col-md-6"> <div class="all_photo round-corners caravan--grid-sub"> <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#caravansViewsModal"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <g id="GalleryIcon" transform="translate(-884 -431)"> <rect id="Rectangle_108" data-name="Rectangle 108" width="5" height="4" transform="translate(884 437)" fill="currentColor"/> <rect id="Rectangle_113" data-name="Rectangle 113" width="5" height="5" transform="translate(884 431)" fill="currentColor"/> <rect id="Rectangle_109" data-name="Rectangle 109" width="5" height="5" transform="translate(884 442)" fill="currentColor"/> <rect id="Rectangle_110" data-name="Rectangle 110" width="4" height="4" transform="translate(890 437)" fill="currentColor"/> <rect id="Rectangle_115" data-name="Rectangle 115" width="5" height="4" transform="translate(895 437)" fill="currentColor"/> <rect id="Rectangle_112" data-name="Rectangle 112" width="4" height="5" transform="translate(890 431)" fill="currentColor"/> <rect id="Rectangle_114" data-name="Rectangle 114" width="5" height="5" transform="translate(895 431)" fill="currentColor"/> <rect id="Rectangle_111" data-name="Rectangle 111" width="4" height="5" transform="translate(890 442)" fill="currentColor"/> <rect id="Rectangle_116" data-name="Rectangle 116" width="5" height="5" transform="translate(895 442)" fill="currentColor"/> </g> </svg> View All Photos </a> </div> </div>'; echo '</div> </div>'; echo '</div>'; } ?> <!-- Modal --> <div class="modal fade" id="caravansViewsModal" tabindex="-1" aria-labelledby="caravansViewsModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <?php if (is_array($caravan_image_gallery) && count($caravan_image_gallery) > 0) { $a = 0; $b = 1; $c = 1; $active_class = ''; echo '<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators">'; foreach ($caravan_image_gallery as $caravan_image) { $active_class = ''; if ($b == 1) { $active_class = ' class="active" aria-current="true"'; } echo '<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="' . $a . '" aria-label="Slide ' . $b . '"' . $active_class . '></button>'; $a++; $b++; } echo '</div> <div class="carousel-inner">'; foreach ($caravan_image_gallery as $caravan_image) { $active_class = ''; if ($c == 1) { $active_class = ' active'; } echo '<div class="carousel-item' . $active_class . '"> <img src="' . $caravan_image['url'] . '" class="d-block w-100" alt="' . $caravan_image['title'] . '"> </div>'; $c++; } echo '</div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> <img src="'.get_stylesheet_directory_uri().'/img/icons/close_icon.png"> </button> </div>'; } ?> </div> </div> </div>I add this as a custom hook to the page. This works as expected.
However, I am trying to replicate this within a Query Loop for another CPT. I have updated the code to use the correct custom field for the different galley, however it just isn’t working. Can this work within a Query Loop on a page i.e. showing multiple galleries for each post on that page?
Thanks
-
Hi there,
just so i understand.
The page would contain a query loop, which would display a list of posts, and each post would display the multiple galleries that it contains.Is that correct ?
-
Hi David,
Yes, so the code I shared does this within a custom post type I have set up currently – https://postimg.cc/CnBYrkYP
It’s a single custom post type on a page that uses an ACF gallery along with other ACF types.
I basically want to replicate this within a Query Post block for a different custom post type, so that it would be multiple posts, each with their own gallery displayed in the same way as this screenshot shows.
Thanks
-
I think you can use the
render_block()filter to output the HTML for a block in the query loop block.Here’s an example of how to use
render_block()filter.
https://generate.support/topic/custom-taxonomy-text/#post-98407 -
Hi Ying, so my understanding of the render_block() filter is I would add that to my functions file, then it allows me to check a blocks name and modify its output?
I’m just not 100% sure on the implementation of this with my example. Any pointers would be really appreciated as i’ve been struggling with this for a few days.
Many Thanks
-
I would add that to my functions file, then it allows me to check a blocks name and modify its output?
Yes, it checks the class of a block.
So you can add a class to a headline block in the post template of the query loop, then use the
render_block()filter to output the content you want for the headline block. -
I managed to get this to where I needed it to be using the code below, took a while but really happy to have got it working finally. Thanks for the help and advice!
/** * Render Block for Query loop to include ACF Galleries. */ add_filter('render_block', function ($block_content, $block) { if (!empty($block['attrs']['className']) && strpos($block['attrs']['className'], 'acf-lodge-gallery') !== false) { $lodge_gallery_new = get_field('lodge_gallery_new', get_the_ID()); if (!empty($lodge_gallery_new) && is_array($lodge_gallery_new)) { ob_start(); // Start output buffering to capture HTML // Gallery grid echo '<div class="row caravans_sec_2">'; if (!empty($lodge_gallery_new[0]['sizes']['medium_large'])) { echo '<div class="col-md-6"> <div class="canvas_feature_img mb-3 mb-md-0 round-corners"> <img src="' . esc_url($lodge_gallery_new[0]['sizes']['medium_large']) . '" class="w-100 round-corners caravan--grid-lede img-fluid"> </div> </div>'; } echo '<div class="col-md-6"> <div class="row">'; for ($i = 1; $i <= 3; $i++) { if (!empty($lodge_gallery_new[$i]['sizes']['medium'])) { echo '<div class="col-md-6 round-corners"> <img class="mb-3 w-100 round-corners img-fluid caravan--grid-sub" src="' . esc_url($lodge_gallery_new[$i]['sizes']['medium']) . '"> </div>'; } } // SVG button echo '<div class="col-md-6"> <div class="all_photo round-corners caravan--grid-sub"> <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#caravansViewsModal"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <g transform="translate(-884 -431)"> <rect width="5" height="4" transform="translate(884 437)"/> <rect width="5" height="5" transform="translate(884 431)"/> <rect width="5" height="5" transform="translate(884 442)"/> <rect width="4" height="4" transform="translate(890 437)"/> <rect width="5" height="4" transform="translate(895 437)"/> <rect width="4" height="5" transform="translate(890 431)"/> <rect width="5" height="5" transform="translate(895 431)"/> <rect width="4" height="5" transform="translate(890 442)"/> <rect width="5" height="5" transform="translate(895 442)"/> </g> </svg> View All Photos </a> </div> </div>'; echo '</div> </div>'; echo '</div>'; $gallery_markup = ob_get_clean(); // End output buffering and get the gallery HTML $block_content .= $gallery_markup; // Append the gallery HTML to the block content } } return $block_content; }, 10, 2); -
Good job on this! Glad you made it 🙂
- You must be logged in to reply to this topic.