Add placeholder graphic for elePHPants that do not have photos

source/_others/2015-09-11-gray-hack.md

@@ -22,7 +22,7 @@ been produced followed by 500 which will not be available for sale.
 The pHackyderm has several features that distinguish it from an elephpant including
 an articulated trunk, robotic eye, and boots.
 
-The first prototype is named Steve, and the second Steven. All have the HHVM
-plate on the obverse side. The initial prototype has a blank reverse, but the
-later protypes and production pHackyderms will have the Hack logo and text on
-the reverse side.
+The first prototype is named Steve, the second Steph, and the third and final
+Steven. All have the HHVM plate on the obverse side. The initial prototype has a
+blank reverse, but the later protypes and production pHackyderms will have the
+Hack logo and text on the reverse side.

source/_partials/_animal.html

@@ -1,6 +1,5 @@
     <div class="elephpant" id="e-{{ elephpant.categories|join('.') }}-{{ elephpant.tags|join('.') }}-{{ elephpant.date }}">
 
-        {% if elephpant.photos %}
         <div class="row">
             <div class="photos">
             {% for photo in elephpant.photos %}
@@ -15,10 +14,13 @@
                     <div class="caption">by {{ photo.credit }}</div>
                     {% endif %}
                 </div>
+            {% else %}
+                <div class="photo">
+                    <img src="images/placeholder.png">
+                </div>
             {% endfor %}
             </div>
         </div>
-        {% endif %}
 
         {% if elephpant.commonname != "" %}
         <div class="row">

source/css/style.css

@@ -129,6 +129,10 @@ p { margin: 0 0 1em; }
     float: left;
 }
 
+.elephpant .photo.placeholder {
+    filter: grayscale(1) blur(5px) opacity(0.5);
+}
+
 .elephpant .photo img,
 .elephpant .photo .caption {
     display: block;