HUGO

Link to image in meta tags when using Page Bundle

Hi all

I recently started experimenting with segmenting my blogs posts in bundles instead of loose pages.

Going from

/content
  > /blog
    > /article_1.md
    > /article_2.md
    > /article_3.md
/static
  > /img
    > /img_used_in_art1.jpg
    > /img_used_in_art2.jpg
    > /img_used_in_art3.jpg

To

/content
  > /blog
    > /article_1
      > /index.md
      > /img_used_in_art1.jpg
    > /article_2
      > /index.md
      > /img_used_in_art2.jpg
    > /article_3
      > /index.md
      > /img_used_in_art3.jpg

I now noticed that the image I link to in the front matter, which is used in e.g. the Twitter card, no longer refers to an existing image.

I changed it from

images:
- /img/img_used_in_art1.jpg

to

images:
- img_used_in_art1.jpg

but this now refers to

<meta name="twitter:image" content="https://domainname.tld/img_used_in_art1.jpg" />

while it shoud be

<meta name="twitter:image" content="https://domainname.tld/blog/article1/img_used_in_art1.jpg" />
<!-- or -->
<meta name="twitter:image" content="/blog/article1/img_used_in_art1.jpg" />

How do I get the twitter card to contain the correct URL?
Do I need to use a template in the front matter?
Do I still need to keep an image in the static/img/ folder just for this purpose?

This depends on your theme and template overrides. See:
https://discourse.gohugo.io/t/requesting-help/9132

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.

Hi @jmooring

I’ve uploaded a demo to GitHub, see GitHub - TheGroundZero/hugo-34858

Note: I don’t think this’ll matter, but I’ll mention it anyway.
Normally I’d add the theme as a submodule instead of including it in my own repo.
But since I copied the files, it got included and I kept it this way.

https://github.com/rhazdon/hugo-theme-hello-friend-ng/blob/master/layouts/partials/head.html#L39:

{{ template "_internal/twitter_cards.html" . }}

https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/twitter_cards.html#L1-L19

{{- with $.Params.images -}}
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="{{ index . 0 | absURL }}"/>
{{ else -}}
{{- $images := $.Resources.ByType "image" -}}
{{- $featured := $images.GetMatch "*feature*" -}}
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
{{- with $featured -}}
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="{{ $featured.Permalink }}"/>
{{- else -}}
{{- with $.Site.Params.images -}}
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="{{ index . 0 | absURL }}"/>
{{ else -}}
<meta name="twitter:card" content="summary"/>
{{- end -}}
{{- end -}}
{{- end }}

Without overriding templates, the easiest way to make this work:

  1. Remove the images array from the content frontmatter, AND

  2. Rename the image so that it includes the string “feature”, “cover”, or “thumbnail”. Examples:

    • feature.jpg
    • featured.jpg
    • my-feature-image.jpg
    • my-featured-image.jpg
    • cover.jpg
    • some-cover-photo.jpg
    • thumbnail.jpg
    • a-thumbnail-picture.jpg
1 Like

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