Show photos next to speaker name.

templates/top_speakers.html

@@ -26,10 +26,30 @@
   .container {
     position: relative;
   }
+
+
+  .person {
+    display: flex;
+    align-items: top;
+    margin-bottom: 10px;
+  }
+
+  .info {
+    flex: 1; /* Allow text to take remaining space */
+    padding-right: 10px; /* Add spacing between text and image */
+  }
+
+  img.photo {
+    max-width: 120px; /* Set max width for images */
+    height: auto; /* Maintain image aspect ratio */
+  }
+</style>
+
+
 </style>
 {% endblock %}
 
-{% set show_images = True %}
+{% set show_images = False %}
 
 {% block title %}Conference archive{% endblock %}
 
@@ -88,16 +108,20 @@
     {% if loop.first or loop.previtem[1] != count %}
     <h4>{{ count }} conferences</h4>
     {% endif %}
-    <div>
-      <span id="person-{{ person.id }}">
+    <div class="person">
+      {% set photo = person.photo_filename() %}
+      <span class="info" id="person-{{ person.id }}">
       👤
-      <a href="{{ url_for("person", person_id=person.id) }}">{{ person.name }}</a>
+      <a href="{{ url_for("person", person_id=person.id) }}">{{ person.name }}</a><br>
       ({{ count }} conferences, {{ person.event_count }} talks)
       {% if person.photo_filename() %}📷{% endif %}
       {% if person.wikidata_qid %}
       <a href="https://www.wikidata.org/wiki/{{ person.wikidata_qid }}">Wikidata</a>
       {% endif %}
       </span>
+      {% if photo %}
+      <img class="photo" src="{{ url_for("static", filename=photo) }}" alt="{{ person.name }}">
+      {% endif %}
     </div>
     {% endfor %}