missing image fix in speaker icon (#117)

* missing image fix in speaker icon

* name check didnt make sense.

* added keynote images to schedule

* keynote speaker edge rounded

* Fixes the keynote speaker css

---------

Co-authored-by: Farhaan Bukhsh <farhaan@opencraft.com>

Author: anistark

src/_data/schedule.json

@@ -103,6 +103,7 @@
         "tracks": [
           {
             "title": "Kovid Goyal",
+            "image": "/image/keynotes/kovid.jpg",
             "type": "keynote"
           }
         ]
@@ -269,6 +270,7 @@
         "tracks": [
           {
             "title": "Usha Rengaraju",
+            "image": "/image/keynotes/usha.jpeg",
             "type": "keynote"
           }
         ]
@@ -316,6 +318,7 @@
         "tracks": [
           {
             "title": "Mars Lee",
+            "image": "/image/keynotes/mars.png",
             "type": "keynote"
           }
         ]
@@ -479,6 +482,7 @@
         "tracks": [
           {
             "title": "James Powell",
+            "image": "/image/keynotes/james.jpg",
             "type": "keynote"
           }
         ]

src/_includes/components/schedule.liquid

@@ -48,6 +48,11 @@
                   </span>
                 {% endif %}
                   <div class="card-body">
+                    {% if session.tracks[0].image %}
+                      <div class="keynote-speaker">
+                        <img src="{{session.tracks[0].image}}" onerror="this.onerror=null;this.style.objectFit='contain';" class="speaker-img" width="48" alt="" loading="lazy" />
+                      </div>
+                    {% endif %}
                     <h3 class="h5 card-title">{{session.tracks[0].title}}</h3>
                     <p class="h6 card-subtitle mt-2 mb-2 text-muted fs-5">{{session.start_time}} - {{session.end_time}}</p>
                   </div>
@@ -79,8 +84,8 @@
                       {% assign session_speakers = speakers | where: 'talkTitle', track.title %}
                       {% for speaker in session_speakers %}
                         <div class="speaker mt-4">
-                          <img src="/image/speakers/{{ speaker.name | slugify}}.jpg" onerror="this.onerror=null;this.src='/image/Group%204790.svg';this.style.objectFit='contain';"
-                class="speaker-img me-2" width="240" alt="" loading="lazy">
+                          <img src="/image/speakers/{{ speaker.name | slugify}}.jpg" onerror="this.onerror=null;this.src='/image/id.png';this.style.objectFit='contain';"
+                class="speaker-img me-2" width="240" alt="" loading="lazy" />
                           <span>
                             {{ speaker.name }}
                           </span>

src/css/style.css

@@ -1686,3 +1686,25 @@ path {
   }
 }
 
+.keynote-speaker {
+  width: 80px;
+  height: 80px;
+  margin: 0px auto;
+  position: relative;
+  border-radius: 10%;
+  overflow: hidden;
+  border-top: 1px solid #111;
+  border-bottom: 1px solid #fff;
+  background: #fff;
+  -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.8);
+  box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.8);
+}
+
+.keynote-speaker img {
+  border: none;
+  width: 80px;
+  height: auto;
+  cursor: pointer;
+  aspect-ratio: 1;
+  object-fit: cover;
+}