Wrong image url in og:image and twitter:image

support
1

Hi,
I’ve a problem using the internal template for og and twitter card.
My feature picture is processed with this code:

                {{with .Params.images}}
                    {{ range .}}
                    {{ if (fileExists (add `assets/` .)) }}
                    {{ $image:= resources.Get . }}
                    {{ $imageLG:= $image.Resize "750x" }}
                    {{ $imageMD:= $image.Resize "710x" }}
                    {{ $imageSM:= $image.Resize "540x" }}
                    {{ $imageXS:= $image.Resize "400x" }} 
                    <picture>
                      <source srcset="{{ $imageXS.Permalink }}" media="(max-width: 575px)">
                      <source srcset="{{ $imageSM.Permalink }}" media="(max-width: 767px)">
                      <source srcset="{{ $imageMD.Permalink }}" media="(max-width: 991px)">
                      <source srcset="{{ $imageLG.Permalink }}" media="(max-width: 1200px)">
                      <source srcset="{{ $imageLG.Permalink }}">
                      <img loading="lazy" class="width-100 margin-45px-bottom" src="{{$imageLG.Permalink}}" alt="{{ $.Page.Description }}">
                    </picture>
                    {{ else }}
                    <img loading="lazy" class="width-100 margin-45px-bottom" src="{{ . | absURL }}" alt="{{ $.Page.Description }}">
                    {{ end }}
                    {{ end }}
                {{end}}

In the og and twitter url is still the URL from

# post thumb
images:
  - "images/post/picture-feature.jpeg"

This picture is not existing after the picture processing which cause a 404 on picture load.
Is there any way to bypass that problem?

Thanks a lot
Mario

2

Not sure to understand your question.

  • your code seems unrelated to og and twitter
  • This picture is not existing after the picture processing : I never saw an image disapearing. Your problem is elsewhere.
  • what is the purpose of this code ? I do not think assets path is needed for image process
3

the images are store in the assets/images/posts folder and will be transformed by hugo into the defined sizes to fit for different sceen sizes (mobile to desktop). After the transformation they get the names with a prefix like this: _hu30ef4b7a71b0fd8167bd02be8eefbc02_150224_400x0_resize_q75_box
But there is not file left without prefix where the URL from og and twitter card is linking.

Can I tell the transformation process to keep the original as well?

4

Nothing disapear after process. Original is in /assets/ but cannot be access directly. You have to link to the resulting image.

I still think that add assets/ in your code is wrong.

But without access to your whole code, i am just guessing in the dark

where the URL from og and twitter card is linking. : they link to /static/ folder. Not /assets/.
You have to modify the og/twitter code.

Mine is something like this (simplified):

{{ with $.Params.images }}{{ range first 2 . -}}
  {{ $img_tmp := resources.Get . | fingerprint "md5" }}
  <meta property="og:image" content="{{ $img_tmp.Permalink }}" />
  <meta property="og:image:width" content="{{ $img_tmp.Width }}"/>
  <meta property="og:image:height" content="{{ $img_tmp.Height }}"/>
{{ end }}{{ end }}