forked from Git/hugo-story
adding template support for gallery
This commit is contained in:
mspnr
parent
22dabfe0c2
commit
459291f0f2
77
exampleSite/data/gallery.yml
Normal file
77
exampleSite/data/gallery.yml
Normal 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"
|
||||||
|
|
||||||
@ -19,7 +19,7 @@
|
|||||||
{{ partial "spotlight" site.Data.spotlight1 }}
|
{{ partial "spotlight" site.Data.spotlight1 }}
|
||||||
{{ partial "spotlight" site.Data.spotlight2 }}
|
{{ partial "spotlight" site.Data.spotlight2 }}
|
||||||
{{ partial "spotlight" site.Data.spotlight3 }}
|
{{ partial "spotlight" site.Data.spotlight3 }}
|
||||||
{{ partial "gallery" . }}
|
{{ partial "gallery" site.Data.gallery }}
|
||||||
{{ partial "items" site.Data.items }}
|
{{ partial "items" site.Data.items }}
|
||||||
{{ partial "elements" . }}
|
{{ partial "elements" . }}
|
||||||
{{ partial "elements_reference" . }}
|
{{ partial "elements_reference" . }}
|
||||||
|
|||||||
@ -1,156 +1,14 @@
|
|||||||
<!-- Gallery -->
|
<!-- Gallery -->
|
||||||
<section class="wrapper style1 align-center">
|
<section class="wrapper style1 align-center">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<h2>Gallery</h2>
|
<h2>{{ .title }}</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>
|
<p>{{ .content | safeHTML }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Gallery -->
|
<!-- Gallery -->
|
||||||
<div class="gallery style2 medium lightbox onscroll-fade-in">
|
<div class="gallery {{ .style }}">
|
||||||
<article>
|
{{ range .pictures }}
|
||||||
<a href="images/gallery/fulls/01.jpg" class="image">
|
{{ partial "picture" . }}
|
||||||
<img src="images/gallery/thumbs/01.jpg" alt="" />
|
{{ end }}
|
||||||
</a>
|
</div>
|
||||||
<div class="caption">
|
</section>
|
||||||
<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>
|
|
||||||
12
layouts/partials/picture.html
Normal file
12
layouts/partials/picture.html
Normal 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>
|
||||||
Loading…
Reference in New Issue
Block a user