ACF and CSS Grid?

• acrossky

• July 13, 2020 at 12:13 pm

I am new to ACF and PHP so please forgive my obvious lack of experience. It would be nice to be able to use ACF to create a custom CSS Grid where the user is able to control the layout of individual images in the grid via ‘settings’. But I am not sure if this is possible with a repeater – or even at all.

I set up a repeater with nested sub-fields.

grid_image (repeater)
-image (image – array)
-settings (group)
–column_start (number)
–column_end (number)
–row_start (number)
–row_end (number)

Here is what I attempted.

<?php if( have_rows('grid_images') ):?>
    <?php while( have_rows('grid_images') ): the_row();
	
	    $image = get_sub_field('image');

        ?>
	<div class="aht_grid_gallery">
            <div class="grid_image">
            <img class="aht_gallery_img" src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" />
            </div>
	</div>
	
	<style type="text/css">
      .aht_grid_gallery {
		display: grid;
		grid-template-columns: repeat( auto-fill, minmax(300px, 1fr) );
		grid-template-rows: repeat(1, 1fr);
		grid-gap: 1vw;
		padding-bottom: 1vw;
}
	
	  .aht_gallery_img {
		width: 100%;
		height: 100%;
		object-fit: cover;
}
		<?php if( have_rows('settings') ): ?>
			<?php while( have_rows('settings') ): the_row();?>
	  .grid_image {
		grid-column-start: <?php the_sub_field('column_start'); ?>;
		grid-column-end: <?php the_sub_field('column_end'); ?>;
		grid-row-start: <?php the_sub_field('row_start'); ?>;
		grid-row-end: <?php the_sub_field('row_end'); ?>;
		}
			<?php endwhile; ?>
		<?php endif; ?>
		</style>
    <?php endwhile; ?>
<?php endif; ?>

This hasn’t worked for me. Is there a way to do it in ACF?

• acrossky

• July 13, 2020 at 12:27 pm

There are obvious problems unless one can give a specific identifier to each image. I saw in another thread that it is possible to do this:

<?php if( have_rows('grid_images') ): $i = 0; ?>
    <?php while( have_rows('grid_images') ): the_row(); $i++;
	
	    $image = get_sub_field('image');

        ?>
	<div class="aht_grid_gallery">
            <div class="grid_image__<?php echo $i; ?>">
            <img class="aht_gallery_img" src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" />
            </div>
	</div>
	

	<style type="text/css">
          .aht_grid_gallery {
		display: grid;
		grid-template-columns: repeat( auto-fill, minmax(300px, 1fr) );
		grid-template-rows: repeat(1, 1fr);
		grid-gap: 1vw;
		padding-bottom: 1vw;
}
	
	  .aht_gallery_img {
		width: 100%;
		height: 100%;
		object-fit: cover;
}
		
	  .grid_image__<?php echo $i; ?>{
		<?php if( have_rows('settings') ): ?>
			<?php while( have_rows('settings') ): the_row();?>
		
		grid-column-start: <?php the_sub_field('column_start'); ?>;
		grid-column-end: <?php the_sub_field('column_end'); ?>;
		grid-row-start: <?php the_sub_field('row_start'); ?>;
		grid-row-end: <?php the_sub_field('row_end'); ?>;
			<?php endwhile; ?>
		<?php endif; ?>
	}
	</style>
    <?php endwhile; ?>
<?php endif; ?>

This doesn’t work either…

• vipstephan

• July 14, 2020 at 6:13 am

“It doesn’t work” could mean anything. It’s clear that something doesn’t work because otherwise you wouldn’t be posting here. But please be more specific as to what exactly isn’t working. What is the output of the code? Is it not printing the values at all? Or perhaps it’s not even the PHP but an error in the CSS? Look at the output source code and see if it prints anything for the_sub_field('column_start'); etc. If that’s all working then the error is in the CSS itself.

I’m going to look over the fact that CSS should at least go into the header of the HTML document, not in the body, but definitely you need to address each image in the repeater individually (as in your second example) because otherwise the last value that is printed will style all images. But you can actually get the current row index inside a has_rows() loop with get_row_index(); no need for the incementing counter variable.

Now, I’m not too experienced with CSS grid yet, as I’ve mostly avoided it for reasons of browser support, but I’m skeptical about the row and column placement properties in combination with auto-fill columns and a fixed number of rows. If the user specifies to place the image in column 100 and row 10, how is that going to work with the specification of the grid template rows and columns? I think therein lies the actual problem; it’s not an ACF repeater issue.