Here’s a custom Hugo shortcode that creates an image gallery in a masonry style using GLightbox. This approach will display images from a specified folder in a masonry layout, and each image will open in a lightbox when clicked.
This website contains various types of blogs, both technical and non-technical, that can be accessed through the following links: blog, notes, and desk. I wanted to have a single page where I could see all the posts I have written on this website and track my blogging progress. That’s why I created this feed page, where you can find all my blogs from this website.
Let’s break down how we can create the feed page.
- First create an
_index.mdpage in thecontent/feedfolder . - Then create a template in
/layouts/section/feed.htmlto loop the posts. - Finally create a template
/layouts/partials/post_preview_card_listto display the posts.
Yes that’s it. It will give you feed page where every blogs from every folder is listed in chronogical order.
Below is the _index.md, feed.html, and post_preview_card_list.html page for easy reference.
_index.md
---
type : "tags"
Title: "Feed"
Subtitle: "Listing all the posts in chronological order."
---
feed.html
{{ define "main" }}
<div class="container" role="main">
<div class="row">
<div class="col-md-12">
{{ with .Content }}
<div class="well">
{{.}}
</div>
{{ end }}
</div>
<div class="row justify-content-center">
{{ $paginator := .Paginate .Site.RegularPages}}
{{ range $paginator.Pages }}
// Partial page to display the contents
{{ partial "post_preview_card_list.html" .}}
{{ end }}
</div>
</div>
</div>
<div class="container">
<div class="row font-sans">
<div class="col-md-12 mt-10">
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
{{ template "_internal/pagination.html" . }}
</ul>
</nav>
</div>
</div>
</div>
{{ end }}
post_preview_card_list.html
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
<a href="{{ .Permalink }}" aria-label="Link to {{ .Title }}">
<div class="card">
<div class="card-body">
{{ if .Title }}
<h3 class="post-title">{{ .Title }}</h3>
{{ end }}
{{ if .Params.subtitle }}
<h3 class="post-subtitle">
{{ .Params.subtitle }}
</h3>
{{ end }}
<p class="post-meta">
{{ partial "post_meta_notes.html" . }}
</p>
{{ print }}
<div class="post-entry">
{{ if .Description }}
{{ .Description }}
{{ else }}
{{ .Summary }}
{{ end }}
</div>
<div class="read-more-section pt-3 ">
<h6><a href="{{ .Permalink }}" class="text-muted link-underline" alt="Link to {{ .Title }}">Read more <i
class="bi bi-arrow-right"></i></a> </h6>
</div>
</div>
{{ if .Params.tags }}
<div class="card-footer text-muted">
<div class="blog-tags">
{{ range .Params.tags }}
<a href="{{ $.Site.LanguagePrefix | absURL }}/tags/{{ . | urlize }}/">{{ . }}</a>
{{ end }}
</div>
</div>
{{ end }}
</div>
</a>
</div>
Hope you understood how we can create a feed page in Hugo.
What are your thoughts on this post?
I’d love to hear from you! Click this link to email me—I reply to every message!
Also use the share button below if you liked this post. It makes me smile, when I see it.