From caeb1b738ed0916e137442ee7221d2dd25445ee9 Mon Sep 17 00:00:00 2001 From: Rise Erpelding <rise@heysparkbox.com> Date: Mon, 23 Oct 2023 06:27:47 -1000 Subject: [PATCH] feat: support featured image - adds featured image to archive page - adds featured image to top of post --- src/php/views/page.twig | 6 ++++++ src/php/views/partials/content-single.twig | 21 ++++++++++++++++----- src/scss/base.scss | 1 + src/scss/components/_post-preview.scss | 20 ++++++++++++++++++++ 4 files changed, 43 insertions(+), 5 deletions(-) create mode 100644 src/scss/components/_post-preview.scss diff --git a/src/php/views/page.twig b/src/php/views/page.twig index 9ab6467..4d3e81b 100644 --- a/src/php/views/page.twig +++ b/src/php/views/page.twig @@ -3,6 +3,12 @@ {% block content %} <div class="obj-width-limiter"> + <img + src="{{ post.thumbnail.src|resize(960) }}" + {% if post.thumbnail.alt and post.thumbnail.alt|length > 0 %} + alt="{{ post.thumbnail.alt }}" + {% endif %} + /> {{ post.content }} </div> diff --git a/src/php/views/partials/content-single.twig b/src/php/views/partials/content-single.twig index f410556..63fb327 100644 --- a/src/php/views/partials/content-single.twig +++ b/src/php/views/partials/content-single.twig @@ -1,8 +1,19 @@ -<article id="post-{{ post.id }}"> - <h2> - {{ post.title }} - </h2> +<article id="post-{{ post.id }}" class="post-preview"> + {% if post.thumbnail %} + <img + src="{{ post.thumbnail.src('thumbnail') }}" + class="post-preview__featured-image" + {% if post.thumbnail.alt and post.thumbnail.alt|length > 0 %} + alt="{{ post.thumbnail.alt }}" + {% endif %} + /> + {% endif %} <div> - {{ post.preview }} + <h2 class="post-preview__title"> + {{ post.title }} + </h2> + <div> + {{ post.preview }} + </div> </div> </article> diff --git a/src/scss/base.scss b/src/scss/base.scss index 2e9cb2f..965eae4 100644 --- a/src/scss/base.scss +++ b/src/scss/base.scss @@ -64,6 +64,7 @@ // and our UI components are often composed of Objects and Components @import 'components/main-nav'; @import 'components/pagination'; +@import 'components/post-preview'; @import 'components/primary-sidebar'; @import 'components/post-body'; @import 'components/skip-to-content'; diff --git a/src/scss/components/_post-preview.scss b/src/scss/components/_post-preview.scss new file mode 100644 index 0000000..74cbfb4 --- /dev/null +++ b/src/scss/components/_post-preview.scss @@ -0,0 +1,20 @@ +.post-preview { + margin-bottom: 1.5rem; + min-height: 9.375rem; // 150px + + @media (min-width: 50rem) { + display: flex; + column-gap: 1.5rem; + } + + &__title { + margin: 0 0 1rem; + } + + &__featured-image { + max-height: 9.375rem; // 150px + max-width: 9.375rem; // 150px + width: auto; + height: auto; + } +}