Multiple ACF Galleries via Shortcode

• jmccall

• March 1, 2015 at 11:34 pm

I’d like to put an ACF gallery in a repeater field and set up a shortcode so that multiple galleries can be added to a post. Basically, get it to work like the native WP gallery.

Is there some way to do this? Do the ACF galleries have some kind of ID that could be placed in the post editor and then inserted into the shortcode? Or maybe one could associate a text field with them that could function as an indentifier in the shortcode?

Thanks!

• mediawerk

• March 2, 2015 at 11:55 pm

could you try to explain me:
why you “try” to use shortcode and not use a template file for frontend view

• jmccall

• March 3, 2015 at 12:30 am

So that the galleries can be inserted in various locations within the_content.

• mediawerk

• March 3, 2015 at 1:04 am

i think it is possible,
but i also think that you need to create your own shortcode-plugin. because gallery is a array;

and because you use repeater it will became even more difficult than without. because you have a array(gallery) inside a array(repeater). but it should still be possible.
for easier work you may need an additional field for each gallery that is used as identifier for your shortcode.
you can work with get_field/get_sub_field inside your shortcode plugin if you do it correct.

easier way would maybe be:
work with flexible content field, that contains a wysiwyg and a gallery layout, and create a frontend layout for it.

• 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”]