<?php declare(strict_types=1); ?>

<!-- Display a list of images in grid view -->
<?php if ($contentObjects): ?>

<div class="row">
    <?php $i = 1; foreach ($contentObjects as $content): ?>
    
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <a href="<?php echo $content->getUrl($targetFileName); ?>">
                <img class="img-thumbnail img-responsive" src="<?php echo $content->getCachedImage(400); ?>"
                <?php if ($content->caption): ?>
                    alt="<?php echo $content->escapeForXss('caption'); ?>" 
                    title="<?php echo $content->escapeForXss('caption'); ?>" />
                <?php else: ?>
                    alt="<?php echo $content->escapeForXss('title'); ?>" />
                <?php endif; ?>
            </a>
        </div>
        <?php if ($i % 2 === 0): ?><div class="clearfix d-none d-sm-block d-md-none"></div><?php endif; ?>
        <?php if ($i % 3 === 0): ?><div class="clearfix d-none d-md-block d-lg-none"></div><?php endif; ?>
        <?php if ($i % 4 === 0): ?><div class="clearfix d-none d-sm-block d-md-none d-lg-block d-xl-none"></div><?php endif; ?>
        	
    <?php $i++; endforeach; ?>
</div>

<?php endif; ?>