Resizing resources referenced by front matter in content/posts

support
1

Hi,

I have all my images placed in each post like so:

content/posts
├── Post1
│   ├── post1.md
│   ├── image.png
├── Post2
│   ├── image2.jpg
│   └── post2.md

I am trying to set up my list view (listing all blog posts) with a preview of the featured image of each post, however I am having troubles resizing it or doing anything with it.

Exerpt from my front matter:

---
...
images:
  - /posts/Bitcoin_Electrum/nihal_me_featured_new.jpg
---

This is the code for the list view:

<main class="site-main section-inner thin">
  <h1 class="posts-title">{{ .Title }}</h1>
  {{- range .Data.Pages.GroupByDate "2006" }}
  <div class="posts-group">
    <div class="post-year" id="{{ .Key }}">{{ .Key }}</div>
    <ul class="posts-list">
      {{- range $page := .Pages }}
      <li class="post-item">
        {{- $scratch := newScratch }}
        {{- if isset .Params "images" }}
          {{- range $image := first 1 .Params.images }}
            {{ with resources.Get $image }}
              {{ with (.Resize "200x") }}
                {{- $scratch.Set "image" . }}
              {{ end }}
            {{ end }}
          {{ end }}
        {{- end }}

        {{- $image:= $scratch.Get "image" }}
        <a class="post-text-image" href="{{ $page.Permalink }}">
            <span class="lazyload post-image" data-bgset="{{ $image | absURL }}"></span>
            <div class="post-text">
              <span class="post-title">{{ .Title }}</span>
              <span class="post-description">{{ .Description | truncate 170 }}</span>
            </div>
          </a>
      </li>
      {{- end }}
    </ul>
  </div>
  {{- end }}
</main>

This won’t display any images in the view, however if I set the “image” scratch to {{- range $image := first 1 .Params.images }} it does display images, however they are obviously not resized then. I believe the issue is with the fact that the resized image does not have an appropriate url set, as it’s not in the /assets directory. I am also not using any page bundling or resourcing, as I don’t really understand how to leverage it, but I am trying to simply reference images like so.

2

Bump!

3

If nobody reacts to that “bump” with a fully fledged solution to your unasked question :wink: then try scratching the image only (without resizing) and then resize in the scratch.get part. You might also want to debug what exactly is in your scratch. I think if you resize and then scratch that you get a “pointer” to a temporary file/variable/construct that disappears between set/get. I would resize at the moment/place where you need a resized image, not before.

Also: are you hiding code? Because I would use the range in the first part to create the a-part. I don’t see why you would need to scratch the variable if you didn’t left out anything that is happening in between. Even then… the first 1 results in a range over one single item. The a-tag can be created inside that range.

4

It was my main thought.

5

No, I am not hiding code. I tried resizing when “getting” the scratch:

{{ define "main" }}
<main class="site-main section-inner thin">
  <h1 class="posts-title">{{ .Title }}</h1>
  {{- range .Data.Pages.GroupByDate "2006" }}
  <div class="posts-group">
    <div class="post-year" id="{{ .Key }}">{{ .Key }}</div>
    <ul class="posts-list">
      {{- range $page := .Pages }}
      <li class="post-item">
        {{- $scratch := newScratch }}
        {{- if isset .Params "images" }}
          {{- range $image := first 1 .Params.images }}
          {{ $image := $image.Resize "100x" }}
            <a class="post-text-image" href="{{ $page.Permalink }}">
              <span class="lazyload post-image" data-bgset="{{ $image | absURL }}"></span>
              <div class="post-text">
                <span class="post-title">{{ .Title }}</span>
                <span class="post-description">{{ .Description | truncate 170 }}</span>
              </div>
            </a>
          {{ end }}
        {{- end }}

        {{- $image:= $scratch.Get "image" }}
      </li>
      {{- end }}
    </ul>
  </div>
  {{- end }}
</main>
{{ end }}

Same issue:

execute of template failed: template: _default/list.html:17:29: executing "main" at <$image.Resize>: can't evaluate field Resize in type string

Could it have something to do with (_)index.md files, as I don’t have any set?

6

bump!

7

Your approach seems… complicated. How about this instead?

content
└── posts
    ├── post-1
    │   ├── featured.jpg
    │   └── index.md
    └── post-2
        ├── featured.jpg
        └── index.md

layouts/posts/list.html

{{- define "main" -}}
  <h1>{{ .Title }}</h1>
  {{- range .Pages.GroupByDate "2006"  -}}
    <h2>{{ .Key }}</h2>
    {{- range .Pages -}}
      <h3>{{ .Title }}</h3>
      {{- with .Resources.GetMatch "featured.jpg" -}}
        {{- $img := .Resize "100x" -}}
        <img src="{{ $img.RelPermalink }}">
      {{- end -}}
    {{- end -}}
  {{- end -}}
{{- end -}}

``
8 
content
└── posts
    ├── post-1
    │   ├── featured.jpg
    │   └── index.md

I don’t understand, what do I need to put into the index.md files?

9

Nothing.

10

If the index.md file is empty, then no text, or any content shows up in my content pages. Besides that their respective dates (the year) show up incorrectly (simply 0001). Another issue I’m having is the images don’t appear and besides the titles and descriptions.

{{ define "main" }}
<main class="site-main section-inner thin">
  <h1 class="posts-title">{{ .Title }}</h1>
  {{- range .Data.Pages.GroupByDate "2006" }}
  <div class="posts-group">
    <div class="post-year" id="{{ .Key }}">{{ .Key }}</div>
    <ul class="posts-list">
      {{- range $page := .Pages }}
      <li class="post-item">
        <a class="post-text-image" href="{{ $page.Permalink }}">
          {{- with .Resources.GetMatch "featured.jpg" -}}
          {{- $img := .Resize "x190" -}}
          <span class="lazyload post-image" data-bgset="{{ $img.RelPermalink | absURL }}"></span>
          {{- end -}}
          <div class="post-text">
            <span class="post-title">{{ .Title }}</span>
            <span class="post-description">{{ .Description | truncate 170 }}</span>
          </div>
        </a>
      </li>
      {{- end }}
    </ul>
  </div>
  {{- end }}
</main>
{{ end }}

EDIT: I noticed this is fixed if I move everything into the index.md files, but then images inside the file don’t seem to render (linking with /content/posts/post_name/image.jpg)

My frontmatter looks like this (now inside index.md):

---
title: "Title
description: "Desc"
date: 2019-10-03T15:54:39+02:00
publishDate: 2019-10-03T15:54:39+02:00
git: false
math: false
draft: false
comments: true
toc: true
url: /posts/post_name
images:
  - /posts/post_name/blabla_featured.jpg
---
11

When I said “Nothing” I meant that you do not need to reference the featured image in frontmatter.

Here’s a working example:

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

Then visit http://localhost:1313/posts/

12

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