From 51e38e582cc05d7055423e73f7f951427aa62f55 Mon Sep 17 00:00:00 2001
From: mspnr <mspnr@mail.ru>
Date: Sun, 31 Jan 2021 01:20:41 +0100
Subject: [PATCH 1/4] switching banner to data concept

---
 exampleSite/data/banner.yml  | 12 ++++++++++++
 layouts/index.html           |  2 +-
 layouts/partials/banner.html | 28 ++++++++++++++--------------
 3 files changed, 27 insertions(+), 15 deletions(-)
 create mode 100644 exampleSite/data/banner.yml

diff --git a/exampleSite/data/banner.yml b/exampleSite/data/banner.yml
new file mode 100644
index 0000000..517f0ab
--- /dev/null
+++ b/exampleSite/data/banner.yml
@@ -0,0 +1,12 @@
+####################### Banner #########################
+style: "style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right"
+title : "Hugo Story"
+subtitle: |
+  Hugo Story released for free under the <a target="_blank" href="https://creativecommons.org/licenses/by/3.0/">Creative Commons</a>.
+content : |
+  This is a <strong>Banner</strong> element, and it's generally used as an introduction or opening statement. 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-banner">details</a>).
+button:
+  label : "Get Started"
+  link : "#first"
+image : "images/banner.jpg"
+
diff --git a/layouts/index.html b/layouts/index.html
index b78f436..278846d 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -15,7 +15,7 @@
 		<div id="wrapper" class="divided">
 
 			<!-- Main -->
-			{{ partial "banner" . }}
+			{{ partial "banner" site.Data.banner }}
 			{{ partial "spotlight-01-left" . }}
 			{{ partial "spotlight-02-right" . }}
 			{{ partial "spotlight-03-left" . }}
diff --git a/layouts/partials/banner.html b/layouts/partials/banner.html
index edd0fa7..29acf12 100644
--- a/layouts/partials/banner.html
+++ b/layouts/partials/banner.html
@@ -1,14 +1,14 @@
-				<!-- Banner -->
-                <section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right">
-                    <div class="content">
-                        {{ with .Site.Title }}<h1>{{.}}</h1>{{end}}
-                        {{ with .Site.Params.subtitle }}<p class="major">{{.}} released for free under the <a target="_blank" href="https://creativecommons.org/licenses/by/3.0/">Creative Commons</a>.</p>{{end}}
-                        <p>This is a <strong>Banner</strong> element, and it's generally used as an introduction or opening statement. 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-banner">details</a>).</p>
-                        <ul class="actions stacked">
-                            <li><a href="#first" class="button large wide smooth-scroll-middle">Get Started</a></li>
-                        </ul>
-                    </div>
-                    <div class="image">
-                        {{ with .Site.Params.logo }}<img src="{{.}}" alt="Hugo Story" />{{end}}
-                    </div>
-                </section>
\ No newline at end of file
+<!-- Banner -->
+<section class="banner {{ .style }}">
+    <div class="content">
+        {{ with .title }}<h1>{{ . }}</h1>{{ end }}
+        {{ with .subtitle }}<p class="major">{{ . | safeHTML }}</p>{{ end }}
+        {{ with .content }}<p>{{ . | safeHTML }}</p>{{ end }}
+        {{ with .button }}<ul class="actions stacked">
+            <li><a href="{{ .link }}" class="button primary large wide smooth-scroll-middle">{{ .label }}</a></li>
+        </ul>{{ end }}
+    </div>
+    {{ with .image }}<div class="image">
+        <img src="{{.}}" alt="Hugo Story" />
+    </div>{{end}}
+</section>
\ No newline at end of file

From 6524098340fa260c0268c8b343a56ecfe47dc4d6 Mon Sep 17 00:00:00 2001
From: mspnr <mspnr@mail.ru>
Date: Sun, 31 Jan 2021 16:47:21 +0100
Subject: [PATCH 2/4] adding template support for spotlights

---
 exampleSite/data/spotlight1.yml | 10 ++++++++++
 exampleSite/data/spotlight2.yml |  9 +++++++++
 exampleSite/data/spotlight3.yml | 10 ++++++++++
 layouts/index.html              |  6 +++---
 layouts/partials/spotlight.html | 13 +++++++++++++
 5 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 exampleSite/data/spotlight1.yml
 create mode 100644 exampleSite/data/spotlight2.yml
 create mode 100644 exampleSite/data/spotlight3.yml
 create mode 100644 layouts/partials/spotlight.html

