Show poster preview as icon (#47)

Author: Grufoony

_includes/citation.html

@@ -8,22 +8,44 @@
   {% assign citation = include %}
 {% endif %}
 
+{% assign citation_pdf = citation.pdf | default: nil %}
+{% if citation_pdf == nil and citation.buttons.size > 0 %}
+  {% for button in citation.buttons %}
+    {% assign button_link = button.link | default: "" | downcase %}
+    {% assign button_text = button.text | default: "" | downcase %}
+    {% assign button_icon = button.icon | default: "" | downcase %}
+    {% assign is_pdf_link = button_link contains ".pdf" %}
+    {% assign is_pdf_text = button_text contains "pdf" %}
+    {% assign is_pdf_icon = button_icon contains "pdf" %}
+    {% if is_pdf_link or is_pdf_text or is_pdf_icon %}
+      {% assign citation_pdf = button.link %}
+      {% break %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
 <div class="citation-container">
   <div class="citation">
     {% if include.style == "rich" %}
       <a
-        {% if citation.link %}
+        {% if citation_pdf %}
+          href="{{ citation_pdf | relative_url | uri_escape }}"
+        {% elsif citation.link %}
           href="{{ citation.link | relative_url | uri_escape }}"
         {% endif %}
         class="citation-image"
         aria-label="{{ citation.title | default: "citation link" | regex_strip }}"
       >
-        <img
-          src="{{ citation.image | relative_url | uri_escape }}"
-          alt="{{ citation.title | default: "citation image" | regex_strip }}"
-          loading="lazy"
-          {% include fallback.html %}
-        >
+        {% if citation_pdf %}
+          {% include pdf-preview.html pdf=citation_pdf image=citation.image title=citation.title %}
+        {% else %}
+          <img
+            src="{{ citation.image | relative_url | uri_escape }}"
+            alt="{{ citation.title | default: "citation image" | regex_strip }}"
+            loading="lazy"
+            {% include fallback.html %}
+          >
+        {% endif %}
       </a>
     {% endif %}
 

_includes/pdf-preview.html

@@ -0,0 +1,16 @@
+{% if include.pdf %}
+  <object
+    data="{{ include.pdf | relative_url | uri_escape }}#page=1&view=FitH"
+    type="application/pdf"
+    aria-label="{{ include.title | default: 'PDF preview' | regex_strip }}"
+  >
+    {% if include.image %}
+      <img
+        src="{{ include.image | relative_url | uri_escape }}"
+        alt="{{ include.title | default: 'preview image' | regex_strip }}"
+        loading="lazy"
+        {% include fallback.html %}
+      >
+    {% endif %}
+  </object>
+{% endif %}

_includes/poster-list.html

@@ -2,6 +2,10 @@
 {% for poster in posters %}
 <div class="citation-container">
   <div class="citation">
+    <a href="{{ poster.pdf | relative_url }}" target="_blank" class="citation-image" aria-label="{{ poster.title | default: 'poster link' | regex_strip }}">
+      {% assign poster_image = poster.image | default: '/assets/img/poster-placeholder.png' %}
+      {% include pdf-preview.html pdf=poster.pdf image=poster_image title=poster.title %}
+    </a>
     <div class="citation-text">
       {% include icon.html icon="fa-solid fa-chalkboard" %}
       <a href="{{ poster.pdf | relative_url }}" target="_blank" class="citation-title">{{ poster.title }}</a>

_styles/citation.scss

@@ -24,12 +24,20 @@ $wrap: 800px;
   // box-shadow: var(--shadow);
 }
 
-.citation-image img {
+.citation-image {
+  position: relative;
+  width: $thumb-size;
+  flex-shrink: 0;
+  overflow: hidden; // add this
+}
+
+.citation-image object {
   position: absolute;
   inset: 0;
-  width: 100%;
+  width: calc(100% + 20px); // push scrollbar outside clip boundary
   height: 100%;
-  object-fit: contain;
+  border: 0;
+  pointer-events: none;
 }
 
 .citation-text {