From 0eef5254c3365626cb887f4d210e66709d83cce7 Mon Sep 17 00:00:00 2001
From: Mat Fish <matanya@daneltech.com>
Date: Sat, 20 Nov 2021 20:09:07 +0200
Subject: [PATCH] add thumbnail directive

---
 README.md                                     |  1 +
 src/behaviors/PostFieldsBehavior.php          |  4 ++
 .../blogify/_partials/postThumbnail.twig      |  4 --
 .../blogify/filters/_partials/postsList.twig  | 39 ++++++++++---------
 src/templates/blogify/listing/_entry.twig     | 39 ++++++++++---------
 src/templates/blogify/post/_entry.twig        |  4 +-
 6 files changed, 47 insertions(+), 44 deletions(-)
 delete mode 100644 src/templates/blogify/_partials/postThumbnail.twig

diff --git a/README.md b/README.md
index 0a7ab28..5b56427 100644
--- a/README.md
+++ b/README.md
@@ -69,6 +69,7 @@ In addition, entities contain contextual methods, as follows:
 * `next` get next post
 * `prev` get previous post
 * `image` get post image
+* `thumbnail` get post thumbnail (defined under Settings->Assets->Image Transforms->Blog Thumbnail)
 * `excerpt` get post excerpt
 * `content` get post content (supports Matrix field rendering. See below)
 
diff --git a/src/behaviors/PostFieldsBehavior.php b/src/behaviors/PostFieldsBehavior.php
index a093cf5..2fae01e 100644
--- a/src/behaviors/PostFieldsBehavior.php
+++ b/src/behaviors/PostFieldsBehavior.php
@@ -17,6 +17,10 @@ public function getImage()
         return $this->owner->blogifyPostImage->one();
     }
 
