-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Photos with thumnails and large modal carousel
- Loading branch information
1 parent
cb1c6b5
commit 07744a9
Showing
3 changed files
with
54 additions
and
33 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| +++ | ||
| draft = false | ||
| title = 'Photos' | ||
| menu = 'main' | ||
| weight = 80 | ||
| +++ | ||
|
|
||
| # SIGPL 2023 Summer - Kangwon University | ||
| {{< gallery folder="./sigpl23s" >}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,48 @@ | ||
| {{ $images := trim .Inner "\n" }} | ||
| {{ $images := split $images "\n" }} | ||
| <div id="carouselExample" class="carousel slide"> | ||
| <div class="carousel-inner"> | ||
| {{ range $idx, $image := $images }} | ||
| <div class="carousel-item{{ if eq $idx 0 }} active{{ end }}"> | ||
| <img src="{{ $image }}" class="d-block w-100" alt="{{ $image }}"> | ||
| </div> | ||
| {{ $folder := .Get "folder" }} | ||
| {{ $folder := strings.TrimPrefix "./" $folder }} | ||
| {{ $images := .Page.Resources.ByType "image" }} | ||
| {{ $images := print $folder "/*" | $images.Match }} | ||
| {{ $name := split $folder "/" }} | ||
| {{ $name := last 1 $name }} | ||
| {{ $name := index $name 0 }} | ||
|
|
||
| <div class="d-flex overflow-x-scroll mb-4"> | ||
| {{ range $idx, $image := $images }} | ||
| {{ $image := strings.TrimPrefix "./" $image }} | ||
| {{ $image := $.Page.Resources.GetMatch $image }} | ||
| {{ with $image }} | ||
| {{ $image := .Resize "x200" }} | ||
| {{ $image := $image.Crop "200x200 center" }} | ||
| <div data-bs-toggle="modal" data-bs-target="#{{ $name }}Modal" role="button"> | ||
| <div data-bs-target="#{{ $name }}Carousel" data-bs-slide-to="{{ $idx }}"> | ||
| <img src="{{ $image.RelPermalink }}" class="img-thumbnail mt-2 me-2" alt="{{ $image.Name }}"> | ||
| </div> | ||
| </div> | ||
| {{ end }} | ||
| {{ end }} | ||
| </div> | ||
|
|
||
| <div class="modal fade" id="{{ $name }}Modal" tabindex="-1" aria-labelledby="{{ $name }}ModalLabel" aria-hidden="true"> | ||
| <div class="modal-dialog modal-dialog-centered modal-xl"> | ||
| <div class="modal-content bg-transparent border-0"> | ||
| <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button> | ||
| <div id="{{ $name }}Carousel" class="carousel slide"> | ||
| <div class="carousel-inner"> | ||
| {{ range $idx, $image := $images }} | ||
| <div class="carousel-item{{ if eq $idx 0 }} active{{ end }}"> | ||
| <img src="{{ $image }}" class="d-block w-100" alt="{{ $image }}"> | ||
| </div> | ||
| {{ end }} | ||
| </div> | ||
| <button class="carousel-control-prev" type="button" data-bs-target="#{{ $name }}Carousel" data-bs-slide="prev"> | ||
| <span class="carousel-control-prev-icon" aria-hidden="true"></span> | ||
| <span class="visually-hidden">Previous</span> | ||
| </button> | ||
| <button class="carousel-control-next" type="button" data-bs-target="#{{ $name }}Carousel" data-bs-slide="next"> | ||
| <span class="carousel-control-next-icon" aria-hidden="true"></span> | ||
| <span class="visually-hidden">Next</span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev"> | ||
| <span class="carousel-control-prev-icon" aria-hidden="true"></span> | ||
| <span class="visually-hidden">Previous</span> | ||
| </button> | ||
| <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next"> | ||
| <span class="carousel-control-next-icon" aria-hidden="true"></span> | ||
| <span class="visually-hidden">Next</span> | ||
| </button> | ||
| </div> |