LibreCCM
/
libreccm
3
0
Fork 0
Code Issues 10 Pull Requests Packages Releases Wiki Activity

Image popup and image gallery/carousel

pull/20/head
Jens Pelzetter 2022-02-22 20:22:16 +01:00
parent f413f07aaa
commit 18b3f03303
6 changed files with 129 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
ccm-cms-default-theme/src/main/resources/themes/librecms/images/placeholder.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
ccm-cms-default-theme/src/main/resources/themes/librecms/images/placeholder_2.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
ccm-cms-default-theme/src/main/resources/themes/librecms/images/placeholder_3.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

120
ccm-cms-default-theme/src/main/resources/themes/librecms/templates/category-page.html.ftl
View File

@ -10,10 +10,130 @@
Enim pariatur esse nisi commodo cupidatat dolor reprehenderit commodo. Nulla mollit officia dolore ipsum elit irure excepteur ex excepteur est non aliqua. Tempor est amet id occaecat deserunt ea adipisicing laborum tempor exercitation dolor ex quis laboris. Nulla quis sit exercitation ex sunt ipsum adipisicing consequat mollit sunt. Ea fugiat commodo ullamco reprehenderit non. Ea laborum aute non ex Lorem sint anim. In sunt sit laboris amet ipsum tempor officia incididunt eu nostrud voluptate labore veniam.
</p>
<figure class="col-4">
<button class="imgbox-button"
data-bs-target="#imggallery"
data-bs-toggle="modal"
type="button">
<img class="img-thumbnail"
src="${themeUrl}/images/placeholder.png" />
</button>
<figcaption>Associated images (using media list images)</figcaption>
</figure>
<div aria-hidden="true"
aria-labelledby="imgbox-title"
class="modal modal-xl fade"
id="imgbox"
tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title"
id="imgbox-title">
Images
</h2>
<button aria-label="Close"
class="btn-close"
data-bs-dismiss="modal"
type="button">
</button>
</div>
<figure class="modal-body">
<img class="img-fluid"
src="${themeUrl}/images/placeholder.png" />
<figcaption>
Associated image
</figcaption>
</figure>
</div>
</div>
</div>
<div aria-hidden="true"
aria-labelledby="imggallery-title"
class="modal modal-xl fade"
id="imggallery"
tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title"
id="imggallery-title">
Images
</h2>
<button aria-label="Close"
class="btn-close"
data-bs-dismiss="modal"
type="button">
</button>
</div>
<div class="modal-body">
<div class="carousel slide"
data-bs-interval="false"
data-bs-ride="carousel"
id="imggallery-carousel">
<div class="carousel-indicators">
<button aria-current="true"
aria-label="First image"
class="active"
data-bs-slide-to="0"
data-bs-target="#imggallery-carousel"
type="button"></button>
<button aria-label="Second image"
data-bs-slide-to="1"
data-bs-target="#imggallery-carousel"
type="button"></button>
<button aria-label="Slide 3"
data-bs-slide-to="2"
data-bs-target="#imggallery-carousel"
type="button"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<figure class="d-block w-100">
<img class="img-fluid"
src="${themeUrl}/images/placeholder.png" />
<figcaption class="carousel-caption d-none d-md-block">
First image
</figcaption>
</figure>
</div>
<div class="carousel-item">
<figure class="d-block w-100">
<img class="img-fluid"
src="${themeUrl}/images/placeholder_2.png" />
<figcaption class="carousel-caption d-none d-md-block">
2nd image
</figcaption>
</figure>
</div>
<div class="carousel-item">
<figure class="d-block w-100">
<img class="img-fluid"
src="${themeUrl}/images/placeholder_3.png" />
<figcaption class="carousel-caption d-none d-md-block">
Image 3
</figcaption>
</figure>
</div>
</div>
<button class="carousel-control-prev"
data-bs-slide="prev"
data-bs-target="#imggallery-carousel"
type="button">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next"
data-bs-slide="next"
data-bs-target="#imggallery-carousel"
type="button">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<p>
Et ut ea adipisicing irure mollit excepteur proident labore velit sint ex ipsum irure duis. Do irure do irure officia consectetur est. Nulla proident sit cillum veniam excepteur sint est culpa quis voluptate nostrud nulla. Minim incididunt dolor quis ullamco eu pariatur sunt deserunt aliquip elit cupidatat minim. Ipsum sunt dolore non anim minim et amet est aute.

1
ccm-cms-default-theme/src/main/resources/themes/librecms/templates/main.html.ftl
View File

@ -44,6 +44,7 @@
<main>
<#nested>
</main>
<script src="${themeUrl}/scripts/librecms.js"></script>
</body>
</html>
</#macro>

6
ccm-cms-default-theme/src/main/scss/_custom.scss
View File

@ -4,6 +4,12 @@ a.navbar-brand {
max-width: 15%;
}
.imgbox-button {
background-color: transparent;
border: none;
padding: 0;
}
.item-description {
white-space: pre;
}