Populate collapsible sidebar with image list – PHP – SitePoint Forums

0

Hi, I have a gallery site – rivka-aderet.art – where I populate 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 "hi ";
    echo "
"; // start prv-nxt // end prv-nxt // start imgMain echo "
"; // echo "{$alt}"; if ( $count > 2) { echo "{$alt}"; } else { echo "{$alt}"; } echo "
"; echo "{$title}"; echo "

{$medium} {$year} {$size}

"; echo "
"; echo "
";

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;
}

That works well.
On the same page there is a collapsible sidebar which I want to fill with the same images that the foreach loop puts on the main page. What is the code I need to include in the above loop to do this?
Any help much appreciated


Share.

Comments are closed.