placing images in Hugo drives me nuts.
My problem:
Frontmatter:
heroimage: ‘hero-image.jpg’
Markdown:
Doesn’t work because my page has two languages.
How do I get the language code dynamically in front of the markup? Like this:
Thanks guys and gals!
Hello and welcome to this forum!
Hugo’s multilingual functionality even respects ‘multilingual images’. This is an interesting article.
A hero image is part of the layout. So it’s usually good practice to include them in a template file and not in the content part of a markdown file.
This is a simple approach:
{{ with .Params.hero_image }}
{{ $image := $.Resources.GetMatch . }}
{{ $image = $image.Resize "1200x" }}
<img src="{{ $image.Permalink }}">
{{ end }}
In addition:
I try to automate as much as possible and therefore put an image named featured-image.jpg (you can use hero-image or heroimage, of course) into the same folder as the index.md file.
Everything else works automatically:
{{ if .Resources.GetMatch "featured-image*" }}
{{ $image := .Resources.GetMatch "featured-image*" }}
{{ $image = $image.Resize "1200x" }}
<img src="{{ $image.Permalink }}">
{{ end }}
So, this is a slightly different approach to the one I mentioned above. Hope it helps.
Thank you!
I want to change the “hero” image for each post that’s why i need to put it in the markdown.
Even if i want to place an image in the markdown i don’t get it work with:
…because the URL of the language is missing. The URL should be:
en/images/projects/simple-image.jpg
p.s. link didn’t work
Yes, of course. This is covered by both methods mentioned above. But you do not need markdown for this—unless the position of the image changes permanently which hero images usually don’t.
For method 1 you change the image in the front matter part of your markdown files.
---
hero_image: image1
---
So images and markdown files can live in the same folder.
Method 2 requires a folder structure like this:
├── some-post
│ ├── index.md
│ └── featured-image.jpg
├── some-other-post
│ ├── index.md
│ └── featured-image.jpg
The hero/featured images have the same name, but they are different files in different folders.
I’m lost. Before i start with your advanced stuff i need to understand, how i can get a dynamic language code in the URL.
Something like:
<img src="{{.Site.Language.Params.langcode}} | {{ “/static/images/project/” | relLangURL }}{{ $src }}">
Ok.
The most simple setup:
This is your image: /static/images/my-image.jpg.
In your markdown file:
---
hero_image: /images/my-image.jpg
---
This is the way to access to access the image in a template file using relLangURL you mentioned:
{{ with .Params.hero_image }}
<img src="{{ . | relLangURL }}" alt=" ">
{{ end }}
The dot is replaced by your image!
Actually you do not need relLangURL here as images from /static/ are just copied to your /public/ folder.
{{ with .Params.hero_image }}
<img src="{{ . }}" alt=" ">
{{ end }}
Is this a solution already? I am not sure how your content is structured and why you need relLangURL.
Let me try to explain two completely different concepts of dealing with images using Hugo
Images that live anywhere in /static/ are not processed by Hugo, that is they are just copied to the corresponding folder into public. On the server they get a fix URL.
Example: /static/images/my-image.jpg will be copied to /images/my-image.jpg.
You have access to this image
using markdown in the content part of your markdown file, e.g.
 or
in the template files (for example /layouts/_default/baseof.html) as already posted.
If you want to manipulate your image using Hugo (resize, blur …) and keep text content and images together(!) your images live somewhere in your /content/ folder. (An alternative is the /assets/ folder.)
My preference is to always keep text content and images together (unless the same image is used in multiple places).
Hero images are a good example for using this method: They are always placed in the same position on each page, they belong to a single page or article (and resizing makes sense to limit the image sizes or to even make responsive images using multiple sizes in the same place).
Of course, you have access to these images using markdown, too.
Advantages: You can use Hugo’s excellent image processing possibilities, you can setup a real multilingual site using different (hero) images for each language (as mentioned here).
So you first have to decide whether 1) or 2) is a better fit. If in doubt I would always suggest 2), but this is opinionated.
A suggestion for testing a hero and content part image:
Place an image here: /content/about/my-image.jpg.
Put a markdown file into the content folder --> /content/about/index.md. Content:
---
title: About
hero_image: my-image.jpg
---
My about page content.
Put
<html>
<body>
<h1>{{ .Title }}</h1>
{{ with .Params.hero_image }}
{{ $image := $.Resources.GetMatch . }}
{{ $image = $image.Resize "1200x" }}
<img src="{{ $image.Permalink }}">
{{ end }}
{{ .Content }}
</body>
</html>
into a template file, e.g. /layouts/_default/baseof.html.
There will be to images on the page:
so pictures are all over the place… hm, that’s not what i want!
I want mine like this:
static/images/projects/project_name/
Is this possible with Hugo?
Don’t get me wrong. Hugo is an improvement from Jekyll in some ways but if i can’t have control over my resorces it’s a waste of time.
Yes, that is possible. It is mentioned above, but here is a quick summary for your personal setup:
(NB: The /static/ root folder is skipped.)
---
hero_image: /path/to/image.jpg
---
{{ with .Params.hero_image }}
<img src="{{ . }}" alt=" ">
{{ end }}
This is for a single page. If you additionally need your image in a list template wrap something like {{ range .Pages }}…{{ end }} around it.
Thanks man. But i guess we are running cycles.
Look i need a language URL in front, like THAT:
or
See that?
I need a EN for english and on the other hand a DE for the german version.
That’s all i need! How do i get that dynamically?
You did not mention this in your previous post.
You can setup to folders:
and link to the images—probably with a leading slash:
That’s all. But it’s not ‘dynamical’. You just place images in static folders.
What do you mean by “dynamically”. A real dynamical multilingual approached is described above, but I think we need more information.
Can you share a repository? I really cannot guess what you are trying to do.