Git/hugo-story
1
0
Fork 1
mirror of https://github.com/caressofsteel/hugo-story.git synced 2024-12-22 09:35:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

adding template support for gallery

Browse Source
This commit is contained in:
mspnr 2021-01-31 17:57:51 +01:00
parent 22dabfe0c2
commit 459291f0f2
4 changed files with 103 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
exampleSite/data/gallery.yml Normal file
View File

@ -0,0 +1,77 @@
title: "Gallery"
style: "style2 medium lightbox onscroll-fade-in"
content: |
This is a <strong>Gallery</strong> element. It can behave as a lightbox (when given the <code>lightbox</code> class), and you can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-gallery">details</a>).
pictures:
- title: "Title"
content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
image: "images/gallery/fulls/01.jpg"
thumb: "images/gallery/thumbs/01.jpg"
button: "Details"
- title: "Title"
content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
image: "images/gallery/fulls/02.jpg"
thumb: "images/gallery/thumbs/02.jpg"
button: "Details"
- title: "Title"
content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
image: "images/gallery/fulls/03.jpg"
thumb: "images/gallery/thumbs/03.jpg"
button: "Details"
- title: "Title"
content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
image: "images/gallery/fulls/04.jpg"
thumb: "images/gallery/thumbs/04.jpg"
button: "Details"
- title: "Title"
content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
image: "images/gallery/fulls/05.jpg"
thumb: "images/gallery/thumbs/05.jpg"
button: "Details"
- title: "Title"
content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
image: "images/gallery/fulls/06.jpg"
thumb: "images/gallery/thumbs/06.jpg"
button: "Details"
- title: "Title"
content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
image: "images/gallery/fulls/07.jpg"
thumb: "images/gallery/thumbs/07.jpg"
button: "Details"
- title: "Title"
content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
image: "images/gallery/fulls/08.jpg"
thumb: "images/gallery/thumbs/08.jpg"
button: "Details"
- title: "Title"
content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
image: "images/gallery/fulls/09.jpg"
thumb: "images/gallery/thumbs/09.jpg"
button: "Details"
- title: "Title"
content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
image: "images/gallery/fulls/10.jpg"
thumb: "images/gallery/thumbs/10.jpg"
button: "Details"
- title: "Title"
content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
image: "images/gallery/fulls/11.jpg"
thumb: "images/gallery/thumbs/11.jpg"
button: "Details"
- title: "Title"
content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
image: "images/gallery/fulls/12.jpg"
thumb: "images/gallery/thumbs/12.jpg"
button: "Details"

2
layouts/index.html
View File

@ -19,7 +19,7 @@
{{ partial "spotlight" site.Data.spotlight1 }}
{{ partial "spotlight" site.Data.spotlight2 }}
{{ partial "spotlight" site.Data.spotlight3 }}
{{ partial "gallery" . }}
{{ partial "gallery" site.Data.gallery }}
{{ partial "items" site.Data.items }}
{{ partial "elements" . }}
{{ partial "elements_reference" . }}

168
layouts/partials/gallery.html
View File

@ -1,156 +1,14 @@
<!-- Gallery -->
<section class="wrapper style1 align-center">
<div class="inner">
<h2>Gallery</h2>
<p>This is a <strong>Gallery</strong> element. It can behave as a lightbox (when given the <code>lightbox</code> class), and you can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-gallery">details</a>).</p>
</div>
<!-- Gallery -->
<section class="wrapper style1 align-center">
<div class="inner">
<h2>{{ .title }}</h2>
<p>{{ .content | safeHTML }}</p>
</div>
<!-- Gallery -->
<div class="gallery style2 medium lightbox onscroll-fade-in">
<article>
<a href="images/gallery/fulls/01.jpg" class="image">
<img src="images/gallery/thumbs/01.jpg" alt="" />
</a>
<div class="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/02.jpg" class="image">
<img src="images/gallery/thumbs/02.jpg" alt="" />
</a>
<div class="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/03.jpg" class="image">
<img src="images/gallery/thumbs/03.jpg" alt="" />
</a>
<div class="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/04.jpg" class="image">
<img src="images/gallery/thumbs/04.jpg" alt="" />
</a>
<div class="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/05.jpg" class="image">
<img src="images/gallery/thumbs/05.jpg" alt="" />
</a>
<div class="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/06.jpg" class="image">
<img src="images/gallery/thumbs/06.jpg" alt="" />
</a>
<div class="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/07.jpg" class="image">
<img src="images/gallery/thumbs/07.jpg" alt="" />
</a>
<div class="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/08.jpg" class="image">
<img src="images/gallery/thumbs/08.jpg" alt="" />
</a>
<div class="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/09.jpg" class="image">
<img src="images/gallery/thumbs/09.jpg" alt="" />
</a>
<div class="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/10.jpg" class="image">
<img src="images/gallery/thumbs/10.jpg" alt="" />
</a>
<div class="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/11.jpg" class="image">
<img src="images/gallery/thumbs/11.jpg" alt="" />
</a>
<div class="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/12.jpg" class="image">
<img src="images/gallery/thumbs/12.jpg" alt="" />
</a>
<div class="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
</div>
</section>
<!-- Gallery -->
<div class="gallery {{ .style }}">
{{ range .pictures }}
{{ partial "picture" . }}
{{ end }}
</div>
</section>

12
layouts/partials/picture.html Normal file
View File

@ -0,0 +1,12 @@
<article>
<a href="{{ .image }}" class="image">
<img src="{{ .thumb }}" alt="" />
</a>
<div class="caption">
<h3>{{ .title }}</h3>
<p>{{ .content }}</p>
<ul class="actions fixed">
<li><span class="button small">{{ .button }}</span></li>
</ul>
</div>
</article>