add gallery

src/apis/index.php

@@ -72,6 +72,7 @@ switch($_GET['query']) {
       } else if($_GET['type'] == 'works') {
         $item->type = $re['type'];
         $item->videos = $re['videos'];
+        $item->gallery = $re['gallery'];
         $item->exhibitions = array();
         $qx = mysqli_query($conn,"SELECT id,title FROM `exhibitions` WHERE id IN (".$re['exhibitions'].")");
         while($re = mysqli_fetch_array($qx)) {

src/app/detail/detail.component.html

@@ -4,6 +4,19 @@
       <button class="back icon-back" (click)="back()"></button>
       <h2 class="title">{{details.title}}</h2>
 
+
+      <div class="row no-gutters gallery" *ngIf="details.gallery && details.gallery.length">
+        <div class="col-12" *ngFor="let image of details.gallery"
+             [ngClass]="{'col-md-6': details.gallery.length < 4 && (details.gallery.length % 3) == 2,
+                          'col-md-12': details.gallery.length < 4 && (details.gallery.length % 3) == 1,
+                          'col-md-4': details.gallery.length >= 3}">
+          <div class="gallery-container">
+            <span class="gallery-title">{{image.title}}</span>
+            <img class="image" [src]="image.url">
+          </div>
+        </div>
+      </div>
+
       <div class="date-container" *ngIf="section == 'exhibitions'">
         <span class="date-indication" *ngIf="details.date_from != details.date_to">from</span>
         <span class="date-indication" *ngIf="details.date_from == details.date_to">on</span>

src/app/detail/detail.component.scss

@@ -43,6 +43,31 @@
       }
     }
 
+    .gallery {
+      padding-top: 40px;
+
+      .gallery-title {
+        font-size: $font-18;
+        font-weight: bold;
+        padding-bottom: 5px;
+      }
+
+      .gallery-container {
+        position: relative;
+        //padding-bottom: 56.25%;
+        height: 180px;
+
+        .image{
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+
     .videos {
       .video-title {
         font-size: $font-18;

src/app/detail/detail.component.ts

@@ -42,6 +42,7 @@ export class DetailComponent implements OnInit {
         e.code = e.url.split('/').pop()
         e.embed = this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${e.code}`)
       })
+      detail.gallery = detail.gallery ? JSON.parse(detail.gallery) : []
       this.details = detail
       console.log(response.item)