update speaker files to use placeholder image js

Author: dzoladz

_includes/presentation_timeline.html

@@ -1,3 +1,4 @@
+<script src="{{ "/assets/js/placeholder.js" | relative_url }}"></script>
 <div id="cd-timeline" class="cd-container">
     {% assign sorted_events = include.events | sort: "time" %}
     {% for event in sorted_events %}
@@ -56,10 +57,22 @@ <h3 class="h4 talk-title"><a href="{{ talk.url }}">{{ talk.title }}</a></h3>
                                     {% if speaker %}
                                         <div class="col-sm-3 text-center">
                                             <a href="/speakers/#{{ speaker.id }}-id">
-                                                <img class="clip-circle-speaker" src="{{ speaker.image_src |relative_url }}" alt="{{ speaker.name }}">
                                                 {% if event.groupId != 'key-open' and event.groupId != 'key-close' %}
                                                     <span>{{ speaker.name }}</span>
                                                 {% endif %}
+                                                {% if speaker.image_alt and speaker.image_src %}
+                                                    <img class="clip-circle-speaker" src="{{ speaker.image_src }}" alt="{{ speaker.image_alt }}">
+                                                {% elsif speaker.image_src %}
+                                                    <img class="clip-circle-speaker" src="{{ speaker.image_src }}" alt="Profile image for {{ speaker.name }}">
+                                                {% else %}
+                                                    <script>
+                                                        placeholderImage("clip-circle-speaker",
+                                                            " {{ speaker.name }} ",
+                                                            "/assets/img/nopics/nopic#.jpg",
+                                                            "Random placeholder for {{ speaker.name }}",
+                                                            10);
+                                                    </script>
+                                                {% endif %}
                                             </a>
                                         </div>
                                     {% endif %}

_includes/speaker_box.html

@@ -1,10 +1,11 @@
 {% assign speaker = include.speaker %}
 
+<script src="{{ "/assets/js/placeholder.js" | relative_url }}"></script>
 <div class="speaker-box text-center" id="{{ speaker.id }}-id" data-speaker-info="#{{ speaker.id }}-info">
     <div class="speaker-box-inner">
 		<h3 class="h4 speaker-name"><button href="#" class="speaker-info-toggle" data-target="#{{ speaker.id }}" aria-expanded="false" aria-controls="{{ speaker.id }}-info">{{ speaker.name }}</button></h3>
 
-		{% if speaker.image_alt and speaker.image_alt %}
+		{% if speaker.image_alt and speaker.image_src %}
             <img class="clip-circle-lg" src="{{ speaker.image_src }}" alt="{{ speaker.image_alt }}">
 		{% elsif speaker.image_src %}
 			<img class="clip-circle-lg" src="{{ speaker.image_src }}" alt="Profile image for {{ speaker.name }}">

_layouts/presentation.html

@@ -16,6 +16,7 @@
     {% assign page_date = page.startTime %}
 {% endif %}
 
+<script src="{{ "/assets/js/placeholder.js" | relative_url }}"></script>
 <div class="container" id="main">
     <div class="row">
         <div class="col-12 col-sm-8 col-md-9">
@@ -63,7 +64,19 @@ <h2>Speaker(s)</h2>
                             {% if speaker %}
                                 <div class="col-sm-3 text-center">
                                     <a class="speaker-link" href="/speakers/#{{ speaker.id }}-id">
-                                        <img class="clip-circle-speaker" src="{{ speaker.image_src }}" alt="{{ speaker.name }}">
+                                        {% if speaker.image_alt and speaker.image_src %}
+                                            <img class="clip-circle-speaker" src="{{ speaker.image_src }}" alt="{{ speaker.image_alt }}">
+                                        {% elsif speaker.image_src %}
+                                            <img class="clip-circle-speaker" src="{{ speaker.image_src }}" alt="Profile image for {{ speaker.name }}">
+                                        {% else %}
+                                            <script>
+                                                placeholderImage("clip-circle-speaker",
+                                                    " {{ speaker.name }} ",
+                                                    "/assets/img/nopics/nopic#.jpg",
+                                                    "Random placeholder for {{ speaker.name }}",
+                                                    10);
+                                            </script>
+                                        {% endif %}
                                         <span>{{ speaker.name }}</span>
                                     </a>
                                 </div>