Reply To: Multiple ACF Galleries via Shortcode

• paul

• March 21, 2015 at 9:32 am

you can do this with repeater

it works like this:

1. create a repeater field and assign to pages, has the name of image_gallery_components
2. repeater has : image_gallery_shortcode_name, gallery_of_images (the gallery)
3. using flexslider to display the gallery
4. person knows how to use shortcodes

I have done it so that each shortcode generates an indivdual instance of flexslider using some bang-hash-rush code, change it to work for you if you want.

The idea is to get the id from the shortcode, repeat through the rows of the repeater, and if the id in the short code is the same as the id of the repeater row, output the html for the gallery.

simple really. And remember you can do this with vimeo and youtube embeds as well.

in your functions.php

/**** begin custom gallery shortcode ******/

function galleryShortcode($atts) {
   extract(shortcode_atts(array(
    "id" => ''
  ), $atts));
 $wrapperString ="";
 $LiString = "";
 $rand = rand(5, 3000);
if ( have_rows('image_gallery_components')){
 $increment = 0;
while( have_rows('image_gallery_components') ): the_row();
if(get_sub_field("image_gallery_shortcode_name")==$id)
{

$galleryImages = get_sub_field("gallery_of_images");

foreach($galleryImages as $galleryImage)
{
$LiString .= "<li><img src='".$galleryImage['sizes']['large']."'></li>";
$increment+=1;	
}
 
$wrapperString = "<div class='galleryWrap'>
<div id='slides".$rand."' class='flexslider slider'>
<ul class='slides'>".$LiString."</ul>
</div>";
if($increment>1)
{
$wrapperString.="<div id='carousel".$rand."' class='flexslider carousel'>
<ul class='slides'>".$LiString."
</ul>
</div>";
}
$wrapperString.="</div>";

}
endwhile;
if($increment>1)
{
	$append = "
<script>
$(document).ready(function() {

// The slider being synced must be initialized first
  $('#carousel".$rand."').flexslider({
    animation: 'slide',
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 180,
    itemMargin: 5,
    asNavFor: '#slides".$rand."'
  });
   
  $('#slides".$rand."').flexslider({
    animation: 'slide',
    controlNav: false,
    animationLoop: false,
    slideshow: false,

    sync: '#carousel".$rand."'
  });

});</script>";
}
else
{
$append = "
<script>
$(document).ready(function() {

// The slider being synced must be initialized first

   
  $('#slides".$rand."').flexslider({
    animation: 'slide',
    controlNav: false,
    animationLoop: false,
    slideshow: false,

  });

});</script>";	
}

}
$wrapperString.=$append;
return $wrapperString;
}

add_shortcode("customimagegallery", "galleryShortcode");
/****** end custom gallery shortcodes *********/

in your page or post (if you have assigned the location to it.

[customimagegallery id=”my-gallery”]

// content

[customimagegallery id=”second-gallery”]