Loss of an image with language code in endpoints on a multilingual site

support
1

I have a problem with images on a multilingual site in the list and single templates. English is set as the default language. The code is as follows:
<img class="object-cover" src="{{ .RelPermalink }}{{ .Page.Params.mainImg }}" />
When I work with the default English, the image is requested from:
http://localhost:13333/crypto/2024-05-06-tesla-accepts-dogecoin-payments/tesla_dogecoin.jpg
When I switch to Spanish, the request goes to the address with the language code es in the endpoint:

http://localhost:13333/es/markets/2024-05-06-analista-cripto-predice-posible-rally-4000-por-ciento-para-cardano/rally_cardano.jpg

Consequently, the image gives a 404 error. How can I solve this issue on a multilingual site?

2

You have better chances to get a quick and helpful response if you post a link to your repo here. Tiny code snippets don’t tell the whole story.

3

It’s not a public repo but this is code for list page

{{ $title := .Title }}
  {{ .Content }}
  {{ range .Pages }}
    <div class="pt-12 px-3 2xl:pt-16">
      <div
        class="relative aspect-w-2 2xl:aspect-w-4 aspect-h-3 2xl:aspect-h-2 h-full"
      >
        <img class="object-cover" src="{{ .RelPermalink }}{{ .Page.Params.mainImg }}" />
        <div
          class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-75 cursor-pointer"
        ></div>
        <div
          class="flex flex-col justify-end items-center text-center pb-6 2xl:pb-10 px-6 2xl:px-56 space-y-4"
        >
          <a
            href="{{ .FirstSection.RelPermalink }}"
            class="uppercase text-[14px] 2xl:text-[16px] text-white hover:text-gray-300 duration-200 font-WorkSans leading-4 font-semibold tracking-[1px] cursor-pointer"
          >
            {{ .Section }}
          </a>

          <div
            class="font-PTSerifBold font-bold text-[30px] 2xl:text-[42px] leading-8 text-white"
          >
            {{ .Page.Title }}
          </div>
        </div>
      </div>
    </div>
    {{ end }}
4

Where is the image in relation to the page?
What does the front matter look like?
What does the site config look like?

There’s not a lot to go on here.

5

My image is in the post folder
|–content/news/05/22/mynews
index.en.html
image.jpg

6

As far as I understand, it refers to the language subfolder. But in my case, all languages are located in the content/news/05/22/mynews folder. How do I take the path without the language code in the endpoint? How to get english path for image?

Screenshot (185)
Screenshot (185)1920×975 201 KB

7

By default, page resources are not duplicated when building a multilingual single-host site:
https://gohugo.io/content-management/page-resources/#multilingual

Even if they were duplicated, your approach of appending an image path to a page’s RelPermalink is, at best, fragile.

See this example:

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

Files of interest:

  • layouts/_default/home.html (lines 15-19)
  • layouts/_default/single.html (lines 4-8)
1 Like
8

Dear Joe Mooring,
I would like to extend my heartfelt thanks for the incredible support you’ve provided throughout the project. Your expertise and guidance were instrumental in navigating the challenges we faced and ultimately led us to a successful resolution.
Your dedication to the project’s vision and your commitment to excellence have not only inspired me but have also made a significant impact on the project’s outcome. I am deeply grateful for your help.
Thank you once again for your invaluable assistance.

1 Like
9

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