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