Accessing Gallery Images by Index number

• aaron4osu

• January 7, 2022 at 12:38 pm

I’m trying to figure out how to access the first 5 images in the gallery via index number, then loop through the rest(see screenshot).

here is my static html that I’m trying to recreate.

<section class="hero-lightbox image-grid-lightbox">
  <div class="container-xxl">
    <div class="row g-0">

      <div class="col-sm-6 full">
        <figure>
          <a class="d-block" href="">
            <img width="1920" height="1280" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/cabin1/8.jpg" class="img-fluid" alt="" data-caption="1">
          </a>
        </figure>
      </div><!-- close col -->

      <div class="col-sm-6 half">
        <div class="row g-0">
          
          <div class="col-md-6">
            <figure>
              <a class="d-block" href="">
                <img width="1920" height="1280" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/cabin1/10.jpg" class="img-fluid" alt="" data-caption="2">
              </a>
            </figure>
          </div><!-- close inner col -->

          <div class="col-md-6 d-none d-md-block">
            <figure>
              <a class="d-block" href="">
                <img width="1920" height="1280" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/cabin1/11.jpg" class="img-fluid" alt="" data-caption="3">
              </a>
            </figure>
          </div><!-- close inner col -->

          <div class="col-md-6 d-none d-md-block">
            <figure>
              <a class="d-block" href="">
                <img width="1920" height="1280" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/cabin1/12.jpg" class="img-fluid" alt="" data-caption="4">
              </a>
            </figure>
          </div><!-- close inner col -->

          <div class="last_photo col-md-6">
            <figure>
              <a class="d-block" href="">
                <img width="1920" height="1280" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/cabin1/2.jpg" class="img-fluid" alt="" data-caption="5">
                <div class="show_more">
                  <button class="btn btn-light"><i class="fas fa-grip-horizontal"></i> Show All Photos</button>
                </div>
              </a>
            </figure>
            
          </div><!-- close inner col -->

          <div class="d-none">
            <figure>
              <a class="d-block" href="">
                <img width="1920" height="1280" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/cabin1/1.jpg" class="img-fluid" alt="" data-caption="hidden">
              </a>
            </figure>
          </div><!-- close inner col -->

          <div class="d-none">
            <figure>
              <a class="d-block" href="">
                <img width="1920" height="1280" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/cabin1/2.jpg" class="img-fluid" alt="" data-caption="hidden">
              </a>
            </figure>
          </div><!-- close inner col -->

        </div><!-- close inner row -->
      </div><!-- close col -->
    </div><!-- close row -->
  </div>
</section>

I always have a tough time with array syntax.
Basically in pseudocode this is what I’m trying to do

$cabin_photo_gallery = get_field('cabin_photo_gallery');
$large = 'hero'; // custom size in my functions file

$cabin_photo_1_url = // get url of first image in gallery with $size size.
$cabin_photo_2_url = // get url of 2nd image in gallery with $size size. 
$cabin_photo_3_url = // get url of 3rd image in gallery with $size size. 
$cabin_photo_4_url = // get url of 4th image in gallery with $size size.
$cabin_photo_5_url = // get url of 5th image in gallery with $size size. 

//then loop through the remaining

fyi… this gallery has a return type of image array

• John Huebner

• January 9, 2022 at 10:51 am

If you are trying to do something different with each image based on the number then the best way to do this is to do that inside of the loop.

$count = 0; // keep track of what image is being used
foreach ($cabin_photo_gallery as $image) {
  if ($count < 5) {
    // one of first 5
  } else {
    // the rest
  }
}

• aaron4osu

• January 10, 2022 at 8:48 am

thanks John, but there should be a way to access specific image by the index value right? I need to do something different with each of the first 5 values and that’s a lot of unnecessary code to create an if statement for each.

• John Huebner

• January 10, 2022 at 8:57 am

$cabin_photo_gallery[0]; // would be the first image 1 == image 2 etc

// index 5 = image 6
for ($i=4; $i<count($cabin_photo_gallery); $i++) }
  // do something with $cabin_photo_gallery[$i];
}