diff --git a/exampleSite/data/spotlight1.yml b/exampleSite/data/spotlight1.yml
new file mode 100644
index 0000000..03058b6
--- /dev/null
+++ b/exampleSite/data/spotlight1.yml
@@ -0,0 +1,10 @@
+####################### Spotlight #########################
+style: "style1 orient-right content-align-left image-position-center onscroll-image-fade-in"
+id: "first"
+title : "Spotlight"
+content: |
+  This is a <strong>Spotlight</strong> element, and it's generally used &ndash; as its name implies &ndash; to spotlight a particular feature, subject, or pretty much whatever. 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-spotlight">details</a>).
+button: 
+  label: "Learn More"
+  link: "#"
+image: "images/spotlight01.jpg"
diff --git a/exampleSite/data/spotlight2.yml b/exampleSite/data/spotlight2.yml
new file mode 100644
index 0000000..2a9435f
--- /dev/null
+++ b/exampleSite/data/spotlight2.yml
@@ -0,0 +1,9 @@
+####################### Spotlight #########################
+style: "style1 orient-left content-align-left image-position-center onscroll-image-fade-in"
+title : "Spotlight"
+content: |
+  This is also a <strong>Spotlight</strong> element, and it's here because this demo would look a bit empty with just one spotlight. Like all spotlights, 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-spotlight">details</a>).
+button: 
+  label: "Learn More"
+  link: "#"
+image: "images/spotlight02.jpg"
diff --git a/exampleSite/data/spotlight3.yml b/exampleSite/data/spotlight3.yml
new file mode 100644
index 0000000..03fa5e5
--- /dev/null
+++ b/exampleSite/data/spotlight3.yml
@@ -0,0 +1,10 @@
+####################### Spotlight #########################
+style: "style1 orient-right content-align-left image-position-center onscroll-image-fade-in"
+id: "first"
+title : "Spotlight"
+content: |
+  And yes, this is another <strong>Spotlight</strong> element, and it's also here because I need to fill a bit of space. Naturally, like any other spotlight, 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-spotlight">details</a>).
+button: 
+  label: "Learn More"
+  link: "#"
+image: "images/spotlight03.jpg"
diff --git a/layouts/index.html b/layouts/index.html
index 278846d..e795826 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -16,9 +16,9 @@
 
 			<!-- Main -->
 			{{ partial "banner" site.Data.banner }}
-			{{ partial "spotlight-01-left" . }}
-			{{ partial "spotlight-02-right" . }}
-			{{ partial "spotlight-03-left" . }}
+			{{ partial "spotlight" site.Data.spotlight1 }}
+			{{ partial "spotlight" site.Data.spotlight2 }}
+			{{ partial "spotlight" site.Data.spotlight3 }}
 			{{ partial "gallery" . }}
 			{{ partial "items" . }}
 			{{ partial "elements" . }}
diff --git a/layouts/partials/spotlight.html b/layouts/partials/spotlight.html
new file mode 100644
index 0000000..d171c7e
--- /dev/null
+++ b/layouts/partials/spotlight.html
@@ -0,0 +1,13 @@
+<!-- Spotlight -->
+<section class="spotlight {{ .style }}"{{ with .id }} id="{{ . }}"{{ end }}>
+    <div class="content">
+        {{ with .title }}<h2>{{ . }}</h2>{{ end }}
+        {{ with .content }}<p>{{ . | safeHTML }}</p>{{ end }}
+        {{ with .button }}<ul class="actions stacked">
+            <li><a href="{{ .link }}" class="button">{{ .label }}</a></li>
+        </ul>{{ end }}
+    </div>
+    {{ with .image }}<div class="image">
+        <img src="{{ . }}" alt="" />
+    </div>{{ end }}
+</section>
\ No newline at end of file

From 22dabfe0c289cf8a945400be6a761b485e535259 Mon Sep 17 00:00:00 2001
From: mspnr <mspnr@mail.ru>
Date: Sun, 31 Jan 2021 17:07:19 +0100
Subject: [PATCH 3/4] adding template support for items

---
 exampleSite/data/items.yml  | 65 +++++++++++++++++++++++++++++
 layouts/index.html          |  2 +-
 layouts/partials/item.html  |  5 +++
 layouts/partials/items.html | 81 ++++++-------------------------------
 4 files changed, 83 insertions(+), 70 deletions(-)
 create mode 100644 exampleSite/data/items.yml
 create mode 100644 layouts/partials/item.html

