Gallery block: handle missing images

[rain2o]

All image fields aren't required in the image block, and if the editor doesn't provide one of them, instead it just shows "Picture 5" or whatever.

https://github.com/Myzwer/foothillschurch/blob/effc5bbf81497ae99f0561ab7849412fe9272bfd/components/blocks/gallery.php#L33-L67

Either make all images required, or make this block support missing images a little bit better. Either by adjusting the layout to only render the images with a value, or by providing a placeholder

---

A code optimization suggestion for gallery is that you could loop the images rather than having to declare each one.

There are two approaches you could take. Either echoing the non-picture block in one iteration, like this

<?php for ($i = 1; $i <= 5; $i++) {
    $mdOrder = $i <= 3 ? $i : $i + 1;
    if ($i === 5) { ?>
        <div class="col-span-6 md:col-span-4 md:order-4 bg-blue-gradient relative shadow-xl">
            <div class="absolute bottom-2 left-2 md:bottom-5 md:left-5">
                <?php if (have_rows('cta_box')) : ?>
                    <?php while (have_rows('cta_box')) : the_row(); ?>
                        <h2 class=" text-xl md:text-3xl font-bold uppercase text-left md:pb-2"><?php the_sub_field("title"); ?></h2>
                        <div class="text-left">
                            <a href="<?php the_sub_field("button_link"); ?>" class="text-left">
                                <button class="gallery-ghost text-left">
                                    <i class="fa-solid fa-arrow-right"></i> <?php the_sub_field("button_text"); ?>
                                </button>
                            </a>
                        </div>
                <?php endwhile;
                endif; ?>
            </div>
        </div>
    <?php } ?>
    <div class="col-span-6 md:col-span-4 md:order-<?php echo $mdOrder; ?>">
        <img src="<?php the_sub_field("picture_$i"); ?>" alt="">
    </div>
<?php } ?>

OR, you could use order for all screen sizes and echo the block outside of the loop.

<?php for ($i = 1; $i <= 5; $i++) {
    $mdOrder = $i <= 3 ? $i : $i + 1;
    $order = $i <= 4 ? $i : $i + 1;
?>
    <div class="col-span-6 md:col-span-4 order-<?php echo $order; ?> md:order-<?php echo $mdOrder; ?>">
        <img src="<?php the_sub_field("picture_$i"); ?>" alt="">
    </div>
<?php } ?>
<div class="col-span-6 md:col-span-4 order-5 md:order-4 bg-blue-gradient relative shadow-xl">
    <div class="absolute bottom-2 left-2 md:bottom-5 md:left-5">
        <?php if (have_rows('cta_box')) : ?>
            <?php while (have_rows('cta_box')) : the_row(); ?>
                <h2 class=" text-xl md:text-3xl font-bold uppercase text-left md:pb-2"><?php the_sub_field("title"); ?></h2>
                <div class="text-left">
                    <a href="<?php the_sub_field("button_link"); ?>" class="text-left">
                        <button class="gallery-ghost text-left">
                            <i class="fa-solid fa-arrow-right"></i> <?php the_sub_field("button_text"); ?>
                        </button>
                    </a>
                </div>
        <?php endwhile;
        endif; ?>
    </div>
</div>

I think the 2nd one is a little cleaner and easier to read personally.

[Myzwer]

Just made them required. I never want to see this without images present.