Change Gallery Design & Add Video into Gallery

This commit is contained in:
2022-10-12 13:58:28 +02:00
parent ecb99ac711
commit 487f37bc5e
10 changed files with 70 additions and 46 deletions

View File

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

View File

@@ -26,5 +26,5 @@ Matinale Musicale de 7:00 à 8:00 place Charles Hernu à Charpennes, sur une id
{{< /gallery >}} {{< /gallery >}}
## Vidéo ## 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" >}}

View File

@@ -1,5 +1,5 @@
--- ---
title: "Nos Photos" title: "Nos Photos & Vidéos"
metaTitle: "OzK - Nos Photos" metaTitle: "OzK - Nos Photos"
type: page 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) 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 ### 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 ### 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 ### 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 ### Autres
{{<figure src="/images/2020-01-01%20Nouvel%20An.jpg">}} {{<figure class="marginHorizontal" src="/images/2020-01-01%20Nouvel%20An.jpg">}}

View File

@@ -9,15 +9,15 @@ type: page
**La St Funny du Nouveau Knup** **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é** **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** **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 # Nos Partitions

View File

@@ -8,7 +8,7 @@ Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
{{- $.Page.Scratch.Add "figurecount" 1 -}} {{- $.Page.Scratch.Add "figurecount" 1 -}}
<!-- use either src or link-thumb for thumbnail image --> <!-- use either src or link-thumb for thumbnail image -->
{{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }} {{- $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"> <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 }}> <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 --> <img itemprop="thumbnail" src="{{ $thumb | relURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->

View File

@@ -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 }} {{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href={{ "css/hugo-easy-gallery.css" | relURL }} />{{ end }}
{{- $.Page.Scratch.Add "figurecount" 1 }} {{- $.Page.Scratch.Add "figurecount" 1 }}
{{ $baseURL := .Site.BaseURL }} {{ $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") -}} {{- with (.Get "dir") -}}
<!-- If a directory was specified, generate figures for all of the images in the directory --> <!-- If a directory was specified, generate figures for all of the images in the directory -->
{{- $files := readDir (print "/static/" .) }} {{- $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 --> {{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- filename of thumbnail image -->
{{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? --> {{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? -->
{{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }}<!-- absolute URL to thumbnail image --> {{- $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"> <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<div class="img" style="background-image: url('{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}');" > <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 --> <img itemprop="thumbnail" src="{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}" alt="{{ $caption }}" /><!-- <img> hidden if in .gallery -->

View File

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

File diff suppressed because one or more lines are too long

View File

@@ -30,10 +30,30 @@ img[alt=LogoAbout] {
padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */
} }
iframe{ iframe {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 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;
} }