Support

Account

Home Forums Add-ons Gallery Field Get Gallery Field Images of Child Pages on Parent

Solved

Get Gallery Field Images of Child Pages on Parent

  • 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; ?>" />
    ...
    
  • 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 πŸ™‚

  • 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; ?>
    
  • 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.

  • 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!

  • @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;
    
  • 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 πŸ™‚

  • This reply has been marked as private.
  • 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.

  • 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!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.