Display gallery of images

Hi,
Trying to display all images in a folder together with their Title and size as a gallery with the following code:

  <div class="pic">
    <?php foreach($page->images() as $image): ?>
  <figure>
    <?php if($image = $page->image()): ?>
      <div class="box">
       <img src="<?= $image->url() ?>" alt="missing image">
    </div>
         <?php endif ?>

    <div class="inline">
      <span class="pic-tit">
            <?= $image->Title() ?>
      </span>
      <span class="pic-siz">
          <?= $image->WxH() ?>
      </span>
        </div>
  </figure>
  <?php endforeach ?>
</div>

but I’m only getting the first image in the folder.
How do I change this to get all images in folder on the page.

Thanks for any help

Hi,

Your additional if is not needed, because you’re already working with a collection of images (set in your for-loop). In that if-clause you’re basically saying when the current $image is equal to the first image of the $page, go ahead.

This should work (untested):

<div class="pic">
    <?php foreach($page->images() as $image): ?>
        <figure>
            <div class="box">
                <img src="<?= $image->url() ?>" alt="missing image">
            </div>

            <div class="inline">
                <span class="pic-tit">
                    <?= $image->Title() ?>
                </span>
                <span class="pic-siz">
                    <?= $image->WxH() ?>
                </span>
            </div>
        </figure>
    <?php endforeach ?>
</div>

In addition to @bvdputte’s solution, you probably only want to show a gallery if the page has images:


<?php if ($page->hasImages()) : ?>

<div class="pic">
    <?php foreach($page->images() as $image): ?>
        <figure>
            <div class="box">
                <img src="<?= $image->url() ?>" alt="missing image">
            </div>

            <div class="inline">
                <span class="pic-tit">
                    <?= $image->Title() ?>
                </span>
                <span class="pic-siz">
                    <?= $image->WxH() ?>
                </span>
            </div>
        </figure>
    <?php endforeach ?>
</div>
<?php endif ?>

Consider using a figcaption element instead of the div inside your figure for semantic HTML: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure. You probably don’t need the div wrapper around your image.

Don’t forget to the fill in the alt tags properly too :slight_smile:

Hi, Haven’t succeeded in getting this to display as a one page scrolling gallery, still displays 1 image at a time.
Here’s a screen shot of the oil-paintings folder:


css style:

    img {
      max-width: 80%;
      height: auto;
    }

    .pic {
      text-align: center;
      max-width: 60em;
      margin: 2em auto 4em;
    }
    .pic .box {
      margin: 2em;
      object-fit: contain;
      margin-bottom: 1em;
    }
    .pic img {
      box-shadow: 6px 6px 8px rgba(0,0,0,0.4);
      width: auto;
     max-height: 90vh;
    }
    .grid-wrapper {
      min-width: 100%;
      display: grid;
      grid-template-rows: 2rem auto;
      grid-template-columns: repeat(10, [col-start] 1fr);
      grid-template-rows: auto 574px;
      grid-gap: 20px;
      grid-row-gap: 0;
      justify-items: center;
      text-align: center;
    }

    .grid-wrapper > * {
      grid-column: col-start / span 10;
    }
.pic {grid-column: col-start / span 10;
      padding 0;
      margin: 0}
select {width: 100%;
        font-size: 1.25em;}
  .inline {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: nowrap;
            min-width: 100%;
          }
</style>

and this is oil.php:

<?php snippet('header') ?>
        </div><!--.wrap-->
    </div><!--#header-->
    <?php  /*
    below is menu
    <ul>
      <?php foreach ($site->children()->listed() as $subpage): ?>
         <li> <a style="font-size: 1.5em" href="<?= $subpage->url() ?>"><?= $subpage->title() ?></a></li>
      <?php endforeach ?>
    </ul>
    */ ?>
    <!--
    <input type="checkbox" id="nav-trigger" class="nav-trigger" />
    <label for="nav-trigger"></label>
  -->
    <div class="grid-wrapper">
                  <div class="inline">

                    <span class="hdr">
                                   <a class="logo" href="<?= $site->url() ?>">
                                     <h1 style="margin-top: -1rem; font-size: 1.5em">
                                      Oil Paintings
                                     </h1>
                                    </a>
                     </span>
                     <div class="lr-arw">
                         <span style="float: right">
                           <?php if ($page->hasNextListed()): ?>
                             <a href="<?= $page->nextListed()->url() ?>"> <p id="triangle-right"> </p></a>
                           <?php endif ?>
                         </span>
                         <span  style="float: left">
                           <?php if ($page->hasPrevListed()): ?>
                               <a href="<?= $page->prevListed()->url() ?>"> <p id="triangle-left"> </p></a>
                           <?php endif ?>
                         </span>
                     </div>

                  </div><!-- end inline -->
                   <?php if ($page->hasImages()) : ?>

                   <div class="pic">
                       <?php foreach($page->images() as $image): ?>
                           <figure>
                               <div class="box">
                                   <img src="<?= $image->url() ?>" alt="missing image">
                               </div>

                               <div class="inline">
                                   <span class="pic-tit">
                                       <?= $image->Title() ?>
                                   </span>
                                   <span class="pic-siz">
                                       <?= $image->WxH() ?>
                                   </span>
                               </div>
                           </figure>
                       <?php endforeach ?>
                   </div>
                   <?php endif ?>
  </div>

  <div>
            <?php snippet('footer') ?>

    </div><!--#footer-->

Thanks for any help

But each oil type page only seems to have a single image… So the result is not surprising.