Home › Forums › Front-end Issues › 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?
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; ?>
The topic ‘Can't display gallery images inside flexible content’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.