Display the newest published post on homepage

support
1

I want the newest published post be the homepage. In other words, how to display full content of the newest post on the homepage?
Layout of the post and homepage is the same (there is no different elements), so the newest post could be the homepage.

2

Reset the template context. For example, if you are using a base template…

layouts/
└── _default/
    ├── baseof.html
    ├── home.html
    ├── list.html
    └── single.html

and layouts/_default/home.html currently looks like this:

{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
{{ end }}

Change it to:

{{ define "main" }}
  {{ with (index (where site.RegularPages "Type" "posts").ByDate.Reverse 0) }}
    <h1>{{ .Title }}</h1>
    {{ .Content }}
  {{ end }}
{{ end }}
1 Like
3

There are some errors e.g. images inside post content are not displayed as well as buttons on the homepage. Post page works well.
Is there an option to make the newest post page as the homepage instead of embeding post content?

4

I suspect that image and link destinations in the content are relative to the content page, so when displayed in a different context (the home page), the links are broken. This can be resolved with link and image render hooks.

There’s no option, but you can do this…

content/_index.md

+++
[_build]
render = 'never'  # This is needed to avoid page collisions
+++

content/articles/my-latest-article.md

+++
title = 'My Latest Article'
date = 2023-01-08T11:36:49-08:00
draft = false
url = "index.html"

But you would need to change the url every time you create a new article (i.e., remove it from the previous article, and add it to the new article).

If I were you, I would try to make my initial recommendation work.

1 Like
5

I use Page Bundle.

How to access image set in FrontMatter and set by shortcode in post content when the post is on the Homepage?

6

Where is the image located?

What does your shortcode look like?

7

all post images (FrontMatter and images from shortcode) are located under post directory (Page Bundle) with index.md:
content/posts/firstpost/index.md

shortcode:

{{/*  For images inside posts content  */}}
<figure>
    {{ with .Get "link" }}<a href="{{ . }}">{{ end }}
        <img src="{{ .Get "src" }}" class="lightense" data-background="var(--page-background)" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }} />
    {{ if .Get "link" }}</a>{{ end }}
    {{ if .Get "caption" }}
    <figcaption>{{ .Get "caption" }}</figcaption>
    {{ end }}
</figure>

All images work when open the post page directly.

8

With your shortcode, get the image as a page resource, then the .RelPermalink method.

<figure>
  {{ with .Get "link" }}<a href="{{ . }}">{{ end }}
      {{ $src := (.Page.Resources.Get (.Get "src")).RelPermalink }}
      <img src="{{ $src }}" class="lightense" data-background="var(--page-background)" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }} />
  {{ if .Get "link" }}</a>{{ end }}
  {{ if .Get "caption" }}
  <figcaption>{{ .Get "caption" }}</figcaption>
  {{ end }}
</figure>
1 Like
9

That works in shortcode, but doesn’t on frontmatter image in single.html template. Image is in the same directory like other post images in Post Bundle.
Image url is generated correctly, but “image is not found” on browser’s console.

{{ $src := (.Page.Resources.Get ( .Params.imagelogo )).RelPermalink }}
<img class="logo-icon" alt="logo" src="{{ $src }}" />
10

I am unable to help you without seeing the source for your site. Please share a link to your repository, privately via DM if you wish.

11

Here is an example, where the homepage has been replaced by the latest post.

Each post contains a markdown link to a page resource, and a call to the figure shortcode specifying a different page resource. Finally, the home page template and the single page template both have code to display a third image, again a page resource.

git clone --single-branch -b hugo-forum-topic-42310 https://github.com/jmooring/hugo-testing hugo-forum-topic-42310
cd hugo-forum-topic-42310
hugo server

Files of interest:

  • layouts/_default/_markup/*
  • layouts/_default/home.html
  • layouts/_default/single.html
  • layouts/shortcodes/figure.html
2 Likes
12

Thank you, I will look at it deeper.

13

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