[Question] How to display one's featured-image.jpg at the top of a post, as well as the table of contents

[GregHilston]

Describe the bug question

Hey so I've been following your example site and have been looking at how you've written a post which is shown here as well as your config.toml.

I haven't been able to figure out how to display the featured-image.jpg at the top of one's post automatically as well as display the table of contents along the side of my post.

I don't see you specifically embedding these features in each individual post, so I am figuring there's a specific spot in your config where you turn this on automatically.

Example config.toml

baseURL = "https://www.greghilston.com/"
languageCode = "en-us"
title = "Greg Hilston"
theme = "uBlogger"
disqusShortname = "greghilston"
googleAnalytics = ""

[Taxonomies]
	tag = "tags"
	series = "series"

[params]
    author = "Greg Hilston"
    showBorder = true
    version = "2.0.X"

    [params.home]
        rss = 10
        [params.home.profile]
            enable = true
            social = true

    [params.page]
        # whether to show link to Raw Markdown content of the content
        linkToMarkdown = true

    [params.page.toc]
        # whether to enable the table of the contents
        enable = true

        # whether to keep the static table of the contents in front of the post
        keepStatic = false

        # whether to make the table of the contents in the sidebar automatically collapsed
        auto = true

    [params.summary]
        hiddenImage = false
        hiddenDescription = false
        hiddenTitle = false

    [params.search]
        enable = true

        # type of search engine ("lunr", "algolia")
        type = "algolia"

        # max index length of the chunked content
        contentLength = 4000

        # placeholder of the search bar
        placeholder = ""
        # 0.2.1 max number of results length
        maxResultLength = 10

        # snippet length of the result
        snippetLength = 30

        #HTML tag name of the highlight part in results
        highlightTag = "em"

        # whether to use the absolute URL based on the baseURL in search index
        absoluteURL = false

[Permalinks]
    blog = "/:year/:month/:filename/"
    code = "/:filename/"

[[menu.main]]
    url = "/"
    name = "Home"
    weight = 1

[[menu.main]]
    url = "/post/about/"
    name = "About"
    weight = 2

[[menu.main]]
    url = "/post/"
    name = "Posts"
    weight = 3

[[menu.main]]
    url = "/tags/"
    name = "Tags"
    weight = 4

[[menu.main]]
    url = "/categories/"
    name = "Categories"
    weight = 5

# [[menu.main]]
#     url = "/project/"
#     name = "Projects"
#     weight = 6

[[menu.main]]
    url = "https://GregHilston.com/Greg_Hilston_Resume.pdf"
    name = "Resume"
    weight = 7

[params.social]
    Github = "GregHilston"
    Linkedin = "greghilston"
    Twitter = "GregHilston"
    Email = "Gregory.Hilston@gmail.com"

[params.page.math]
    enable = true

    # KaTeX extension copy_tex
    copyTex = true

    # KaTeX extension mhchem
    mhchem = true

[params.page.code]
    # whether to show the copy button of the code block
    copy = true

    # the maximum number of lines of displayed code by default
    maxShownLines = 10

[params.page.share]
    enable = true
    Twitter = true
    Facebook = true
    Linkedin = false

[markup]
    [markup.highlight]
        codeFences = true
        guessSyntax = true
        lineNos = true
        lineNumbersInTable = true
        # false is a necessary configuration
        noClasses = false

An example of the top of a blog post

---
title: "How To Right Click To Paste In Vim"
date: 2021-05-11
tags: [vim]
resources:
- name: "featured-image"
  src: "featured-image.png"
featured-image-source: https://res.cloudinary.com/campbellsci/image/upload/w_300,h_300,c_limit,f_auto/8463.png
draft: false
---

A simple fix for right clicking to paste in Vim

<!--more-->

<more is written down here but its the blog post's content>

Expected behavior

I expect the featured-image.jpg to be visible at the top of each of my page's individual page.

I expect the table of contents to be visible in each of my posts.

Screenshots

N/A

Build Environment

• Pop OS 20.10
• 2.02
• v0.83.1

Please try to use Hugo extended version before opening the issue.

Preview Environment

Same as above

Additional Information

I imagine this is not a bug but rather a misunderstanding on how I should configure my config.toml file

Any help would be super appreciated!

[uPagge]

I don't quite understand why you flagged this as a bug. This is a question, all questions are asked in discussions, I am translating it there.

[GregHilston]

Oh woops, totally forgot about the discussion part of github. Thanks for translating this

[uPagge]

This piece is responsible for the settings of the table of contents in the configuration.

[params.page.toc]
        # whether to enable the table of the contents
        enable = true

        # whether to keep the static table of the contents in front of the post
        keepStatic = false

        # whether to make the table of the contents in the sidebar automatically collapsed
        auto = true

[GregHilston]

Perhaps I'm not following. If I have that section in my config.toml and I do not see the table of contents, why do you think that would be?

[uPagge]

I don’t know why you don’t see it. It is enough to use the search

[GregHilston]

Sorry I'm clearly not on the same page. I can try to debug the Javascript if this is an unknown problem...

I'm not sure what you mean by:

It is enough to use the search

Are there specific files, besides the ones I've shared, that might help this discussion?

I'm no further getting the featured image and table of contents to be displayed

Edit: Just to be super clear, I see the section params.page.toc and have that section above in my config.toml but I do not see the TOC itself being generated on my posts

[GregHilston]

@uPagge Sorry for the double posting, just wondering if you had any additional thoughts on this

[uPagge]

The params.page.theme is responsible for displaying the feature-image in the post. I wrote more in the release notes

[GregHilston]

Understood on that section controlling this feature. I am unable to find the additional writing you've described, can you provide me a link? I went through every release for this project looking

Upon further inspection, it does not look like any part of my params.page section and subsection is being respected. I am not seeing a linkToMarkdown, or toc, or a copy button for code blocks, or copyTex or page shares being respected.

[GregHilston]

@uPagge Just pinging you again, any updates on how to achieve this?

For example, when you see my site here: https://www.greghilston.com/

You can see that the featured image is loading on the home page, but NOT being displayed on an individual page's page https://www.greghilston.com/post/digest-emyth-revisted/

[GregHilston]

Solved this by modifying layouts/_default/single.html to look like:

{{- define "title" }}{{ .Title }} - {{ .Site.Title }}{{ end -}}

{{- define "content" -}}
    {{- $params := .Scratch.Get "params" -}}
    <div class="page single special">

        {{- /* Title */ -}}
        <h1 class="single-title pulse faster">
            {{- .Title -}}
        </h1>

        {{- /* Subtitle */ -}}
        {{- with $params.subtitle -}}
            <h2 class="single-subtitle">{{ . }}</h2>
        {{- end -}}

        <!-- GregHilston custom modification to get preview image to show-->
        {{- /* Featured image */ -}}
        {{- if not $params.summaryStyle.hiddenImage -}}
        {{- $image := $params.featuredimagepreview | default $params.featuredimage -}}
        {{- with $image -}}
            <div class="featured-image-preview">
                <a href="{{ $.RelPermalink }}">
                    {{- dict "Src" . "Title" $.Description "Resources" $.Resources "Alt" $.Title  | partial "plugin/image.html" -}}
                </a>
            </div>
        {{- end -}}
        {{- end -}}


        {{- /* Content */ -}}
        <div class="content" id="content">
            {{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction | partial "function/content.html" | safeHTML -}}
        </div>

        {{- /* Comment */ -}}
        {{- partial "comment.html" . -}}
    </div>
{{- end -}}

here's an example

It's quite ugly but the best I have available right now