Fill collapsible sidebar with list of images

Hi I have a gallery site - rivka-aderet.art - where I fill the page from a foreach loop:

foreach ($galleryRivka as $entry) {
          $image = $entry['imgMain'];
          $title = $entry['titleEng'];
          $size = $entry['width']." x ".$entry['height']."cm";
          $captPos = $entry['captionPos'];
          $year = $entry['year']."    ";
          $medium = $entry['medium'];
          $alt = $entry['alt'];
          $setMed = "oil";
          if ($_GET['med'] == "acrylic") {
                        $setMed = "acrylic";
          }
          if (($setMed == 'oil' && $entry['medium'] == 'Oil on canvas') ||
             ($setMed == 'acrylic' && $entry['medium'] != 'Oil on canvas'))
              {
             $count++;
             $lstNum = $count;
             $nxtNum = $count + 1;
             echo "<a id='pic{$count}'><span style='visibility: hidden;'>hi</span></a> ";
    echo "<div class='grid-container'> ";
           // start prv-nxt

             // end prv-nxt

             // start imgMain 
        echo "<div class='imgMain'>";
   //         echo "<img class='example lazyload'  id='width{$count}' src='{$imagesDirectory}{$image}' alt='{$alt}' data-src='{$imagesDirectory}{$image}' data-sizes='auto' data-magnify-src='{$imagesDirectory}{$image}'>";
         if ( $count > 2) {
           echo "<img class='example' loading='lazy' id='width{$count}' src='{$imagesDirectory}{$image}' alt='{$alt}' data-sizes='auto' data-magnify-src='{$imagesDirectory}{$image}'>";
              } else {
            echo "<img class='example' loading='eager'  id='width{$count}' src='{$imagesDirectory}{$image}' alt='{$alt}' data-sizes='auto' data-magnify-src='{$imagesDirectory}{$image}'>";
                         }            
            echo "<details open>";
            echo "<summary>{$title}</summary>";
            echo "<p>{$medium} {$year} {$size}</p>";
            echo "</details>";
        echo "</div>";

CSS:

         .grid-container {
                  display: grid;
                  grid-template-columns: 12vw 70vw auto;
                  grid-template-rows: 1fr 1fr;
                  padding: 10px;
                  margin: 0;
                  max-height: 80vh;
                  grid-gap: 0;
                  grid-template-areas:
                  'offCanvas imgMain-area lableTxt-area'
                  'offCanvas imgMain-area prv-nxt-area';
                  margin-top: 10vh;
                  margin-bottom: 20vh;
                  height: 80vh;
}
.sideImg {
  object-fit: scale-down;
  max-width: 15vw; 
       max-height: 24vh; 
  width: 10vw;
margin-bottom: -7vh;
margin-left: 0;
}
.sidenav {
  grid-area: offCanvas;    
  margin-top: 14vh;
  height: 80%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #D9D1E1;
  overflow-x: hidden;
  transition: 0.5s;
}

This is working ok.
On the same page there’s a collapsible sidebar that I want to populate with the same images that the foreach loop puts on the main page. What’s the code I need to include in the above loop to do this?
Any help much appreciated

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.