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

Using Themes
1

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

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:

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

with the following:

<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.)
  • 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)
  • My google blogger blog:
    (It should not matter, but I am including it for the sake of completeness.)

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.

2

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

1 Like
3

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.

4

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

<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?
1 Like
5

@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
post-list-page1080Ă—1280 206 KB

post-page
post-page1096Ă—1090 186 KB

6

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.

7

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.

8

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.

9

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.

10

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:

   <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.

1 Like
11

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.

1 Like
12

OK thanks.

13

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