Using images from param

support
1

Hello, in Hugo partial header I want to have this code

<meta property="og:image" content="resized image 1200x630 url here...">
<meta property="twitter:image" content="resized image 1200x675 url here...">

Need to tell Hugo to check if the page param have cover: image value if not then get the image from .Site.Params.coverImg.og and resize images accordingly and add the url in the code above. How can I achieve this?

resources get is not working for me :thinking:

image urls format used in the params:

# Site param

coverImg:
  og: cafe-outside.jpg

# page param

cover: cafe-waterloo.jpg
2

In this case, where is the image located?

In this case, where is the image located?

1 Like
3

Hello, images are in the assets folder

/assets/images/cafe/cafe-outside.jpg
/assets/images/cafe/Waterloo/main/cafe-waterloo.jpg

4

Do you mean:

params:
  coverImg:
    og: cafe-outside.jpg
5

I miss the point earlier, so the folder structure is like this

/config/_default/params.yaml/

# here are all the params and in here is 

coverImg:
  og: cafe/cafe-outside.jpg
6 
assets/
ā””ā”€ā”€ images/
    ā””ā”€ā”€ cafe/
        ā”œā”€ā”€ Waterloo/
        ā”‚   ā””ā”€ā”€ main/
        ā”‚       ā””ā”€ā”€ cafe-waterloo.jpg
        ā””ā”€ā”€ cafe-outside.jpg

params.yaml

coverImg:
  og: images/cafe/Waterloo/main/cafe-waterloo.jpg

front matter

title: My Page
cover: images/cafe/cafe-outside.jpg

{{ with or (resources.Get .Params.cover) (resources.Get site.Params.coverImg.og) }}
  {{ with .Fill "1200x630" }}
    <meta property="og:image" content="{{ .RelPermalink }}">
  {{ end }}
  {{ with .Fill "1200x675" }}
    <meta property="twitter:image" content="{{ .RelPermalink }}">
  {{ end }}
{{ end }}

Also, I encourage you to use lowercase for all of your files and directories.

1 Like
7

perfect, it worked :partying_face:

8

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