diff --git a/exampleSite/data/items.yml b/exampleSite/data/items.yml
new file mode 100644
index 0000000..8408af3
--- /dev/null
+++ b/exampleSite/data/items.yml
@@ -0,0 +1,65 @@
+title : "Items"
+content: |
+  This is an <strong>Items</strong> element, and it's basically just a grid for organizing items of various types. 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-items">details</a>).
+style: "style1 medium onscroll-fade-in"
+items:
+  # feature item loop
+  - name : "One"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "style2 major fa-gem"
+
+  # feature item loop
+  - name : "Two"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-save"
+    
+  # feature item loop
+  - name : "Three"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-chart-bar"
+    
+  # feature item loop
+  - name : "Four"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-wifi"
+    
+  # feature item loop
+  - name : "Five"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-cog"
+    
+  # feature item loop
+  - name : "Six"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "style2 major fa-paper-plane"
+    
+  # feature item loop
+  - name : "Seven"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-desktop"
+    
+  # feature item loop
+  - name : "Eight"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-sync-alt"
+    
+  # feature item loop
+  - name : "Nine"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-hashtag"
+    
+  # feature item loop
+  - name : "Ten"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-bolt"
+    
+  # feature item loop
+  - name : "Eleven"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "style2 major fa-envelope"
+    
+  # feature item loop
+  - name : "Twelve"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-leaf"
+    
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index e795826..bb99203 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -20,7 +20,7 @@
 			{{ partial "spotlight" site.Data.spotlight2 }}
 			{{ partial "spotlight" site.Data.spotlight3 }}
 			{{ partial "gallery" . }}
-			{{ partial "items" . }}
+			{{ partial "items" site.Data.items }}
 			{{ partial "elements" . }}
 			{{ partial "elements_reference" . }}
 			{{ partial "template/footer" . }}
diff --git a/layouts/partials/item.html b/layouts/partials/item.html
new file mode 100644
index 0000000..f3c5568
--- /dev/null
+++ b/layouts/partials/item.html
@@ -0,0 +1,5 @@
+<section>
+    <span class="icon {{ .style }}"></span>
+    <h3>{{ .name }}</h3>
+    <p>{{ .content }}</p>
+</section>
diff --git a/layouts/partials/items.html b/layouts/partials/items.html
index 042392d..2c100d1 100644
--- a/layouts/partials/items.html
+++ b/layouts/partials/items.html
@@ -1,69 +1,12 @@
-				<!-- Items -->
-                <section class="wrapper style1 align-center">
-                    <div class="inner">
-                        <h2>Items</h2>
-                        <p>This is an <strong>Items</strong> element, and it's basically just a grid for organizing items of various types. 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-items">details</a>).</p>
-                        <div class="items style1 medium onscroll-fade-in">
-                            <section>
-                                <span class="icon style2 major fa-gem"></span>
-                                <h3>One</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-save"></span>
-                                <h3>Two</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-chart-bar"></span>
-                                <h3>Three</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-wifi"></span>
-                                <h3>Four</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-cog"></span>
-                                <h3>Five</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon style2 major fa-paper-plane"></span>
-                                <h3>Six</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-desktop"></span>
-                                <h3>Seven</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-sync-alt"></span>
-                                <h3>Eight</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-hashtag"></span>
-                                <h3>Nine</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-bolt"></span>
-                                <h3>Ten</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon style2 major fa-envelope"></span>
-                                <h3>Eleven</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-leaf"></span>
-                                <h3>Twelve</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                        </div>
-                    </div>
-                </section>
\ No newline at end of file
+<!-- Items -->
+<section class="wrapper style1 align-center">
+    <div class="inner">
+        {{ with .title }}<h2>{{ . }}</h2>{{ end }}
+        {{ with .content }}<p>{{ . | safeHTML }}</p>{{ end }}
+        <div class="items {{ .style }}">
+            {{ range .items }}
+                {{ partial "item" . }}
+            {{ end }}
+        </div>
+    </div>
+</section>
\ No newline at end of file

From 459291f0f28be483e671a2de98bb645be95ac84f Mon Sep 17 00:00:00 2001
From: mspnr <mspnr@mail.ru>
Date: Sun, 31 Jan 2021 17:57:51 +0100
Subject: [PATCH 4/4] adding template support for gallery

---
 exampleSite/data/gallery.yml  |  77 ++++++++++++++++
 layouts/index.html            |   2 +-
 layouts/partials/gallery.html | 168 +++-------------------------------
 layouts/partials/picture.html |  12 +++
 4 files changed, 103 insertions(+), 156 deletions(-)
 create mode 100644 exampleSite/data/gallery.yml
 create mode 100644 layouts/partials/picture.html

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>