Home Forums Add-ons Repeater Field Custom CSS Grid with Repeater Field? Reply To: Custom CSS Grid with Repeater Field?

  • 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'] ); ?>" />
    	<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; ?>
        <?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.