adding template support for gallery

4 files changed, 103 insertions, 156 deletions

diff --git a/exampleSite/data/gallery.yml b/exampleSite/data/gallery.yml
new file mode 100644
index 0000000..815d0c9
--- /dev/null
+++ b/exampleSite/data/gallery.yml
@@ -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"
+    
diff --git a/layouts/index.html b/layouts/index.html
index bb99203..fd1edbf 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -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" . }}
diff --git a/layouts/partials/gallery.html b/layouts/partials/gallery.html
index 59933d7..11e72c9 100644
--- a/layouts/partials/gallery.html
+++ b/layouts/partials/gallery.html
@@ -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>
\ No newline at end of file
+    <!-- Gallery -->
+    <div class="gallery {{ .style }}">
+        {{ range .pictures }}
+            {{ partial "picture" . }}
+        {{ end }}
+    </div>
+</section>
\ No newline at end of file
diff --git a/layouts/partials/picture.html b/layouts/partials/picture.html
new file mode 100644
index 0000000..835f66b
--- /dev/null
+++ b/layouts/partials/picture.html
@@ -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>