Output multiple images in specific locations

• optimystery

• March 18, 2019 at 7:09 am

Hi,

I am quite new to PHP, so relying on the documentation examples to get the functionality I need.

I want to recreate this layout.
Because of the layout and using Bootstrap, I cannot just loop through images with the same html for each one.

Initially I tried with the repeater field and returning a specific row/id, but could not get that to work. Since it is only 6 images (plus the featured image) I just created them as duplicated individual fields. This will be fine for the client to use.

Now I am using this code, in order to have control of the image size. Ideally I would also get it working with responsive images (smaller ones for mobile).

So, I’m new to PHP and this works, but there must be a cleaner and better way to share those variables and just be able to reference image_1, image_2 etc.

    <div class="col-md-6"> 
                 
        <?php

        $image = get_field('v_image_1');

        if( !empty($image) ): 

            // vars
            $url = $image['url'];
            $alt = $image['alt'];

            // thumbnail
            $size = 'project-thumb';
            $thumb = $image['sizes'][ $size ];
            $width = $image['sizes'][ $size . '-width' ];
            $height = $image['sizes'][ $size . '-height' ];
            ?>

            <a href="<?php echo $url; ?>" data-fancybox="gallery">
                <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
            </a>
        <?php endif; ?>

    </div>

    <div class="col-md-6"> 
        <?php $image2 = get_field('v_image_2');

        if( !empty($image) ): 

            // vars
            $url = $image2['url'];
            $alt = $image2['alt'];

            // thumbnail
            $size = 'project-thumb';
            $thumb = $image2['sizes'][ $size ];
            $width = $image2['sizes'][ $size . '-width' ];
            $height = $image2['sizes'][ $size . '-height' ];
            ?>

            <a href="<?php echo $url; ?>" data-fancybox="gallery">
                <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
            </a>  

          <?php endif; ?>
    </div>
</div>