Change Gallery Design & Add Video into Gallery

content/dates/2022-07-30-Gazafonds.md

@@ -11,6 +11,8 @@ Festival Rock à Fond organisé par les Gazafond à Manziat (01570)
 {{<load-photoswipe>}}
 
 ### Photos
+{{<gallery>}}
   {{<figure src="/images/2022-07-30/IMG_20220730_200333.jpg">}}
   {{<figure src="/images/2022-07-30/IMG_20220730_202412.jpg">}}
   {{<figure src="/images/2022-07-30/IMG_20220730_202417.jpg">}}
+{{</gallery>}}

content/dates/2022-10-11-MatinaleOzK.md

@@ -26,5 +26,5 @@ Matinale Musicale de 7:00 à 8:00 place Charles Hernu à Charpennes, sur une id
 {{< /gallery >}}
 
 ## Vidéo
-{{< peertube src="https://tube.pustule.org/videos/embed/7c3bd887-bf16-4acd-bc6b-baa581311b87?warningTitle=0&p2p=0" >}}
+{{< peertube class="marginHorizontal" src="https://tube.pustule.org/videos/embed/7c3bd887-bf16-4acd-bc6b-baa581311b87?warningTitle=0&p2p=0" >}}
 

content/gallery/_index.md

@@ -1,5 +1,5 @@
 ---
-title: "Nos Photos"
+title: "Nos Photos & Vidéos"
 metaTitle: "OzK - Nos Photos"
 type: page
 ---
@@ -7,20 +7,34 @@ type: page
 
 Vous avez des photos, vidéos ou enregistrements de nous qui traînent sur votre téléphone intelligent ? [Faites-les-nous parvenir par mail !](mailto:pot.punkuezrevo@overzeuknup.top?subject=Photos%20et%20Vidéos%20OzK)
 
+### Matinale OzK - 11 Octobre 2022
+
+{{<gallery class="galleryMarginHorizontal" >}}
+  {{<figure src="/images/2022-10-11/20221011_073144.jpg" boxClass="twoTilesBoxes">}}
+  {{<figure src="/images/2022-10-11/20221011_075140.jpg" boxClass="twoTilesBoxes">}}
+{{</gallery>}}
+{{< peertube class="marginHorizontal" src="https://tube.pustule.org/videos/embed/7d1fa334-04a4-4312-9e03-4f02b287196e?warningTitle=0&p2p=0" >}}
+
+
 ### Rock à Fond - Manzia - 30 juillet 2022
 
-{{<figure src="/images/2022-07-30/IMG_20220730_202417.jpg">}}
+{{<gallery class="galleryMarginHorizontal" >}}
+  {{<figure src="/images/2022-07-30/IMG_20220730_200333.jpg" boxClass="twoTilesBoxes">}}
+  {{<figure src="/images/2022-07-30/IMG_20220730_202417.jpg" boxClass="twoTilesBoxes">}}
+{{</gallery>}}
 
 ### Pont de l'Université - 15 avril 2022
 
-{{<figure src="/images/2022-04-15/Ds11mXklAMXQbNWnSH6V.jpg">}}
+{{<figure class="marginHorizontal" src="/images/2022-04-15/Ds11mXklAMXQbNWnSH6V.jpg">}}
 
 ### Passerelle du Palais de Justice - 12 décembre 2021
 
-{{<figure src="/images/2021-12-12/IMG_20211212_133505.jpg">}}
+{{<gallery class="galleryMarginHorizontal" >}}
-{{<figure src="/images/2021-12-12/IMG_20211212_133511.jpg">}}
+  {{<figure src="/images/2021-12-12/IMG_20211212_133505.jpg" boxClass="twoTilesBoxes">}}
+  {{<figure src="/images/2021-12-12/IMG_20211212_133511.jpg" boxClass="twoTilesBoxes">}}
+{{</gallery>}}
 
 ### Autres
 
-{{<figure src="/images/2020-01-01%20Nouvel%20An.jpg">}}
+{{<figure class="marginHorizontal" src="/images/2020-01-01%20Nouvel%20An.jpg">}}
 

content/repository/_index.md

@@ -9,15 +9,15 @@ type: page
 
 **La St Funny du Nouveau Knup**  
 
-{{<audio src="/audio/StFunny.mp3" caption="Symphonie du Nouveau Monde de Dvořák, dérangée par OzK - 2022 OzK">}}
+{{<audio class="marginHorizontal" src="/audio/StFunny.mp3" caption="Symphonie du Nouveau Monde de Dvořák, dérangée par OzK - 2022 OzK">}}
 
 **Hashi de T&Tea Fumé**  
 
