Get Gallery Field Images of Child Pages on Parent

• inhouse

• March 29, 2016 at 8:11 am

Is it possible to get the gallery field images of all child pages of a particular page to display all sort of uncategorized? I tried get_field(‘slideshow_images’, $page->ID) but it’s only returning the first child page images and not the others. I thought it would be easy to use the 2nd parameter of get_field to get child page content but I must be missing something. echo $page->post_title gets the title for all 3 sub pages but get_field(‘slideshow_images’, $page->ID) only returns the first page. Any suggestions would be greatly appreciated!

if ( is_page(19) ) { // Top level Gallery
	$pages = get_pages('child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
	$count = 0;
	foreach( $pages as $page ) { ?>
		<?php $images = get_field('slideshow_images', $page->ID);
	}
	
} else { // Child of Gallery page
	$images = get_field('slideshow_images');
}

<?php foreach( $images as $image ): ?>
...
<img src="<?php echo $image['sizes']['gallery-large']; ?>" alt="<?php echo $image['alt']; ?>" data-cycle-desc="slide-<?php echo $i; ?>" />
...

• James

• March 29, 2016 at 3:28 pm

Hi @inhouse

It’s because your code re-set the $images variable in the loop. Could you please try the following code instead?

$images = array();
foreach( $pages as $page ) { ?>
    <?php $images[] = get_field('slideshow_images', $page->ID);
}

Hope this helps 🙂

• inhouse

• March 30, 2016 at 12:03 am

Hi @james thanks so much for the help! I’m trying to implement your suggestion but I’m seeing “Undefined index: sizes” and “alt”. This is still only drawing in content from the first child page and no others.

Also, just to be clear, there is no gallery field content for the parent page (ID 19). We’re only trying to get field data from the child pages.

if ( is_page(19) ) { // Top level Gallery
	$pages = get_pages('child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
	$count = 0;
	$images = array();
	foreach( $pages as $page ) { ?>
		<h2><a href="<?php echo get_page_link($page->ID) ?>"><?php echo $page->post_title ?></a></h2>
		<?php $images[] = get_field('slideshow_images', $page->ID);
	}
} else {
	$images = get_field('slideshow_images');
}
if( $images ):
	$count=0; foreach( $images as $image ):
	$count++; endforeach; ?>
    <div id="slideshow-1" class="slideshow-container slideshow-countainer-<?php echo $count; ?> gallery-container">
		<div class="slideshow-nav">
			<a href="javascript:void(0)" id="prev" class="cycle-prev"></a>
			<a href="javascript:void(0)" id="next" class="cycle-next"></a>
		</div>
		<div id="cycle-1" class="cycle-slideshow"
	        data-cycle-slides="> div"
	        data-cycle-timeout="0"
	        data-cycle-prev="#slideshow-1 .cycle-prev"
	        data-cycle-next="#slideshow-1 .cycle-next"
	        data-cycle-caption="#slideshow-1 .custom-caption"
	        data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}}"
	        >
			<?php $i = 1; ?>
            <?php foreach( $images as $image ): ?>
                <div><img src="<?php echo $image['sizes']['gallery-large']; ?>" alt="<?php echo $image['alt']; ?>" data-cycle-desc="slide-<?php echo $i; ?>" /></div>
            <?php $i++; endforeach; ?>
		</div><!--slideshow-->
	</div><!--slideshow-container-->
<?php endif;

if( $images ): ?>
	<div id="slideshow-2" class="slideshow-container gallery-container">
		<div id="cycle-2" class="cycle-slideshow"
	        data-cycle-slides="> div"
	        data-cycle-timeout="0"
	        data-cycle-prev="#slideshow-2 .carousel-prev"
	        data-cycle-next="#slideshow-2 .carousel-next"
	        data-cycle-caption="#slideshow-2 .custom-caption"
	        data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}}"
	        data-cycle-fx="carousel"
	        data-cycle-carousel-visible=4
	        data-cycle-carousel-fluid=true
	        data-allow-wrap=false
		>
            <?php $i = 1; ?>
            <?php foreach( $images as $image ): ?>
               <div><img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" data-cycle-desc="slide-<?php echo $i; ?>" /></div>
            <?php $i++; endforeach; ?>
		</div><!--thumbnail-container-->
		<div class="slideshow-nav thumbnail-nav">
			<a href="javascript:void(0)" id="prev" class="carousel-prev"></a>
			<a href="javascript:void(0)" id="next" class="carousel-next"></a>
		</div>
	</div><!--slideshow-2-->
