Hi,
I am uploading some cover images for a project however, I am not able to get them to all follow the same sizing and aspect ratio. I tried both the resize and crop feature but nothing worked.
My current problem:
What I want it to look like:
My code is as follows:
<div class="container-fluid mt-5">
<ul>
<?php foreach ($projectsPage->children() as $project): ?>
<li class="section d-flex mx-auto">
<div class="carousel">
<ul class="ul draggable">
<!-- Project Tags -->
<li class="li d-flex project-info">
<?php snippet('tags', compact('project')) ?>
<!-- Project Cover -->
<figure class="d-flex w-100">
<?php if ($cover = $project->cover()): ?>
<img src="<?= $cover->resize(null, 800)->url() ?>" alt="<?= $cover->alt() ?>">
<?php endif ?>
<figcaption class="hidden mx-5 summary">
<?= $project->text() ?>
</figcaption>
</figure>
</li>
<!-- End of Project Tags -->
<!-- Project Images -->
<?php foreach ($project->images()->offset(1) as $image) : ?>
<li class="li hidden">
<?php if ($image->caption()->isNotEmpty()) : ?>
<figure class="d-flex w-100">
<img src="<?= $image->resize(null, 800)->url() ?>" alt="<?= $image->alt() ?>" />
<figcaption class="mx-5 summary">
<?= $image->caption()->smartypants() ?>
</figcaption>
</figure>
<?php else: ?>
<figure class="w-100 mx-2">
<img src="<?= $image->resize(null, 800)->url() ?>" alt="<?= $image->alt() ?>" />
</figure>
<?php endif ?>
</li>
<?php endforeach ?>
<!-- End of Project Images -->
</ul>
</div>
</li>
<?php endforeach ?>
</ul>
</div>