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 <[email protected]>
pythonindia · Sep 18, 2024 · 5c337f3 · 5c337f3
1 parent cf9f518
commit 5c337f3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/src/_data/schedule.json b/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"
           }
         ]

diff --git a/src/_includes/components/schedule.liquid b/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>

diff --git a/src/css/style.css b/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;
+}