example project structure

_config.yml

@@ -16,6 +16,9 @@ collections:
   classes:
     output: true
     permalink: /classes/:path/
+  projects:
+    output: true
+    permalink: /projects/:path/
   faqs:
     output: false
 defaults:

_includes/image-gallery.html

@@ -0,0 +1,31 @@
+<style>
+  .image-gallery {overflow: auto; margin-left: -1%!important;}
+  .image-gallery a {float: left; display: block; margin: 0 0 1% 1%; width: 19%; text-align: center; text-decoration: none!important;}
+  .image-gallery a span {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 3px 0;}
+  .image-gallery a img {width: 100%; display: block;}
+</style>
+
+<div class="image-gallery">
+{% for file in site.static_files %}
+  {% if file.path contains include.folder %}
+    {% if file.extname == '.jpg' or
+      file.extname == '.jpeg' or
+      file.extname == '.JPG' or
+      file.extname == '.JPEG' or
+      file.extname == '.png' or
+      file.extname == '.PNG' or
+      file.extname == '.gif' or
+      file.extname == '.GIF' %}
+
+      {% assign filenameparts = file.path | split: "/" %}
+      {% assign filename = filenameparts | last | replace: file.extname,"" %}
+
+      <a href="{{ file.path }}" title="{{ filename }}">
+        <!-- <img src="//images.weserv.nl/?url=sfpc.io/{{ file.path }}&w=300&h=300&output=jpg&q=50&t=square" alt="{{ filename }}" /> -->
+        <img src="{{ file.path }}" alt="{{ filename }}" />
+        <!-- <span>{{ filename }}</span> -->
+      </a>
+    {% endif %}
+  {% endif %}
+{% endfor %}
+</div>

_includes/project.html

@@ -0,0 +1,7 @@
+<article>
+  <h4>{{ include.project.name }}</h4>
+  {{ include.project.content }}
+  {% capture folder %}static/img/projects/{{ include.project.slug }}{% endcapture %}
+  <br /><br />
+  {% include image-gallery.html folder=folder %}
+</article>

_layouts/person.html

@@ -4,12 +4,15 @@
 <div class="row">
 {% if content %}
 	<section class="col-md-6  col-sm-6">
-		<h1>{{page.title}}</h1>
+		<h1>{{ page.title }}</h1>
 		{{content}}
-
-		{% assign project = 'projects/' | append: 'alexander-miller.md' %}
-		{% capture project_include %}{% include {{ project }} %}{% endcapture %}
-		{{ project_include | markdownify }}
+		{% assign projects = site.projects | where: "artist", page.slug %}
+		{% if projects != '' %}
+		<h3>Projects</h3>
+		{% for project in projects %}
+			{% include project.html project=project %}
+		{% endfor %}
+		{% endif %}
 	</section>
 {% endif %}
 	<section class="info col-md-4 col-md-offset-1 col-sm-6">

_people/alexander-miller.md

@@ -8,7 +8,5 @@ affiliation:
 website: http://spacefiller.space/
 instagram: space.filler.art
 place: Seattle, WA
-projects:
-- alexander-miller
 ---
 Alex is a programmer, teacher and artist who is interested in real-time interactive generative systems. His work explores the ideas of order, chaos, complexity, emergent behavior, and scientific modeling.

static/img/projects/alexander-miller/info.md → _projects/the-emergence-and-decay-of-computation.md

@@ -1,4 +1,9 @@
-<iframe src="https://player.vimeo.com/video/336939272" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
+---
+name: The Emergence and Decay of Computation
+artist: alexander-miller
+---
+
+<iframe src="https://player.vimeo.com/video/336939272" width="480" height="270" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
 <p><a href="https://vimeo.com/336939272">The Emergence and Decay of Computation</a> from <a href="https://vimeo.com/alexmiller">SPACEFILLER</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
 
 Hacked receipt printers hang from their own receipts above a basin of water and slowly print themselves to death over the course of three days. The printers output rows of a cellular automaton — a mathematical simulation that generates emergent patterns from simple rules. Entering the water short circuits the printer, permanently killing it. The output of the cellular automaton simulation is directly linked to the destruction of the device computing the simulation.