-{{<audio src="/audio/TNT.mp3" caption="TNT de ACDC feat Smoke on the Water de Deep Purple, dérangés par Debs - 2022 OzK">}}
+{{<audio class="marginHorizontal" src="/audio/TNT.mp3" caption="TNT de ACDC feat Smoke on the Water de Deep Purple, dérangés par Debs - 2022 OzK">}}
 
 **Deudeuche Land**  
 
-{{<audio src="/audio/DeudeucheLand.mp3" caption="Deutschland de Rammstein, dérangé par PVR - 2022 OzK">}}
+{{<audio class="marginHorizontal" src="/audio/DeudeucheLand.mp3" caption="Deutschland de Rammstein, dérangé par PVR - 2022 OzK">}}
 
 # Nos Partitions
 

layouts/shortcodes/figure.html

@@ -8,7 +8,7 @@ Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
 {{- $.Page.Scratch.Add "figurecount" 1 -}}
 <!-- use either src or link-thumb for thumbnail image -->
 {{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
-<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
+<div class="{{ with .Get "boxClass" | default "threeTilesBoxes" }}{{.}}{{end}} {{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
   <figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
     <div class="img"{{ if .Parent }} style="background-image: url('{{ $thumb | relURL }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
       <img itemprop="thumbnail" src="{{ $thumb | relURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->

layouts/shortcodes/gallery.html

@@ -6,7 +6,7 @@ Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
 {{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href={{ "css/hugo-easy-gallery.css" | relURL }} />{{ end }}
 {{- $.Page.Scratch.Add "figurecount" 1 }}
 {{ $baseURL := .Site.BaseURL }}
-<div class="gallery caption-position-{{ with .Get "caption-position" | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .Get "caption-effect" | default "slide" }}{{.}}{{end}} hover-effect-{{ with .Get "hover-effect" | default "zoom" }}{{.}}{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
+<div class="gallery {{ with .Get "class"}}{{.}}{{end}}  caption-position-{{ with .Get "caption-position" | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .Get "caption-effect" | default "slide" }}{{.}}{{end}} hover-effect-{{ with .Get "hover-effect" | default "zoom" }}{{.}}{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
 	{{- with (.Get "dir") -}}
 		<!-- If a directory was specified, generate figures for all of the images in the directory -->
 		{{- $files := readDir (print "/static/" .) }}
@@ -21,7 +21,7 @@ Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
 				{{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- filename of thumbnail image -->
 				{{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? --> 
 				{{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }}<!-- absolute URL to thumbnail image -->
-				<div class="box">
+				<div class="{{ with .Get "boxClass" | default "threeTilesBoxes" }}{{.}}{{end}}">
 				  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 				    <div class="img" style="background-image: url('{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}');" >
 				      <img itemprop="thumbnail" src="{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}" alt="{{ $caption }}" /><!-- <img> hidden if in .gallery -->

static/css/hugo-easy-gallery.css

@@ -9,8 +9,6 @@ Grid Layout Styles
 */
 .gallery {
     overflow: hidden;
-    margin: 10px;
-    max-width: 768px;
 }
 .gallery .box {
     float: left;
@@ -19,27 +17,25 @@ Grid Layout Styles
     width: 100%;
     padding-bottom: 100%; 
 }
-@media only screen and (min-width : 365px) {
+
-    /* Tablet view: 2 tiles */
+.gallery .twoTilesBoxes {
-    .gallery .box {
+    float: left;
+    position: relative;
     width: 50%;
     padding-bottom: 50%;
 }
-}
+
-@media only screen and (min-width : 480px) {
+.gallery .threeTilesBoxes {
-    /* Small desktop / ipad view: 3 tiles */
+    float: left;
-    .gallery .box {
+    position: relative;
     width: 33.3%;
     padding-bottom: 33.3%; /*  */
 }
-}
+
-@media only screen and (min-width : 9999px) {
+.gallery .fourTilesBoxes {
-   /* Medium desktop: 4 tiles */
-   .box {
     width: 25%;
     padding-bottom: 25%;
 }
-}
 
 /*
 Transition styles

static/css/ozk.css

@@ -37,3 +37,23 @@ iframe{
   width: 100%;
   height: 100%;
 }
+
+figure { 
+  margin: 0px;
+}
+
+.marginHorizontal {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.galleryMarginHorizontal {
+  margin-left: 15px;
+  margin-right: 15px;
+  margin-bottom: 5px;
+}
+
+.leaflet-map {
+  margin-left: 20px;
+  margin-right: 20px;
+}