feat(example gallery item): adds an example gallery item that can be copied to create new elements

Also adds publish key to gallery item frontmatter for better control of displayed items. Allows
review process.

Author: ff6347

_source/gallery/affected-perception/index.md

@@ -6,6 +6,7 @@ authors:
     url: null
 
 layout: gallery-item
+publish: true
 title: "Affected  Perception"
 description: The automated design works with the typographical layout content. Out of the manual word categorization eight arrays are sorted after the word importance. The automated scripting changes the words in the single arrays after the defined objectstyles. Through this the most important word groups stay readable and the less important word groups get less readable.
 ---

_source/gallery/alphabet-bars/index.md

@@ -6,6 +6,7 @@ authors:
     url: null
 
 layout: gallery-item
+publish: true
 title: "Alphabet  Bars"
 description: Our designs visualize the text, Program or Be Programmed by Douglas Rushkoff, alphabetically with rectangles of varying length. The length of each rectangle or bar is determined by the amount of times a letter or character appears on the page. Our goal was to use JavaScript to deconstruct the meaning of text completely, and reorganize and restructure the way it is read.
 

_source/gallery/breaking-the-grid/index.md

@@ -8,6 +8,7 @@ authors:
     url: null
 
 layout: gallery-item
+publish: true
 title: "Breaking the Grid"
 description: Our goal was to relate our experiments to the given text (Program or Be Programmed by Douglas Rushkoff), for example, when you take a program as it is you find yourself in a grid with certain limitations; however when you learn to control the program you allow yourself to stray from the grid, break free from it.
 ---

_source/gallery/computed-curation/index.md

@@ -3,6 +3,7 @@ authors:
   - name: Philipp Schmitt
     url: https://philippschmitt.com
 layout: gallery-item
+publish: true
 title: Computed Curation
 description: Curating photography with neural networks.
 featured: true

_source/gallery/ending-the-depression-through-amazon/index.md

@@ -3,6 +3,7 @@ authors:
   - name: Bettina Schneebeli
     url: null
 layout: gallery-item
+publish: true
 title: Ending  the  Depression  through  Amazon
 description: A text – image correlation between an article by Bernhard London from 1932 and according product pictures from amazon.com.
 featured: true

_source/gallery/example-gallery-item/images/img1.png

