Help with inserting correct code for an image repeater

• Sebbelito

• March 8, 2021 at 8:55 pm

Hey guys

We use ACF Pro for our company website. I have a repeater field set up which only displays images. When using an empty template file, only inserting the repeater code to collect one image everything is working fine and the image is showing up as expected.

Above mentioned code looks like this:

<?php

if( have_posts() ) : while( have_posts() ) : the_post(  );

the_content(); ?>

<!-- Simple text field -->
<h2 style="margin: 10rem 0"><?php the_field('test-titel'); ?></h2>

<!-- Repeater field -->
<?php if( have_rows( 'post_image' ) ) :

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

   $image = get_sub_field( 'the_image' ); 
   
   echo '<pre>'
      print_r( $image )
   echo '</pre>'
   
   ?>

   <img style="max-width: 100%" src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">

<?php endwhile; endif; ?>

<?php endwhile; endif; ?>

However when inserting the same code in the actual template file together with everything else (like get_header(), html and so on…) the image doesn’t appear anymore.

Also I’m not a fan of squeezing in lots of php code inside the existing html so I’d prefer to put it all above. However I’m not sure if this is possible – if this is what makes it break.

Because when inserting it at the top of the php file (before the html starts in order to make less of a mess) all content disappears and only header and footer is displayed. See excerpt below of my inserted code.

<?php get_header(); ?>

<?php
   // The loop
   if( have_posts() ) : while( have_posts() ) : the_post();

   // Custom image field
   if( have_rows( 'post_image' ) ) :

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

      $image = get_sub_field( 'the_image' ); ?>

<!-- CATEGORY LAYOUT -->
<div id="kits-main">

   <div class="header-group">
      <p class="header-group__header text-center">tjänster

      <img src="<?php echo get_theme_file_uri( '/images/brand-separator-sm.svg' ); ?>" alt="" class="brand-separator" role="presentation">
         <div class="kits-brand">
            <div class="kits-brand__wrapper">
               <p class="kits-brand__name"><?php the_title(); ?>

               <p class="kits-brand__meaning">something something

            </div>
         </div>
      </div>

<div class="container-lg">

   <!-- BREADCRUMBS AND STUFF STILL NOT IMPLEMENTED -->

   <!-- First pair of boxes -->
   <div class="row">
      <div class="col-lg-6 p-0">
         <div class="column--1">
            <div class="content-wrapper constrained">

               <?php if( !empty( $image ) ): ?>
               <img class="box-img box-img-1" 
               src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
               <?php endif; ?>

            </div> <!-- End .content-wrapper -->
         </div> <!-- End .box-column--1 -->
      </div> <!-- End .col-6 p-0 -->

Last in the php document I close the ifs and whiles.

<?php endwhile; endif;?>
<?php endwhile; endif; ?>

<?php get_footer(); ?>

The result is that nothing is returned, at all. ALL the html is stripped out.

Earlier I put everything inside the div with class .content-wrapper .constrained and while it still didn’t produce any result, at least the other content still showed up as usual. I don’t like this approach though since it’s terribly messy.

Details:
Wp theme used: UnderStrap (latest)
ACF Pro version: 5.9.5
ACF Plugins installed: None

Any help is highly appreciated!

• John Huebner

• March 10, 2021 at 7:01 am

I can’t tell by reading the code that you’ve provide what the cause might be. I would start by commenting out some stuff (or removing it all) and add it back a little at a time till you figure out exactly what causes it to break.

• manonatelier

• January 7, 2022 at 9:33 pm

I’m having the same issue. All html is stripped out in repeater fields.