<?php endif; ?>

• James

• March 30, 2016 at 12:41 pm

Hi @inhouse

You got the “Undefined index” error because the $images variable consists the gallery arrays now, not the image arrays. You need to loop the galleries first and then loop the images.

Another approach would be using array_merge() function like this:

$images = array();
foreach( $pages as $page ) { ?>
    <?php $images = array_merge($images, get_field('slideshow_images', $page->ID));
}

This page should give you more idea about it: http://php.net/manual/en/function.array-merge.php.

I hope this makes sense.

• inhouse

• March 30, 2016 at 11:35 pm

Yahoo! That’s awesome @james! I’ve used array_merge before but not exactly like this. Thanks so much for the help; it is much appreciated!

• inhouse

• May 5, 2016 at 4:21 am

@james I’m not sure what changed in a month’s time but this suddenly isn’t working. The parent page “Gallery” is not displaying the ‘slideshow_images’ images from the child pages the way it was. The child pages display their own images just fine using $images = get_field(‘slideshow_images’); but the parent page array_merg is failing somehow. Sorry to dredge this up again!

if ( is_page(19) ) { // Top level Gallery
	$pages = get_pages('child_of='.$post->ID.'&sort_column=menu_order&sort_order=asc');
	$count = 0;
	$images = array();
	foreach( $pages as $page ) {
		// Child page gallery images
		$images = array_merge($images, get_field('slideshow_images', $page->ID));
	}
	
} else {
	// Own page gallery images
	$images = get_field('slideshow_images');
}

if( $images ):
	$count=0; foreach( $images as $image ):
	$count++; endforeach; ?>
    <div id="slideshow-1" class="slideshow-container slideshow-countainer-<?php echo $count; ?> gallery-container">
		<div class="slideshow-nav">
			<a href="javascript:void(0)" id="prev" class="cycle-prev"></a>
			<a href="javascript:void(0)" id="next" class="cycle-next"></a>
		</div>
		<div id="cycle-1" class="cycle-slideshow"
	        data-cycle-slides="> div"
	        data-cycle-timeout="0"
	        data-cycle-prev="#slideshow-1 .cycle-prev"
	        data-cycle-next="#slideshow-1 .cycle-next"
	        data-cycle-caption="#slideshow-1 .custom-caption"
	        data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}}"
	        >
			<?php $i = 1; ?>
            <?php foreach( $images as $image ): ?>
                <div><img src="<?php echo $image['sizes']['gallery-large']; ?>" alt="<?php echo $image['alt']; ?>" data-cycle-desc="slide-<?php echo $i; ?>" /></div>
            <?php $i++; endforeach; ?>
		</div><!--slideshow-->
	</div><!--slideshow-container-->
<?php endif;

• James

• May 9, 2016 at 12:36 pm

Hi @inhouse

Could you please var_dump() several variables for me like the following?

foreach( $pages as $page ) {
    // Child page gallery images
    $images = array_merge($images, get_field('slideshow_images', $page->ID));
    
    echo "===== var dump of image =====";
    var_dump(get_field('slideshow_images', $page->ID));
}

echo "===== var dump of pages =====";
var_dump($pages);

echo "===== var dump of images =====";
var_dump($images);

Thanks 🙂

• inhouse

• May 9, 2016 at 10:38 pm

This reply has been marked as private.

• James

• May 10, 2016 at 12:36 pm

Hi @inhouse

It seems that one of the slideshow images is empty, so it shows a broken page. Could you please try the following code?

foreach( $pages as $page ) {
    // Child page gallery images
    $slideshow_images = get_field('slideshow_images', $page->ID);
    if( $slideshow_images ){
        $images = array_merge($images, $slideshow_images);
    }
}

Thanks 🙂

edit: change $slideshow to $slideshow_images. Thanks to @inhouse.

• inhouse

• May 10, 2016 at 11:10 pm

The $slideshow variable was incorrect. I changed it to $slideshow_images and it’s working again. Not sure if that is what broke or if your change fixed it but we’re golden now. I really appreciate your help in troubleshooting. Again, thanks so much!