+    public function thumbnail() {
+        return $this->getImage()->setTransform(Handles::THUMBNAIL_TRANSFORM);
+    }
+
     public function getExcerpt()
     {
         return $this->owner->blogifyPostExcerpt;
diff --git a/src/templates/blogify/_partials/postThumbnail.twig b/src/templates/blogify/_partials/postThumbnail.twig
deleted file mode 100644
index ca93dc2..0000000
--- a/src/templates/blogify/_partials/postThumbnail.twig
+++ /dev/null
@@ -1,4 +0,0 @@
-{% do image.setTransform('blogifyThumbnail') %}
-<img src="{{ image.url }}"
-     alt="{{ image.title }}"
-     class="{{ class }}"/>
\ No newline at end of file
diff --git a/src/templates/blogify/filters/_partials/postsList.twig b/src/templates/blogify/filters/_partials/postsList.twig
index be01644..9d922e5 100644
--- a/src/templates/blogify/filters/_partials/postsList.twig
+++ b/src/templates/blogify/filters/_partials/postsList.twig
@@ -7,26 +7,27 @@
                 <div class="col-lg-4 mb-4">
                     <div class="entry2">
                         <a href="{{ post.url }}">
-                            {% include 'blogify/_partials/postThumbnail' with {image:post.image,class:'img-fluid rounded'} %}
-                        <div class="excerpt">
-                            {% for category in post.categories.all() %}
-                                <a href="{{ siteUrl }}/blog/category/{{ category.slug }}"
-                                   class="post-category text-white bg-secondary mb-3">{{ category }}</a>
-                            {% endfor %}
-                            <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
-                            <div class="post-meta align-items-center text-left clearfix">
-                                <figure class="author-figure mb-0 mr-3 float-left">
-                                    <img src="{{ authorPhoto }}"
-                                         alt="{{ post.author.fullName }}"
-                                         class="img-fluid">
-                                </figure>
-                                <span class="d-inline-block mt-1">By <a
-                                            href="{{ siteUrl }}blog/author/?author={{ post.author.username }}">{{ post.author.fullName }}</a></span>
-                                <span>&nbsp;-&nbsp; {{ post.postDate | date }}</span>
+                            <img src="{{ post.thumbnail.url }}" alt="{{ post.thumbnail.title }}"
+                                 class="img-fluid rounded">
+                            <div class="excerpt">
+                                {% for category in post.categories.all() %}
+                                    <a href="{{ siteUrl }}/blog/category/{{ category.slug }}"
+                                       class="post-category text-white bg-secondary mb-3">{{ category }}</a>
+                                {% endfor %}
+                                <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
+                                <div class="post-meta align-items-center text-left clearfix">
+                                    <figure class="author-figure mb-0 mr-3 float-left">
+                                        <img src="{{ authorPhoto }}"
+                                             alt="{{ post.author.fullName }}"
+                                             class="img-fluid">
+                                    </figure>
+                                    <span class="d-inline-block mt-1">By <a
+                                                href="{{ siteUrl }}blog/author/?author={{ post.author.username }}">{{ post.author.fullName }}</a></span>
+                                    <span>&nbsp;-&nbsp; {{ post.postDate | date }}</span>
+                                </div>
+                                {{ post.excerpt }}
+                                <p><a href="{{ post.url }}">Read More</a></p>
                             </div>
-                            {{ post.excerpt }}
-                            <p><a href="{{ post.url }}">Read More</a></p>
-                        </div>
                     </div>
                 </div>
             {% endfor %}
diff --git a/src/templates/blogify/listing/_entry.twig b/src/templates/blogify/listing/_entry.twig
index 8ecab86..b17d8ce 100644
--- a/src/templates/blogify/listing/_entry.twig
+++ b/src/templates/blogify/listing/_entry.twig
@@ -19,27 +19,28 @@
                     <div class="col-lg-4 mb-4">
                         <div class="entry2">
                             <a href="{{ post.url }}">
-                                {% include 'blogify/_partials/postThumbnail' with {image: post.image, class:'img-fluid rounded'} %}
-                            <div class="excerpt">
-                                <a href="{{ siteUrl }}blog/category/{{ post.categories[0].slug }}"
-                                   class="post-category text-white bg-secondary mb-3">
-                                    {{ post.categories[0] }}
-                                </a>
+                                <img src="{{ post.thumbnail.url }}" alt="{{ post.thumbnail.title }}"
+                                     class="img-fluid rounded"/>
+                                <div class="excerpt">
+                                    <a href="{{ siteUrl }}blog/category/{{ post.categories[0].slug }}"
+                                       class="post-category text-white bg-secondary mb-3">
+                                        {{ post.categories[0] }}
+                                    </a>
 
-                                <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
-                                <div class="post-meta align-items-center text-left clearfix">
-                                    <figure class="author-figure mb-0 mr-3 float-left">
-                                        <img src="{{ post.author.photo ? post.author.photo.url : '' }}"
-                                             alt="{{ post.author.fullName }}"
-                                             class="img-fluid">
-                                    </figure>
-                                    <span class="d-inline-block mt-1">By <a
-                                                href="{{ siteUrl }}blog/author?author={{ post.author.username }}">{{ post.author }}</a></span>
-                                    <span>&nbsp;-&nbsp; {{ post.postDate | date }}</span>
+                                    <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
+                                    <div class="post-meta align-items-center text-left clearfix">
+                                        <figure class="author-figure mb-0 mr-3 float-left">
+                                            <img src="{{ post.author.photo ? post.author.photo.url : '' }}"
+                                                 alt="{{ post.author.fullName }}"
+                                                 class="img-fluid">
+                                        </figure>
+                                        <span class="d-inline-block mt-1">By <a
+                                                    href="{{ siteUrl }}blog/author?author={{ post.author.username }}">{{ post.author }}</a></span>
+                                        <span>&nbsp;-&nbsp; {{ post.postDate | date }}</span>
+                                    </div>
+                                    {{ post.excerpt }}
+                                    <p><a href="{{ post.url }}">Read More</a></p>
                                 </div>
-                                {{ post.excerpt }}
-                                <p><a href="{{ post.url }}">Read More</a></p>
-                            </div>
                         </div>
                     </div>
                 {% endfor %}
diff --git a/src/templates/blogify/post/_entry.twig b/src/templates/blogify/post/_entry.twig
index 0d10d71..3bd94e8 100644
--- a/src/templates/blogify/post/_entry.twig
+++ b/src/templates/blogify/post/_entry.twig
@@ -100,7 +100,7 @@
                                 {% for post in blogifyRecentPosts().limit(4).all() %}
                                     <li>
                                         <a href="{{ post.url }}">
-                                            {% include 'blogify/_partials/postThumbnail' with {image: post.image, class:"mr-4"} %}
+                                            <img src="{{ post.thumbnail.url }}" alt="{{ post.thumbnail.title }}" class="mr-4">
                                             <div class="text">
                                                 <h4>{{ post.title }}</h4>
                                                 <div class="post-meta">
@@ -155,7 +155,7 @@
                     <div class="two-col d-block d-md-flex mb-4">
                         {% for post in entry.relatedPosts.limit(4).all() %}
                             <a href="{{ post.url }}" class="hentry v-height img-2 gradient ml-2"
-                               style="background-image: url({{ post.image.url }});">
+                               style="background-image: url({{ post.thumbnail.url }});">
                             <span class="post-category text-white bg-primary">
                                 {{ post.categories[0] }}
                             </span>