Hugo

Multilingual, Image Processing and Content Structure

What I am planning is to create a multilingual website by using forestry.io as an interface. Therefore I use content/uploads as a place to store images that utilize image processing.

The problem that arises is when I use Site.GetPage to call headless content, both when using translations based on filename and directories.

Here is the code and the content structure

├───archetypes
├───assetst
├───content
│   ├───bahasa
│   │   └───headless
│   │       ├───homepage
│   │       ├───outlet
│   │       └───series
│   │   
│   ├───english
│   │   └───headless
│   │       ├───homepage
│   │       ├───outlet
│   │       └───series
│   │   
│   └───uploads
├───data
├───i18n
├───layouts
├───static
└───themes
    └───phi
        ├───archetypes
        ├───layouts
        └───static
---
headless: true
title: "Hipster"
image: "hipster.webp"
snippet: "Poutine whatever tote bag photo booth asymmetrical kale chips health goth YOLO heirloom sriracha"
weight: 3
---
{{ $headless := .Site.GetPage "page" "series" }}
        {{ $reusablePages :=  $headless.Resources.Match "*.md" }}
            {{ range first 3 $reusablePages }}
            <div class="column index reverse is-full-desktop is-half-tablet is-full-mobile">
                <div class="columns is-multiline">
                    <div class="column is-half-desktop is-full-tablet is-full-mobile is-relative">
                        <div class="image-card">
                            <div class="image-wrapper is-relative">
                                {{ with .Params.image }}
                                {{ $imageResource := ($.Site.GetPage "section" "uploads").Resources.GetMatch (strings.TrimPrefix "/uploads/" . ) }}
                                <a><img src="{{ $imageResource.RelPermalink }}"></a>
                                {{ end }}
                                <div class="image-mask theme-color">
                                    <div class="image-icon">{{ partial "component/svg/search.svg"}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column is-half-desktop is-full-tablet is-full-mobile is-relative">
                        <div class="title-card has-text-centered is-relative">
                            <div class="title-wrapper">
                                <div class="heading">
                                    <h3 class="h-m is-inline is-relative"><a
                                            class="theme-font has-text-white is-capitalized">{{ .Title }}</a></h3>
                                </div>
                                <div class="snippet">
                                    <p class="is-capitalized has-text-grey-light">{{ .Params.snippet }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{ end }}

the result is <$imageResource.RelPermalink>: nil pointer evaluating resource.Resource.RelPermalink


Building sites … Total in 711 ms
Error: Error building site: failed to render pages: render of "home" failed: execute of template failed: template: index.html:21:7: executing "main" at <partial "content/homepage.html" .>: error calling partial: execute of template failed: template: partials/content/homepage.html:4:7: executing "partials/content/homepage.html" at <partial "component/section/homepage/series.html" .>: error calling partial: "E:\YUDY\WEB PROJECT\CLIENTS\Peci Iming\LIVE\Site\ptry\themes\phi\layouts\partials\component\section\homepage\series.html:35:62": execute of template failed: template: partials/component/section/homepage/series.html:35:62: executing "partials/component/section/homepage/series.html" at <$imageResource.RelPermalink>: nil pointer evaluating resource.Resource.RelPermalink

What I want to ask is

  1. Is there something wrong with the code I use?
  2. Is it possible for multiple languages to use one image source?

I am very curious when I see https://regisphilibert.com that uses multilingual, image processing and foresrty.

go version go1.11 windows/amd64
Hugo Static Site Generator v0.55.6/extended windows/amd64 BuildDate: unknown

Site.GetPage is little changed

Try to reduce complexity
{{ p := (.Site.GetPage “/uploads/” }}
check if this has a value

Get Match should have a wildcard … d´samples:

hope this helps