Support

Account

Home Forums Front-end Issues Can't display gallery images inside flexible content

Solving

Can't display gallery images inside flexible content

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

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

  • Same problem here.

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

  • 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; ?>
    
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.