summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--_config.yml9
-rw-r--r--_includes/functions/get_article_excerpt.html2
-rw-r--r--_includes/views/pagination-item.html35
-rw-r--r--_includes/views/pagination.html6
-rw-r--r--_sass/yat/_layout.scss50
-rw-r--r--assets/images/default-image.jpegbin0 -> 4357 bytes
6 files changed, 92 insertions, 10 deletions
diff --git a/_config.yml b/_config.yml
index 9724c6b..12c16cd 100644
--- a/_config.yml
+++ b/_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
diff --git a/_includes/functions/get_article_excerpt.html b/_includes/functions/get_article_excerpt.html
index 2868b8d..b34a13f 100644
--- a/_includes/functions/get_article_excerpt.html
+++ b/_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 %}
diff --git a/_includes/views/pagination-item.html b/_includes/views/pagination-item.html
index fff6541..791fcda 100644
--- a/_includes/views/pagination-item.html
+++ b/_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 @@
{%- 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>
diff --git a/_includes/views/pagination.html b/_includes/views/pagination.html
index 014df85..a9de074 100644
--- a/_includes/views/pagination.html
+++ b/_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" -%}
diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss
index 8398ca8..8f55e5e 100644
--- a/_sass/yat/_layout.scss
+++ b/_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 {
diff --git a/assets/images/default-image.jpeg b/assets/images/default-image.jpeg
new file mode 100644
index 0000000..f72d035
--- /dev/null
+++ b/assets/images/default-image.jpeg
Binary files differ