Multilanguage - custom landing page and images?

support
1

I’m trying to get a multilanguage theme done and I’ve encountered 2 issues:

  1. How do you get a different landing page and partials for each language?
    I’ve created mostly static /layouts/_default/index.html file (the only part that’s more “active” is the one that displays 4 latest posts). But obviously it should be different for each language.
    The same goes for partials - in my case I’d like to have /partials/header.html translated for each of the languages.
    I’ve read the following:
    Multilingual Mode | Hugo
    but to be honest I’m not any closer to figuring it out. How do I use the i18list.html? Where do I put translated parts?

  2. The landing page (/layouts/_default/index.html ) has links to images that are stored in the /static/images/ folder .
    On the default language they display correctly, on the other languages they don’t display at all. Why? How do I fix it?
    Here’s how I reference those:

                <div class="column">
                    <img src="./images/1280x960.png" alt="">
                </div>

I like how it works with page bundles, but this seems to work differently. At the moment I’ve used {{.Site.BaseURL}}.

2

You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.

See Requesting Help.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

3

I don’t have a repo. Here’s the folder structure:

Zrzut ekranu z 2022-09-11 17-45-53
Zrzut ekranu z 2022-09-11 17-45-53646×1279 60.5 KB

Here’s the /layouts/_default/index.html file:

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
    {{- partial "head.html" . -}}
</head>
<body>
    {{- partial "header.html" . -}}

    <section class="container">

        <section class="section">
            <h2 class="title is-4">Some greeting</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget enim bibendum metus feugiat rutrum. Etiam felis mauris, hendrerit sit amet eleifend sit amet, commodo nec nisl. Fusce consequat turpis eget tempus iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu nibh vel massa vulputate fringilla quis vitae justo. Suspendisse varius orci non laoreet aliquam. Aliquam eget lacus eleifend, pretium orci nec, tincidunt justo. Aenean congue sapien in malesuada eleifend. Pellentesque blandit commodo egestas.</p>
        </section>

        <section class="section">
            <h2 class="title is-5">Last entries:</h2>
            <div class="container">
                <div class="columns">
                    {{ range ( where site.RegularPages "Section" "blog" | first 4) }}
                    <div class="column">

                        <div class="card" style="max-width: 280px;">
                            <div class="card-image">
                                <a href="{{ .RelPermalink }}">
                                {{ with .Resources.GetMatch "cover.*" }}
                                  {{ with .Fill "400x300 webp"}}
                                  <img src="{{ .RelPermalink }}">
                                  {{ end }}                    
                                {{ end }}
                                </a>
                            </div>
                            <div class="card-content">
                                <div class="content">
                                    <p class="title is-4">{{ .Title }}</p>
                                </div>
                                <div class="content">
                                    {{ .Summary | truncate 120 }}
                                </div>
                            </div>
                        </div>

                    </div>
                    {{ end }}

                </div>
            </div>

        </section>

        <section class="section">
            <p>Main categories</p>

            <div class="columns is-vcentered">
                <div class="column">
                    <h3 class="title is-4 has-text-centered">Category title</h3>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
                    <div class="buttons is-centered my-3">
                        <a href="" class="button is-outlined">more...</a>
                    </div>
                    
                </div>
                <div class="column">
                    <img src="{{.Site.BaseURL}}images/1280x960.png" alt="">
                </div>
            </div>

            <div class="columns is-vcentered">
                <div class="column">
                    <img src="{{.Site.BaseURL}}images/1280x960.png" alt="">
                </div>

                <div class="column">
                    <h3 class="title is-4 has-text-centered">Category title</h3>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
                    <div class="buttons is-centered my-3">
                        <a href="" class="button is-outlined">more...</a>
                    </div>
                    
                </div>
                
            </div>
        </section>

        <section class="section">
            <div>
                <p>All tags that appeared in the articles:</p>
                <div class="tags are-medium my-3 is-centered">
                    {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
                        {{ with $.Site.GetPage (printf "/tags/%s" $name) }}
                            <span class="tag is-dark"><a class="tags-{{ $name }} has-text-white"  href="{{ .Permalink }}">{{ $name }}</a></span>
                        {{ end }}
                    {{ end }}
            </div>
            </div>
        </section>
        
    </section>
    
    {{- partial "footer.html" . -}}

</body>
</html>
4

it seems that simply creating index.html for a given language does the trick (so in my case that would be index.pl.html).
Would love to know if there’s a better way.

5

So there’s one more issue I can’t figure out. How do you get a link to the site main that would respect chosen language?
Currently I have:

<p class="title is-3"><strong><a class="has-text-black" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></strong></p>

Which obviously does not respect that and I get a link to the default main.

edit: nevermind, went a brute force route and simply did:
"{{ .Site.BaseURL }}{{ .Lang }}/"

6

Try {{ "/" | absLangURL }}

Use the language equivalent like you did or translate values in the i18n folder.

Create the language specific files inside the i18n folder based on the syntax you use with Hugo. For ToML using the example of English and French, you create a en.toml file and fr.toml file inside the i18n folder. Then to translate variables, you do it like below in both files

[title]
other = "your value here"

Then call that value in your templates/shortcodes with either {{ T "title" }} or {{ i18n "title" }}. If you have configured your languages properly, then the translated values should show when you switch languages. (Personally, I prefer this method over duplicating files in another language).

7

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