SelfPrivacy/selfprivacy.org
1
0
Fork 0
mirror of https://git.selfprivacy.org/SelfPrivacy/selfprivacy.org.git synced 2025-01-30 12:46:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add responsive carousel

Browse source
This commit is contained in:
nevfy 2024-11-10 20:52:11 +03:00
parent 32ef6c644a
commit e9836ae31c
2 changed files with 38 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
content/en/_index.html
View file

@ -8,30 +8,8 @@ linkTitle = "SelfPrivacy"
<div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center"> <div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center">
<div class="col-xs-12 col-md-4"> <div class="col-xs-12 col-md-4">
<div class="container rounded"> <div class="container rounded">
<div id="screenshotsCarouselControls" class="carousel slide" data-bs-ride="carousel"> <div id="screenshotsCarouselControls" class="carousel" data-bs-ride="false">
<div class="carousel-inner rounded"> {{< responsive-carousel en >}}
<div class="carousel-item active">
<img class="d-block w-100" src="/images/screenshots/en/1.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/images/screenshots/en/2.png" alt="Second slide">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="/images/screenshots/en/3.png" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/images/screenshots/en/4.png" alt="Fourth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/images/screenshots/en/5.png" alt="Fifth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/images/screenshots/en/6.png" alt="Sixth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/images/screenshots/en/7.png" alt="Seventh slide">
</div>
</div>
<div class="carousel-indicators"> <div class="carousel-indicators">
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="0" class="active" aria-current="true"></button> <button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="0" class="active" aria-current="true"></button>
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="1"></button> <button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="1"></button>

35
layouts/shortcodes/responsive-carousel.html Normal file
View file

@ -0,0 +1,35 @@
{{ $lang := ( .Get 0 ) }}
{{ $srcFiles := (resources.Match (printf "images/screenshots/%s/*" $lang)) }}
{{ $tinyw := default "500" }}
{{ $smallw := default "800" }}
{{ $mediumw := default "1200" }}
{{ $largew := default "2400" }}
{{ range $i, $src := $srcFiles }}
{{ $tiny := $src.Resize (printf "%sx" $tinyw) }}
{{ $small := $src.Resize (printf "%sx" $smallw) }}
{{ $medium:= $src.Resize (printf "%sx" $mediumw) }}
{{ $large := $src.Resize (printf "%sx" $largew) }}
<div class="carousel-item {{ if eq $i 0 }} active {{ end }}">
<img
class = "w-100"
srcset='
{{ with $tiny.RelPermalink }}{{.}} {{(printf "%sw" $tinyw)}} {{ end }},
{{ with $small.RelPermalink }}{{.}} {{(printf "%sw" $smallw)}} {{ end }},
{{ with $medium.RelPermalink }}{{.}} {{(printf "%sw" $mediumw)}} {{ end }},
{{ with $large.RelPermalink }}{{.}} {{(printf "%sw" $largew)}} {{ end }}
'
sizes='
(max-width: {{(printf "%spx" $tinyw)}}) {{(printf "%spx" $tinyw)}},
(max-width: {{(printf "%spx" $smallw)}}) {{(printf "%spx" $smallw)}},
(max-width: {{(printf "%spx" $mediumw)}}) {{(printf "%spx" $mediumw)}},
(max-width: {{(printf "%spx" $largew)}}) {{(printf "%spx" $largew)}},
100%
'
>
</div>
{{ end }}