Merge pull request #50 from KNR-PW/project_gallery

Add project gallery

content/project/selfie.md

@@ -6,6 +6,17 @@ start_date: 2017.01
 end_date: 2022.09
 short_description:
   "Projekt poświęcony budowaniu samochodów autonomicznych w skali."
+gallery_images:
+  - image: "/images/selfie/SelfieV3_bez_pokrywy.jpg"
+    description: "Selfie V3 Bez pokrywy"
+  - image: "/images/selfie/SelfieV3_z_pokrywa.jpg"
+    description: "Selfie V3 z pokrywą"
+  - image: "/images/selfie/Zespol_F1.jpg"
+    description: "Zespół Selfie na zawodach F1 TENHT"
+  - image: "/images/selfie/SelfieCarolo2020FullSkład.png"
+    description: "Zespół Selfie biorący udział w zawodach CaroloCup 2020"
+  - image: "/images/selfie/ZespolCarolo2022.jpg"
+    description: "Zespół Selfie biorący udział w zawodach CaroloCup 2022"
 ---
 
 Projekt Selfie w ramach Koła Naukowego Robotyków został powołany do życia w 2017 roku. Jego zadaniem było rozwijanie rozwiązań wykorzystywanych do budowania samochodów autonomicznych. Był on skoncentrowany głównie na budowie pojazdów autonomicznych w skali przygotowywanych do międzynarodowych zawodów takich jak [Carolo Cup](https://www.tu-braunschweig.de/carolo-cup/) w Niemczech, czy [F1 TENTH](https://f1tenth.org/).
@@ -96,7 +107,7 @@ Mimo wymienionych wyzwań nasz zespół zdołał zająć 3. miejsce w zawodach C
 ## Wkład naukowy
 
 Poza doświadczeniami zdobytymi przez zespół projekt Selfie pozostawił po sobie trwały ślad. Jest to zarówno wkład naukowy na który składają się publikacje powstałe w związku z konferencjami, jak i kilka prac dyplomowych, które powstały przy okazji projektu. Inną trwałą pozostałością projektu jest ogólnodostępne repozytorium kodu dostępne na GitHubie. Znajduje się tam nie tylko kod, lecz także dokumentacja pozwalająca zrozumieć w jaki sposób zbudowano systemy samochodu.
-
+example
 Konferencje
 
 - [Localization-based software architecture for 1:10 scale autonomous car](https://ieeexplore.ieee.org/document/8755418), Adam Gotlib; Kornelia Łukojć; Mateusz Szczygielski

layouts/project/single.html

@@ -1,5 +1,6 @@
 {{ partial "header.html" . }}
 
+<link rel="stylesheet" href="/css/gallery.css" />
 <section class="project-start">
   <div class="project-start__text">
     <div class="project-start__title">{{.Title}}</div>
@@ -39,10 +40,44 @@
         <div class="project__descr">
           {{.Content}}
         </div>
+        {{ if .Params.gallery_images }}
+          <h2>Galeria</h2>
+          <div class="scroll-container" onclick="myFunction(this);">
+            {{ range .Params.gallery_images }}
+              <img src="{{ .image }}" alt="{{ .description }}" onclick="myFunction(this);">
+            {{ end }}
+          </div> 
+          <!-- The expanding image mycontainer -->
+          <div class="expanded-img-container">
+            <!-- Expanded image -->
+            <img id="expanded-img">
+            <!-- Image text -->
+            <br>
+            <div id="imgtext" style="text-align:center"></div>
+          </div>
+        {{ end }}
       </div>
     </div>
   </div>
   <div class="square square-white"></div>
 </section>
 
+<script>
+  function myFunction(imgs) {
+    if (imgs.src === undefined) {
+      return;
+    }
+    // Get the expanded image
+    var expandImg = document.getElementById("expanded-img");
+    // Get the image text
+    var imgText = document.getElementById("imgtext");
+    // Use the same src in the expanded image as the image being clicked on from the grid
+    expandImg.src = imgs.src;
+    // Use the value of the alt attribute of the clickable image as text inside the expanded image
+    imgText.innerHTML = imgs.alt;
+    // Show the mycontainer element (hidden with CSS)
+    expandImg.parentElement.style.display = "block";
+  } 
+</script>
+
 {{ partial "footer.html" . }}</div>

static/admin/config.yml

@@ -1,5 +1,5 @@
 # do testowania lokalnego
-# local_backend: true #https://decapcms.org/docs/beta-features/#working-with-a-local-git-repository
+local_backend: true #https://decapcms.org/docs/beta-features/#working-with-a-local-git-repository
 
 locale: "pl"
 
@@ -26,6 +26,13 @@ collections:
       - {label: "Data rozpoczęcia projektu", name: "start_date", widget: "string", required: false}
       - {label: "Data zakończenia projektu", name: "end_date", widget: "string", hint: "Wypełnij tylko, jeśli projekt jest już zakończony", required: false}
       - {label: "Body", name: "body", widget: "markdown", required: false}
+      - label: "Zdjęcia do galerii projektu"
+        name: "gallery_images"
+        widget: "list"
+        required: false
+        fields:
+          - {label: "Zdjęcie", name: "image", widget: "image", required: true}
+          - {label: "Opis zdjęcia", name: "description", widget: "string", required: false}
       #TODO dodać listę obrazków na główną
   - name: "article" # Used in routes, e.g., /admin/collections/blog
     label: "Artykuł" # Used in the UI

static/css/gallery.css

@@ -0,0 +1,28 @@
+
+  /* The expanding image container (positioning is needed to position the close button and the text) */
+  .expanded-img-container {
+    position: relative;
+    display: none;
+    width:100%;
+    text-align: center;
+
+  }
+
+  div.scroll-container {
+    background-color: #333;
+    overflow: auto;
+    white-space: nowrap;
+    padding: 5px;
+    height: 130px;
+    text-align: center;
+  }
+
+  div.scroll-container img {
+    padding: 5px;
+    height: 120px;
+  }
+
+  .expanded-img-container img{
+    max-height:80%;
+    max-width:100%;
+  }