@@ -0,0 +1,358 @@
+---
+# a list of all the authors.
+# If you add an url it will add it as a clickable link
+authors:
+  - name: Fabian Morón Zirfas
+    url: https://fabianmoronzirfas.me
+  - name: Ted Davis
+    url: https://teddavis.org
+  - name: Duffy Duck
+    url: null
+# The layout needs to be gallery-item
+layout: gallery-item
+
+# only if published is true it will be displayed
+# you can still preview it with its url
+publish: true
+title: An Example Gallery Item
+description: This is an example gallery item. You can just copy this whole folder and exchange the content.
+
+featured: true
+# will send it to the frontpage
+
+---
+Hint!
+There Need to be two images present.
+1. thumbnail.png with a size of 320 × 180 px (this will be used in the gallery overview)
+2. splash.png with a size of 1280 × 720 px (this will be used on the start page if featured is true)
+
+![an image](./images/img1.png)
+
+# An h1 header
+
+Paragraphs are separated by a blank line.
+
+2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
+look like:
+
+  * this one
+  * that one
+  * the other one
+
+Note that --- not considering the asterisk --- the actual text
+content starts at 4-columns in.
+
+> Block quotes are
+> written like so.
+>
+> They can span multiple paragraphs,
+> if you like.
+
+Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
+in chapters 12--14"). Three dots ... will be converted to an ellipsis.
+Unicode is supported. ☺
+
+## An h2 header
+
+Here's a numbered list:
+
+ 1. first item
+ 2. second item
+ 3. third item
+
+Note again how the actual text starts at 4 columns in (4 characters
+from the left side). Here's a code sample:
+
+    # Let me re-iterate ...
+    for i in 1 .. 10 { do-something(i) }
+
+As you probably guessed, indented 4 spaces. By the way, instead of
+indenting the block, you can use delimited blocks, if you like:
+
+~~~plain
+define foobar() {
+    print "Welcome to flavor country!";
+}
+~~~
+
+Or like this 
+
+```plain
+define foobar() {
+    print "Welcome to flavor country!";
+}
+```
+
+
+(which makes copying & pasting easier). You can optionally mark the
+delimited block for Pandoc to syntax highlight it:
+
+~~~python
+import time
+# Quick, count to ten!
+for i in range(10):
+    # (but not *too* quick)
+    time.sleep(0.5)
+    print(i)
+~~~
+
+### An h3 header
+
+Now a nested list:
+
+ 1. First, get these ingredients:
+
+      * carrots
+      * celery
+      * lentils
+
+ 2. Boil some water.
+
+ 3. Dump everything in the pot and follow
+    this algorithm:
+
+        find wooden spoon
+        uncover pot
+        stir
+        cover pot
+        balance wooden spoon precariously on pot handle
+        wait 10 minutes
+        goto first step (or shut off burner when done)
+
+    Do not bump wooden spoon or it will fall.
+
+Notice again how text always lines up on 4-space indents (including
+that last line which continues item 3 above).
+
+Here's a link to [a website](http://foo.bar), to a [local
+doc](/index.html), and to a [section heading in the current
+doc](#an-h2-header). Here's a footnote [^1].
+
+[^1]: Some footnote text.
+
+Tables can look like this:
+
+Name           Size  Material      Color
+------------- -----  ------------  ------------
+All Business      9  leather       brown
+Roundabout       10  hemp canvas   natural
+Cinderella       11  glass         transparent
+
+Table: Shoes sizes, materials, and colors.
+
+(The above is the caption for the table.) Pandoc also supports
+multi-line tables:
+
+--------  -----------------------
+Keyword   Text
+--------  -----------------------
+red       Sunsets, apples, and
+          other red or reddish
+          things.
+
+green     Leaves, grass, frogs
+          and other things it's
+          not easy being.
+--------  -----------------------
+
+A horizontal rule follows.
+
+***
+
+Here's a definition list:
+
+apples
+  : Good for making applesauce.
+
+oranges
+  : Citrus!
+
+tomatoes
+  : There's no "e" in tomatoe.
+
+Again, text is indented 4 spaces. (Put a blank line between each
+term and  its definition to spread things out more.)
+
+Here's a "line block" (note how whitespace is honored):
+
+| Line one
+|   Line too
+| Line tree
+
+and images can be specified like so:
+
+![example image](example-image.jpg "An exemplary image")
+
+Inline math equation: $\omega = d\phi / dt$. Display
+math should get its own line like so:
+
+$$I = \int \rho R^{2} dV$$
+
+And note that you can backslash-escape any punctuation characters
+which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc.
+
+```plain
+An h1 header
+============
+
+Paragraphs are separated by a blank line.
+
+2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
+look like:
+
+  * this one
+  * that one
+  * the other one
+
+Note that --- not considering the asterisk --- the actual text
+content starts at 4-columns in.
+
+> Block quotes are
+> written like so.
+>
+> They can span multiple paragraphs,
+> if you like.
+
+Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
+in chapters 12--14"). Three dots ... will be converted to an ellipsis.
+Unicode is supported. ☺
+
+
+
+An h2 header
+------------
+
+Here's a numbered list:
+
+ 1. first item
+ 2. second item
+ 3. third item
+
+Note again how the actual text starts at 4 columns in (4 characters
+from the left side). Here's a code sample:
+
+    # Let me re-iterate ...
+    for i in 1 .. 10 { do-something(i) }
+
+As you probably guessed, indented 4 spaces. By the way, instead of
+indenting the block, you can use delimited blocks, if you like:
+
+~~~
+define foobar() {
+    print "Welcome to flavor country!";
+}
+~~~
+
+(which makes copying & pasting easier). You can optionally mark the
+delimited block for Pandoc to syntax highlight it:
+
+~~~python
+import time
+# Quick, count to ten!
+for i in range(10):
+    # (but not *too* quick)
+    time.sleep(0.5)
+    print(i)
+~~~
+
+
+
+### An h3 header ###
+
+Now a nested list:
+
+ 1. First, get these ingredients:
+
+      * carrots
+      * celery
+      * lentils
+
+ 2. Boil some water.
+
+ 3. Dump everything in the pot and follow
+    this algorithm:
+
+        find wooden spoon
+        uncover pot
+        stir
+        cover pot
+        balance wooden spoon precariously on pot handle
+        wait 10 minutes
+        goto first step (or shut off burner when done)
+
+    Do not bump wooden spoon or it will fall.
+
+Notice again how text always lines up on 4-space indents (including
+that last line which continues item 3 above).
+
+Here's a link to [a website](http://foo.bar), to a [local
+doc](local-doc.html), and to a [section heading in the current
+doc](#an-h2-header). Here's a footnote [^1].
+
+[^1]: Some footnote text.
+
+Tables can look like this:
+
+Name           Size  Material      Color
+------------- -----  ------------  ------------
+All Business      9  leather       brown
+Roundabout       10  hemp canvas   natural
+Cinderella       11  glass         transparent
+
+Table: Shoes sizes, materials, and colors.
+
+(The above is the caption for the table.) Pandoc also supports
+multi-line tables:
+
+--------  -----------------------
+Keyword   Text
+--------  -----------------------
+red       Sunsets, apples, and
+          other red or reddish
+          things.
+
+green     Leaves, grass, frogs
+          and other things it's
+          not easy being.
+--------  -----------------------
+
+A horizontal rule follows.
+
+***
+
+Here's a definition list:
+
+apples
+  : Good for making applesauce.
+
+oranges
+  : Citrus!
+
+tomatoes
+  : There's no "e" in tomatoe.
+
+Again, text is indented 4 spaces. (Put a blank line between each
+term and  its definition to spread things out more.)
+
+Here's a "line block" (note how whitespace is honored):
+
+| Line one
+|   Line too
+| Line tree
+
+and images can be specified like so:
+
+![example image](example-image.jpg "An exemplary image")
+
+Inline math equation: $\omega = d\phi / dt$. Display
+math should get its own line like so:
+
+$$I = \int \rho R^{2} dV$$
+
+And note that you can backslash-escape any punctuation characters
+which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc.
+```
+
+
+![an image](./images/img2.png)
+