Blog post hero image as frontmatter

[perpil]

A common layout for blogs is to have a picture above the title and content, see an example here

I'd like to be able to specify an optional hero image as front matter that appears above the title and post header. When the image is clicked on in excerpts I'd like it to link to the post. Currently, it doesn't seem like you can have an image above the title without custom themes and when you put an image first it looks janky below the title.

Thought I'd start this discussion to see if there were others with similar thoughts. Below is how specifying an image might look in front matter.

---
draft: false 
date: 2023-04-21
image: path/to/image
categories:
  - Examples
authors: 
  - perpil
---

[Edit 4/22] Added screenshot of original because site is now updated with image above title per suggestion.

[squidfunk]

Thanks for suggesting. Have you tried just inserting the image above the title?

---
draft: false 
date: 2023-04-21
categories:
  - Examples
authors: 
  - perpil
---

![](https://placekitten.com/g/800/410)

# Title

[squidfunk]

Ideally I'd like the specific image of the blog entry to show along with the title for social previews. I think you can have a static image now, but making it dynamic based on a blog entry would be awesome.

I'm not sure I understand this one. You want to image of a blog entry to be used as a background for social cards? That, you can already do, by specifying the path to the image in the front matter, and then pick that up in your custom social card template. There will soon be a video tutorial on social cards that will explain exactly how to pull this off.

[perpil]

I believe this is the same idea: #5567 I'll watch the recent video and see if I can figure out how to do it.

[squidfunk]

Ah okay, great! Feel free to share. Otherwise, I'll investigate asap.

[perpil]

Ok I got something working with a custom social card template and custom front matter.

It took me a while to figure out how to do tints with the existing documentation. One thing I couldn't figure out, when I was defining my own variables like this:

# Background image
  - &background_image >-
    {{ page.meta.get("background_image", page.background_image) or layout.background_image or "" }}

I couldn't figure out how to reference the value of background_image so I had to duplicate code

- &tint >-
    {%- if page.meta.get("background_image", page.background_image) or layout.background_image -%}
      #000000BB
    {%- else -%}
      #FFFFFF00
    {%- endif -%}

Is there a way I can do something like this?

- &tint >-
    {%- if background_image -%}
      #000000BB
    {%- else -%}
      {{ background_color }}
    {%- endif -%}

[squidfunk]

It's currently not possible to define variables in YAML anchors and use them in subsequent anchors or templates. I'm not sure it's a good idea either, though, because then, order of anchors would matter. Thus, a little code duplication is likely more stable and a better approach than defining variables in one template and using them in another. Additionally, YAML anchors cannot be used inside Jinja templates – those are two different languages that are processed in differerent phases.

[SilentGlasses]

What @squidfunk suggested works fine, at least for me.... Just need to use a wide enough image instead.