Custom CSS Grid with Repeater Field?

• acrossky

• July 13, 2020 at 5:43 am

I am new to ACF and PHP so forgive my obvious lack of experience. A thought came to mind this morning that it would be awesome to be able to use ACF to create a custom CSS Grid where I could control the layout of individual images in the grid via ‘settings’. But I am not sure if it is possible to do it 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') ): $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; ?>

Anyway, it doesn’t seem to work, which I kind of expected, but I thought I would see if there were a way to achieve this? It would be extremely useful for creating custom CSS Grids on the fly.

• acrossky

• July 13, 2020 at 5:49 am

I am new to ACF and PHP so forgive my obvious lack of experience. A thought came to mind this morning that it would be awesome to be able to use ACF to create a custom CSS Grid where I could control the layout of individual images in the grid via ‘settings’. But I am not sure if it is possible to do it 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') ): $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; ?>

Anyway, it doesn’t seem to work, which I kind of expected, but I thought I would see if there were a way to achieve this? It would be extremely useful for creating custom CSS Grids on the fly.