feat: image support

inclusive-design · Apr 12, 2024 · fa8d7ab · fa8d7ab
1 parent 6e17d6a
commit fa8d7ab
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/src/_includes/partials/components/submission.njk b/src/_includes/partials/components/submission.njk
@@ -21,7 +21,14 @@
             {%- if not loop.last %}, {% endif %}
         {%- endfor %}
     </div>
-    {{ submission.templateContent | safe }}
+    <div class="content">
+        <div class="flow">
+            {{ submission.templateContent | safe }}
+        </div>
+        {% if submission.data.previewImage and submission.data.previewImageAlt %}
+        <img src="{{ submission.data.previewImage }}" alt="{{ submission.data.previewImageAlt }}" />
+        {% endif %}
+    </div>
     <ul class="formats" role="list">
         {% if submission.data.youtube %}
         <li class="youtube">{% include 'svg/youtube.svg' %} <a aria-describedby="{{ submission.data.uuid }}" href="{{ submission.data.youtube }}">YouTube</a>

diff --git a/src/admin/config.yml b/src/admin/config.yml
@@ -37,6 +37,8 @@ collections:
     fields:
       - {label: Title, name: title, widget: string, i18n: true}
       - {label: ID, name: uuid, widget: uuid, i18n: duplicate}
+      - {label: Preview Image, name: previewImage, widget: image, i18n: duplicate, required: false}
+      - {label: Preview Image Alternative Text, name: previewImageAlt, widget: string, i18n: true, required: false}
       - {label: Presenters, name: presenters, widget: list, i18n: duplicate}
       - {label: Presenter Affiliation, name: affiliation, widget: string, i18n: duplicate, required: false}
       - {label: Themes, name: themes, widget: relation, multiple: true, collection: themes, search_fields: [title], value_field: uuid, display_fields: [title], i18n: duplicate}

diff --git a/src/assets/styles/app.css b/src/assets/styles/app.css
@@ -212,6 +212,20 @@ legend {
     margin-block-start: 1.5rem;
 }
 
+p {
+    margin-block: 0;
+}
+
+.content {
+    align-items: flex-start;
+    display: flex;
+    gap: 2rem;
+}
+
+.content img {
+    display: none;
+}
+
 .submissions .formats {
     margin-block-start: 3rem;
 }
@@ -320,6 +334,10 @@ filter-container > * + * {
         margin-inline-start: 3.25rem;
     }
 
+    .content img {
+        display: block;
+    }
+
     filter-container > * + * {
         margin-block-start: 0;
     }