Multilingual, Image Processing and Content Structure

support
1

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

2

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

1 Like
3

I am running into the same issue and use exactly the same code with TrimPrefix. Did you find a solution for it?
I don’t understand how to apply the suggestion to use .Site.GetPage.

@regis Do you maybe have an advice?

4

Yes, and @Yudy_Ananda I’m sorry I didn’t see that thread earlier. In a multilingual context your project now olds several sites (one for each language).

.Site or site refers to the current site (in engligh, your english site and its content, in spanish your spanish site and its content etc…).

so with the given example .Site.GetPage "/uploads" will only find a page on the english “pages” of the site.

That’s when .Sites becomes handy as this slice contains every sites (every language sites) and you can fetch the default language site using .Sites.First.

So:

{{ $uploads := .Sites.First.GetPage "/uploads" }}

Hope this helps.

2 Likes
5

Thanks @regis. That works like a charm. And thanks for the explanation.

6

Awesome, @regis thanks for answering though you help me alot :slight_smile:

What about the source it self, Do I still have to use multiple image source for every languange?

By the way I’m still curious about your image configuration in Forestry

7

Well considering you’re always going to use the “english” upload bundle, you can have Forestry point to your upload bundle path content/en/uploads/ (or else) and every images will be added there from now on.

(in case it was not clear, I read from you example that you are use “per directory” structure for languages, and therefor you should have your upload bundle live under the english dir.

So no, I only see one image source.

1 Like