Adding an image to a blog post

[teresalves]

Hi everyone! :)

I wanted an image for the blogpost header like it is being done here
https://getdoks.org/blog/

this is my example.md

---
title: "ex"
description: "hello"
summary: ""
date: 2024-08-22T16:27:22+02:00
lastmod: 2023-09-07T16:27:22+02:00
draft: false
images: ["/about-me/about-me/ellie2.png"]
weight: 9999
categories: []
tags: []
contributors: []
pinned: false
homepage: false
seo:
  title: "" # custom title (optional)
  description: "" # custom description (recommended)
  canonical: "" # custom canonical URL (optional)
  noindex: false # false (default) or true
---

Hey there
<p align="center">
  <img src=/about-me/about-me/ellie2.png width=300 height=500/>
</p>

The image in the text shows up, but no header. Just this:

Should be a simple one but I don't get it. Any thoughts?

I also wanted to do something like what this example in your "Showcase" section has:
https://foreverliketh.is/blog/. -with:
1- multiple posts per row
2- a top summary of the subjects so you can click the category you want to see
This part might be more complex so I can also leave it to another discussion

Thanks a bunch!

[h-enk]

To be documented (Doks):

If page bundles are used, images with file names matching feature, cover, or thumbnail are used for image headings (and image metadata— see also Generated meta tags).

Note, you can add images to your .md pages by using Markdown or by using the img, picture, or figure shortcode.

[h-enk]

Copy node_modules/@thulite/doks-core/layouts/blog/list.html and paste it as layouts/blog/list.html. Make your changes in the latter.

Update lines 21..48 to include the column inside the loop. Something like this:

<div class="row justify-content-start">
  {{ $paginator := .Paginate (.Data.Pages) -}}
  {{ range $paginator.Pages -}}
    <div class="col-lg-8">
      <div class="card">
        {{ if site.Params.doks.imageList -}}
          {{- $images := .Resources.ByType "image" -}}
          {{- $featured := $images.GetMatch "*feature*" -}}
          {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
          {{- if $featured -}}
            {{ partial "img" (dict
            "page" .
            "src" $featured
            "alt" .Title
            "class" "rounded-top-1"
            )}}
          {{ end -}}
        {{ end -}}
        <div class="card-body">
          <article>
            <h2 class="h3"><a class="stretched-link text-body" href="{{ .RelPermalink }}">{{ .Params.title }}</a></h2>
            <p>{{ .Params.summary | safeHTML }}</p>
            {{ partial "main/blog-meta.html" . -}}
          </article>
        </div>
      </div>
    </div>
  {{ end -}}
</div>

[h-enk]

After line 18, add something like this:

    <ul class="nav justify-content-center">
      {{- $current := . -}}
      {{- $title := $current.Title | urlize -}}
      {{ range site.Taxonomies.categories.Alphabetical }}
        {{- $active := eq .Name $title -}}
        <li class="nav-item">
          <a class="nav-link{{ if $active }} active{{ end }}"{{ if $active }} aria-current="page"{{ end }} href="{{ .Page.Permalink }}">{{ .Page.LinkTitle }} ({{ .Count }})</a>
        </li>
      {{ end }}
    </ul>

[h-enk]

Also, copy node_modules/@thulite/doks-core/layouts/_default/term.html and paste it as layouts/_default/term.html. Changes again the latter — see the changes for the list template above

[teresalves]

That worked amazing, thanks so much for the quick reply!!
Just one thing, the blog post image is not centered once I click the blog post:

using:
-content/
-- blog/
--- example/
----- index.md
----- cover.png

I had to copy cp node_modules/@thulite/doks-core/layouts/blog/single.html layouts/blog/single.html and changed line 15 to have align="center"

    {{- if $featured -}}
      <div class="col-md-13", align="center">

Please let me know if this is not the correct way to do it.

Thanks again for all the help! I really appreciate it :D

[teresalves]

Just to note that side to side they can get a bit funky, but I guess i need to add the max size for images somewhere in the list.html

No time today, but I can post again if I find out.