Author updates to hero

README.md

@@ -112,13 +112,15 @@ content:
   affiliation:
     name: University Name
     department: Department Name
-    url: https://example.com
+    url: https://example.com # (optional)
   type: Paper
   authors:
     - name: First Author
-      url: https://example.com
+      url: https://example.com # (optional)
+      img: /path/to/author-image.jpg # (optional)
     - name: Second Author
-      url: https://example.com
+      url: https://example.com # (optional)
+      img: /path/to/author-image.jpg # (optional)
   links:
     - label: Paper Link
       url: https://doi.org/10.1145/XXXXXXX.XXXXXXX

_includes/author.html

@@ -0,0 +1,14 @@
+<span class="author">
+  {%- if author.img -%}
+    <img
+      src="{{ author.img }}"
+      alt=""
+      class="author-img"
+    >
+  {%- endif -%}
+  {%- if author.url -%}
+    <a href="{{ author.url }}" target="_blank" class="link">{{ author.name | escape }}</a>
+  {%- else -%}
+    {{ author.name | escape }}
+  {%- endif -%}
+</span>

_includes/home-header.html

@@ -1,46 +1,50 @@
 <header id="home-header">
   <ul class="header-pill-group">
+    {% if site.conference.name and site.conference.year %}
+      <li class="header-pill">
+        {{ site.conference.name }}
+        {{ site.conference.year }}
+      </li>
+    {% endif %}
     {% if site.content.type %}
-    <li class="header-pill">{{ site.content.type }}</li>
-    {% endif %} {% if site.conference.name and site.conference.year %}
-    <li class="header-pill">
-      {{ site.conference.name }} {{ site.conference.year }}
-    </li>
+      <li class="header-pill">{{ site.content.type }}</li>
     {% endif %}
   </ul>
   <h1>{{ site.title }}</h1>
   {% if site.content.authors %}
-  <p class="authors">
-    {%- for author in site.content.authors -%} {%- if forloop.first -%}
-    <a href="{{ author.url }}" target="_blank" class="link"
-      >{{ author.name | escape }}</a
-    >
-    {%- elsif forloop.last -%} {%- if forloop.length > 1 -%}&nbsp;&amp; {% endif
-    -%}
-    <a href="{{ author.url }}" target="_blank" class="link"
-      >{{ author.name | escape }}</a
-    >
-    {%- else -%} ,
-    <a href="{{ author.url }}" target="_blank" class="link"
-      >{{ author.name | escape }}</a
-    >
-    {%- endif -%} {%- endfor -%}
-  </p>
-  {% endif %} {% if site.content.affiliation %}
-  <p class="affiliation">
-    <a href="{{ site.content.affiliation.url }}" target="_blank" class="link"
-      >{{ site.content.affiliation.department }}</a
-    >, {{ site.content.affiliation.name }}
-  </p>
+    <p class="authors">
+      {%- for author in site.content.authors -%}
+        {%- if forloop.first -%}
+          {% include author.html author=author %}
+        {%- elsif forloop.last -%}
+          {%- if forloop.length > 1 -%}
+            &nbsp;&amp;&nbsp;
+          {%- endif -%}
+          {%
+            include author.html
+            author=author
+          %}
+        {%- elsif forloop.last -%}
+        {%- else -%}
+          , {% include author.html author=author %}
+        {%- elsif forloop.last -%}
+        {%- endif -%}
+      {% endfor -%}
+    </p>
+  {% endif %}
+  {% if site.content.affiliation %}
+    <p class="affiliation">
+      <a href="{{ site.content.affiliation.url }}" target="_blank" class="link">
+        {{- site.content.affiliation.department -}}</a
+      >, {{ site.content.affiliation.name }}
+    </p>
   {% endif %}
   <ul class="header-button-group">
     {%- for link in site.content.links -%}
-    <li>
-      <a href="{{ link.url }}" target="_blank" class="header-button"
-        >{{ link.label }} ↗</a
-      >
-    </li>
+      <li>
+        <a href="{{ link.url }}" target="_blank" class="header-button">{{ link.label }} ↗</a>
+      </li>
     {%- endfor -%}
   </ul>
 </header>
-<hr />
+<hr>

_sass/layout/_home-header.scss

@@ -23,6 +23,30 @@
 
   .authors {
     margin-bottom: $spacing * 4;
+    display: flex;
+    flex-wrap: wrap;
+    gap: $spacing 0;
+
+    .author:first-child,
+    .author:last-child {
+      margin-left: 0;
+    }
+
+    .author {
+      display: flex;
+      align-items: center;
+      gap: $spacing;
+      margin-left: $spacing;
+    }
+
+    .author-img {
+      width: 6 * $spacing;
+      height: 6 * $spacing;
+      border-radius: 50%;
+      object-fit: cover;
+      object-position: center;
+      display: inline-block;
+    }
   }
 }