feat: rich excerpt with image support

_config.yml

@@ -182,8 +182,13 @@ yat:
 #   heading_style: null     # Custom heading style (e.g. "font-weight: bold; text-decoration: underline")
 #   subheading_style: null  # Custom subheading style (e.g. color: gold)
 
-# Excerpt size setting
-# excerpt_size: 350
+# Excerpt settings
+# excerpt:
+#   default_image: /assets/images/default-image.jpeg  # Default image when the image style is not none
+#   image_style: z          # Image layout style (It's value could be none, left, right, top, z, z-reverse)
+#   image_width: 38.2%      # Image default width
+#   image_height: 160px     # Image default height
+#   text_size: 350          # Words default size
 
 # Pagination setting
 # paginate: 5

_includes/functions/get_article_excerpt.html

@@ -12,7 +12,7 @@
   {% assign excerpt_size = include.params.excerpt_size %}
 {% else %}
   {% assign excerpt_size = excerpt_size
-    | default: site.excerpt_size
+    | default: site.excerpt.text_size
     | default: 350 %}
 {% endif %}
 

_includes/views/pagination-item.html

@@ -4,11 +4,29 @@
 {% assign lang = post.lang %}
 {%- include functions.html func='get_reading_time' -%}
 {% assign reading_time = return %}
+
 {%- include functions.html func='get_article_excerpt' -%}
 {% assign excerpt = return %}
 {%- assign post_url = post.url | relative_url -%}
 
-<li class="{{ post_item_class }}">
+{%- assign name = 'excerpt.image_width' -%}
+{%- include functions.html func='get_value' -%}
+{%- assign image_width = return | default: '38.2%' -%}
+
+{%- assign name = 'excerpt.image_height' -%}
+{%- include functions.html func='get_value' -%}
+{%- assign image_height = return | default: '160px' -%}
+
+{%- assign name = 'excerpt.default_image' -%}
+{%- include functions.html func='get_value' -%}
+{%- assign default_image = return -%}
+
+{%- assign post_image = post.banner.image
+  | default: post.banner
+  | default: default_image
+  | default: '/assets/images/default-image.jpeg' -%}
+
+<li class="post-item {{ post_item_class }}">
   <h2 class="post-title">
     <a class="post-link" href="{{ post_url }}">
       {{ post.title | escape }}
@@ -22,11 +40,16 @@ <h2 class="post-title">
     {%- endif -%}
     <span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span>
   </div>
-  <a class="post-excerpt" href="{{ post_url }}">
-    <p>
-    {{ excerpt }} <span class="read_more">Read More</span>
-    </p>
-  </a>
+  <div class="post-excerpt">
+    {%- if post_image -%}
+    <a  class="post-image" href="{{ post_url }}" style="flex: 0 1 {{ image_width }}">
+      <div style="background-image: url({{ post_image | relative_url }}); height: {{ image_height }}"></div>
+    </a>
+    {%- endif -%}
+    <a class="post-text" href="{{ post_url }}">
+      <p>{{ excerpt }} <span class="read_more">Read More</span></p>
+    </a>
+  </div>
   <div class="post-tags">
     {%- for tag in post.tags -%}
     <a class="post-tag" href="{{ '/tags.html ' | relative_url }}#{{tag}}">#{{tag}}</a>

_includes/views/pagination.html

@@ -4,10 +4,14 @@
   {%- assign paginator = site -%}
 {%- endif -%}
 
+{%- assign name = 'excerpt.image_style' -%}
+{%- include functions.html func='get_value' default='z' -%}
+{%- assign image_style = return | append: '-image-style' -%}
+
 {%- if paginator.posts.size > 0 -%}
 <div class="pagination">
   <!-- Post list links -->
-  <ul class="post-list">
+  <ul class="post-list {{ image_style }}">
     <!-- Top list item -->
     {%- if paginator == site or paginator.page == 1 -%}
       {%- assign post_item_class = "top-post" -%}

_sass/yat/_layout.scss

@@ -301,9 +301,59 @@ html {
   }
 
   .post-excerpt {
+    display: flex;
+    position: relative;
+    gap: 15px;
+    margin-bottom: 15px;
+
+    .post-image > *:first-child {
+      flex: 0 1 38.2%;
+      width: 100%;
+      height: 100%;
+      background-size: cover;
+      background-position: center center;
+      overflow: hidden;
+      transition: 0.2s all ease-in-out;
+    }
+  }
+
+  .post-list {
+    &.none-image-style .post-item .post-excerpt .post-image {
+      display: none;
+    }
+
+    &.left-image-style .post-item .post-excerpt {
+      flex-direction: row;
+    }
+
+    &.right-image-style .post-item .post-excerpt {
+      flex-direction: row-reverse;
+    }
+
+    &.post-list.top-image-style .post-item .post-excerpt {
+      flex-direction: column;
+    }
+
+    &.z-image-style .post-item:nth-child(even) .post-excerpt {
+      flex-direction: row-reverse;
+    }
+
+    &.z-reverse-image-style .post-item:nth-child(odd) .post-excerpt {
+      flex-direction: row-reverse;
+    }
+
+    .post-item .post-excerpt {
+      @include media-query($on-laptop) {
+        flex-direction: column !important;
+      }
+    }
+  }
+
+  .post-text {
     color: $grey-color;
     word-break: break-word;
     overflow-wrap: break-word;
+    flex: 1;
   }
 
   .post-tags .post-tag {