Can't display gallery images inside flexible content

• Miltos

• November 13, 2014 at 9:08 am

Hello,

I can’t figure out how to display the images of a gallery which is inside a flexible content.
My code is this:

// check if the flexible content field has rows of data
if( have_rows('content') ):

    // loop through the rows of data
    while ( have_rows('content') ) : the_row();

        // check current row layout
        if( get_row_layout() == 'photo_album' ):

            // check if the nested repeater field has rows of data
            if( have_rows('photo_gallery') ):

                echo '<div id="thumbs-big">';

                // loop through the rows of data
                while ( have_rows('photo_gallery') ) : the_row();

                    $image = get_field('image');

                    echo '<a href="' . $image['url'] . '" title="' . $image['alt'] . '" style="background-photo:url(' . $image['url'] . ')"></a>';

                endwhile;

                echo '</div>';

            endif;

        elseif( get_row_layout() == 'video_player' ):

            the_sub_field('video_link');   

        elseif( get_row_layout() == 'text_area' ):

            the_sub_field('text_area');   

        endif;
     
    endwhile;

else :

    // no layouts found

endif;

The output i get from the gallery is this:

<div id="thumbs-big">
<a style="background-photo:url()" title="" href=""></a>
<a style="background-photo:url()" title="" href=""></a>
<a style="background-photo:url()" title="" href=""></a>
</div>

The text fields display fine.
From the support they told me that the gallery field is a single array that contains the images as sub arrays and that i should use get_sub_field.
But I had no luck with that.
I should also mention that a gallery works fine outside the flexible content by using this code:

        <div class="thumbs-big">
            <?php
            $images = get_field('photo_album2');
            if( $images ): ?>
        
            <?php foreach( $images as $image ): ?>
            <a href="<?php echo $image['url']; ?>" data-gallery="<?php echo $post->ID ?>" title= "<?php echo $image['alt']; ?>" style="background-image:url(<?php echo $image['sizes']['thumbnail']; ?>)"></a>
            <?php endforeach; ?>
        <?php endif; ?>
        </div>

I would appreciate if someone could tell me how to modify the flexible content code in order to retrieve the images.
(I use ACF 5.1.3 and wordpress is up to date).
Thanks!

• Miltos

• November 13, 2014 at 5:51 pm

Actually the above code needs $image = get_sub_field(‘image’); in order to populate the list but the fields remain empty no matter what i tried.
I suppose there is no ‘image’ field inside the gallery but how is it called?

• AH

• November 15, 2014 at 9:38 am

Same problem here.

• Miltos

• November 15, 2014 at 10:34 am

A simpler version of the problem with clean wordpress install and twentyfourteen theme:
What I did:

– Created an about page
– Assigned the about page to the full width template.
– Created a new ACF field group assigned to the about page.
-Added a new flexible content field with slug multicontent.
– Added a new layout called gallery.
-Added a Gallery field inside this layout called images.
– Then added another layout called single_image
– and finally added inside this layout an image field called image.

THE CODE:

<?php

// check if the flexible content field has rows of data
if( have_rows('multicontent') ): // success

     // loop through the rows of data
    while ( have_rows('multicontent') ) : the_row();   // success

        // check current row layout
        if( get_row_layout() == 'gallery' ):   // success

            // check if the nested repeater field has rows of data
            if( have_rows('images') ):   // success

                 echo '<ul>';

                 // loop through the rows of data
                while ( have_rows('images') ) : the_row();   // success

                    $image = get_sub_field('image');   // Problem! retrieves nothing

                    echo '<li><img src="' . $image['url'] . '" alt="' . $image['alt'] . '" /></li>'; // displays the list but with no links even if i remove the ['url'] array parts

                endwhile;

                echo '</ul>';

            endif;

        elseif( get_row_layout() == 'single_image' ):  // success

            $one_image = get_sub_field('image');   // success

            echo '<img src="' . $one_image['url'] . '" />';   // success

        endif;

    endwhile;

else :

    // no layouts found

endif;

?>

THE OUTPUT:

<ul>
<li><img alt="" src=""></li>
<li><img alt="" src=""></li>
<li><img alt="" src=""></li>
</ul>

<img src="http://localhost/wpsimple/wp-content/uploads/2014/11/foliothumb2.jpg">

I wonder if anyone can replicate this problem or is it just me.
If there is an obvious mistake in the code above I would appreciate your feedback.

• davemccourt

• February 6, 2015 at 1:00 am

I know this post is from a while ago now but I had a similar issue. I solved it like so:

    <?php if (have_rows('flexible_content')) : 

        while (have_rows('flexible_content')) : the_row();

           if (get_row_layout() == 'images_row'):

               $header = get_sub_field('heading'); ?>
               <div class="block-text-centered">
                    <h2 class="upper grey"><?php echo $header;?></h2>
               </div>

               <?php $rows = get_sub_field('images');

                if ($rows) : ?>
                    <div class="pure-g">
                    <?php foreach ($rows as $row) : $img = wp_get_attachment_image_src($row['ID'], 'thumbnail'); ?>
                        <div class="pure-u-1-5 client-logo">
                            <img src="<?php echo $img[0]; ?>" alt="<?php echo $row['alt']; ?>">
                        </div>
                <?php endforeach; ?>
                    </div>
                <?php endif;

            endif; 

        endwhile;

    else :

    endif; ?>