Reply To: ACF and CSS Grid?

• 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…