# Need help with getting ".Summary" to work with the 'Stack' theme

**URL:** <https://discourse.gohugo.io/t/need-help-with-getting-summary-to-work-with-the-stack-theme/56034>\
**Category:** Using Themes\
**Tags:** pagination\
**Created:** [October 5, 2025, 11:55am UTC](https://discourse.gohugo.io/t/need-help-with-getting-summary-to-work-with-the-stack-theme/56034 "2025-10-05T11:55:43Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![MikeNakis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mikenakis/32/25210_2.png) [@MikeNakis](https://discourse.gohugo.io/u/MikeNakis)\
**Post date:** [October 5, 2025, 11:55am UTC](https://discourse.gohugo.io/t/need-help-with-getting-summary-to-work-with-the-stack-theme/56034/1 "2025-10-05T11:55:43Z")

</div>

I read the guidelines, which say to contact the author of the theme first, and I did that:

> **[Need help with getting ".Summary" to work properly · CaiJimmy hugo-theme-stack...](https://github.com/CaiJimmy/hugo-theme-stack/discussions/1185)**
>
> Thank you very much for creating this beautiful theme and for taking the time to deal with people's questions. I am converting my blog from google blogger to obsidian + hugo. I like the stack theme...

However, the author does not seem to post there frequently anymore, therefore my question is unlikely to receive an answer there. So, I hope it is okay to ask the same question here.

I am converting my blog from google blogger to obsidian + hugo. I like the stack theme a lot, but it needs some customization to suit my needs. Unfortunately, I hardly know what I am doing, either with hugo or with the stack theme. Hence, this question.

What I have is posts that begin with an image, followed by one or two paragraphs of text, followed by `<!-- more -->`, followed by the rest of the content. Hugo strips away the `<!-- more -->` comment, and gives me the part before it as `.Summary`. So, I have to customize the stack theme to make use of `.Summary` in the list-of-posts page.

I managed to do that, but I ran into a problem: the summary text would appear black. This was not visible under the light theme, but it was very visible under the dark theme.

I managed to fix that by modifying `layouts\_default\baseof.html` and replacing the following:

```html
<body class="{{ block `body-class` . }}{{ end }}">

```

with the following:

```html
<body class="article-page">

```

However, I suppose that this is hard-coding the class of every single page, and I am almost sure that this is not the right way of fixing the problem.

Additionally, the result still suffers from two issues:

- On the list-of-posts page, there is some unwanted vertical space between the post details and the image. I cannot figure out where this space comes from. It does not appear in the post page.
- On the list-of-posts page, the image in the summary is not centered. It is centered in the post page.

Help would be appreciated to find a proper fix for the black text problem instead of modifying the `body` class for all pages, and to fix the two cosmetic issues listed above.

- You can see my work-in-progress obsidian + hugo blog here:  
(It uses the stack theme as of the time of writing this.)

> **[Michael's Blog](https://michaelgr.netlify.app)**

- My hugo files from which the blog is created:  
(It references the stack theme but includes only the changed files, so the stack theme must be separately cloned in `../michael.gr-hugo-themes/hugo-theme-stack`)

> **[GitHub - mikenakis/michael.gr-hugo-files](https://github.com/mikenakis/michael.gr-hugo-files)**
>
> Contribute to mikenakis/michael.gr-hugo-files development by creating an account on GitHub.

- My google blogger blog:  
(It should not matter, but I am including it for the sake of completeness.)

> **[michael.gr](https://blog.michael.gr)**
>
> The personal blog of Mike Nakis.

Any other suggestions are welcome. For example: Is there an entirely different and better way of accomplishing what I am trying to accomplish? Should I ditch the stack theme if it is not being supported anymore? Is there another theme that is suitable for blogging and has good support for `.Summary` ? Etc.

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [October 5, 2025, 12:55pm UTC](https://discourse.gohugo.io/t/need-help-with-getting-summary-to-work-with-the-stack-theme/56034/2 "2025-10-05T12:55:45Z")

</div>

after cloning, i had to:

- adjust your config file
- add the theme

search and archives not found, but I guess these are not relevant.

but you should add two or so content pages to have something to play with

maybe a stripped down version building ootb would be a good idea

---

<div class="post-metadata">

**Author:** ![MikeNakis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mikenakis/32/25210_2.png) [@MikeNakis](https://discourse.gohugo.io/u/MikeNakis)\
**Post date:** [October 5, 2025, 2:20pm UTC](https://discourse.gohugo.io/t/need-help-with-getting-summary-to-work-with-the-stack-theme/56034/3 "2025-10-05T14:20:58Z")

</div>

Thank you for looking into this, and I am sorry that the content I prepared was not self-contained.

I made it self-contained just now, so you can check it out again, if you want, from GitHub.

I still keep the theme outside though, because I want it to be connected to the original author’s repository. I guess I should look into git submodules for that, but I have not had the chance yet.

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [October 5, 2025, 4:35pm UTC](https://discourse.gohugo.io/t/need-help-with-getting-summary-to-work-with-the-stack-theme/56034/4 "2025-10-05T16:35:53Z")

</div>

the theme normally displays the description. If I get it right this is styled with `article-subtitle`

I deleted your `base-of.html`

and changed the summary code you added to `layouts\partials\article-list\default.html`

```auto
<section class="article-subtitle">
	{{ .Summary }}
	{{ if .Truncated }}
		<a href="{{ .RelPermalink }}">Read more...</a>
	{{ end }}
</section>

```

seems to work - looks like the css only targets classes and not tags. they use `<div>` instead of `<section>`

if yoe need more adjustments on that display, you could create a customized class for example `article-summary` based on the substitle one and use that for the summary section.

for the other two points …

1. could you point us in the direction where the space is (marked screenshot) and
2. you adapted the image code for the list aswell → does it center in the original code?

---

<div class="post-metadata">

**Author:** ![MikeNakis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mikenakis/32/25210_2.png) [@MikeNakis](https://discourse.gohugo.io/u/MikeNakis)\
**Post date:** [October 5, 2025, 5:15pm UTC](https://discourse.gohugo.io/t/need-help-with-getting-summary-to-work-with-the-stack-theme/56034/5 "2025-10-05T17:15:50Z")

</div>

@irkode thanks for helping me out. Your modifications fixed the problem, thank you very much.

As for the rest… I have included two screenshots which should illustrate the problem.

 ![post-list-page](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/4/7/4781b56e8e2caa4b2a0d3e55ad33f810b1b51901.jpeg)  
 ![post-page](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/e/0/e0a02dec6b319323690e1a6c1538c645a4da33ce.jpeg)

---

<div class="post-metadata">

**Author:** ![MikeNakis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mikenakis/32/25210_2.png) [@MikeNakis](https://discourse.gohugo.io/u/MikeNakis)\
**Post date:** [October 5, 2025, 5:32pm UTC](https://discourse.gohugo.io/t/need-help-with-getting-summary-to-work-with-the-stack-theme/56034/6 "2025-10-05T17:32:56Z")

</div>

As for the original, it did not display a summary, so the question of whether it centered images in the summary or not is inapplicable.

The original made use of the `image` frontmatter property and it gave it a very special handling, which looked awesome, but was not terribly usable.

---

<div class="post-metadata">

**Author:** ![MikeNakis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mikenakis/32/25210_2.png) [@MikeNakis](https://discourse.gohugo.io/u/MikeNakis)\
**Post date:** [October 5, 2025, 5:38pm UTC](https://discourse.gohugo.io/t/need-help-with-getting-summary-to-work-with-the-stack-theme/56034/7 "2025-10-05T17:38:49Z")

</div>

As I look at it now I realize another problem, which is most probably related to the centering and spacing problem, and might help explain it and find a solution for it.

On the blog-list page, the text “This is a summary of my latest post.” and “Read more…” is too close to the edge of the frame, whereas the description (above the image) has a nice margin.

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [October 5, 2025, 5:49pm UTC](https://discourse.gohugo.io/t/need-help-with-getting-summary-to-work-with-the-stack-theme/56034/8 "2025-10-05T17:49:37Z")

</div>

I’m fairly certain that your issues are CSS ones. For example, you could set  
`text-align: center` on the paragraph containing the image to center it.

But neither that nor the margins (“too close to the edge”) are directly related to Hugo. You must provide the values that you deem useful/nice/appropriate in your custom CSS. And your theme’s documentation should tell you how to provide a custom CSS file.

---

<div class="post-metadata">

**Author:** ![MikeNakis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mikenakis/32/25210_2.png) [@MikeNakis](https://discourse.gohugo.io/u/MikeNakis)\
**Post date:** [October 5, 2025, 5:52pm UTC](https://discourse.gohugo.io/t/need-help-with-getting-summary-to-work-with-the-stack-theme/56034/9 "2025-10-05T17:52:18Z")

</div>

I know that ideally I should be asking the creator of the theme, but as I explained in the original post, the theme seems to be abandoned, so it is unlikely that my question, which I have already posted to his github discussions, will receive an answer.

The values that I deem useful/nice/appropriate are the values that would make the post-list page formatted in the same way as the post page. That’s why I have posted the screenshots.

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [October 5, 2025, 6:10pm UTC](https://discourse.gohugo.io/t/need-help-with-getting-summary-to-work-with-the-stack-theme/56034/10 "2025-10-05T18:10:36Z")

</div>

Well, as I said, that’s a CSS issue. You must tweak it so that it does what you want. Your browser’s developer tools can help with that.

In your theme’s `assets/scss` directory, you’ll see a file `custom.scss`. Put your CSS (or SCSS) rules there and see where it gets you.

But even so: You might want to think about using another theme. For example, the `list` partial does this:

```auto
   <h3 class="section-count">{{ T "list.page" (len .Pages) }}</h3>
   <h1 class="section-term">{{ .Title }}</h1>
   {{ with .Params.description }}
          <h2 class="section-description">{{ . }}</h2>
   {{ end }}

```

h3 - h1 - h2 is considered bad semantics, especially for accessibility reasons.

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [October 5, 2025, 6:35pm UTC](https://discourse.gohugo.io/t/need-help-with-getting-summary-to-work-with-the-stack-theme/56034/11 "2025-10-05T18:35:27Z")

</div>

not only css - also kind of holding it wrong - you mess up the internal structure of divs and classes with your customization

#### The Theme uses a frontmatter image parameter

to display an image on the page and on the list.  
looks like that image is always zoomed, and you did not like it.

The image is included as an img tag inside an `<div class="article-image">` having some attributes and I suppose there are some styles behind.

#### You include the image in the Content.

which is rendered by the themes render-image hook and integrated into a figure element. (and just normal part of the summary with your changes)

no additional `<div class="article-image">` div here.

–  
it also looks like photoswipe is triggered in the ootb behavior.

after all it is a decision to go with the theme way and adjust styling of the image parameter  
or ge with the content image and tweak to render hook …

and yes in both ways you will have to dig into the CSS/sccs - I’m out here.

---

<div class="post-metadata">

**Author:** ![MikeNakis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mikenakis/32/25210_2.png) [@MikeNakis](https://discourse.gohugo.io/u/MikeNakis)\
**Post date:** [October 5, 2025, 7:31pm UTC](https://discourse.gohugo.io/t/need-help-with-getting-summary-to-work-with-the-stack-theme/56034/12 "2025-10-05T19:31:18Z")

</div>

OK thanks.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [October 7, 2025, 7:31pm UTC](https://discourse.gohugo.io/t/need-help-with-getting-summary-to-work-with-the-stack-theme/56034/13 "2025-10-07T19:31:41Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.