From 127dfb587d6b0318a35c227efc0c5ec0aaccdc99 Mon Sep 17 00:00:00 2001
From: Tetrakern <26898880+Tetrakern@users.noreply.github.com>
Date: Mon, 14 Oct 2024 13:20:00 +0200
Subject: [PATCH] Update CUSTOMIZE.md

---
 CUSTOMIZE.md | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/CUSTOMIZE.md b/CUSTOMIZE.md
index 12c42027..866a3f6a 100644
--- a/CUSTOMIZE.md
+++ b/CUSTOMIZE.md
@@ -665,3 +665,62 @@ Custom CSS:
   gap: 6px;
 }
 ```
+
+## Add landscape image to blog post index
+
+The blog post index is a rather plain affair by design, but maybe you want to liven it up. You can change the title and meta row via filter or add completely new elements via actions, such as a landscape image on top. Keep in mind that you need to ensure a fitting image is always available.
+
+**References**
+* Action: [fictioneer_post_article_open](ACTIONS.md#do_action-fictioneer_post_article_open-post_id-args-)
+
+```php
+/**
+ * Adds landscape thumbnail to blog posts on the index page
+ *
+ * @since x.x.x
+ *
+ * @param int   $post_id  The post ID.
+ * @param array $args     Additional arguments.
+ */
+
+function child_add_landscape_post_image( $post_id, $args ) {
+  // Check render context
+  if ( ( $args['context'] ?? 0 ) !== 'loop' ) {
+    return;
+  }
+
+  // Output thumbnail
+  fictioneer_render_thumbnail(
+    array(
+      'post_id' => $post_id,
+      'title' => fictioneer_get_safe_title( $post_id ),
+      'classes' => 'post-landscape-image',
+      'lightbox' => 0,
+      'vertical' => 1
+    )
+  );
+}
+add_action( 'fictioneer_post_article_open', 'child_add_landscape_post_image', 10, 2 );
+```
+
+Custom CSS:
+
+```css
+.post-landscape-image {
+  display: block;
+  margin-bottom: 0.75rem;
+}
+
+.post-landscape-image img {
+  border-radius: var(--layout-border-radius-small);
+  height: 8rem;
+  width: 100%;
+  object-fit: cover;
+}
+
+/* If you want to remove the horizontal line: */
+.blog-posts .post:not(:first-child) {
+  border-top: 0;
+  padding-top: 0;
+}
+```