[SOLVED]Link to the article when image processing

support
1

Hi,
I am trying to manage lazyload image with the new feature for image processing.
Everything works well with the following code:

{{ $cover := .Resources.GetByPrefix "cover" }}
{{with $cover }}
{{ $scaled := .Fill "300x150" }}
<a href="{{ $scaled.Permalink }}" class="progressive replace">
<img src="{{ $scaled.Permalink }}" class="preview" alt="{{ with $.Page.Params.title }}{{ . }}{{ end }}"></a>

In addition I would like to have the article link when clicking the image itself. Therefore I replaced href with data-href for implementing the lazyload image and added href with the article URL.
The tentative code is the following:

{{ $cover := .Resources.GetByPrefix "cover" }}
{{with $cover }}
{{ $scaled := .Fill "300x150" }}
<a href="{{ .URL }}" data-href="{{ $scaled.Permalink }}" class="progressive replace">
<img src="{{ $scaled.Permalink }}" class="preview" alt="{{ with $.Page.Params.title }}{{ . }}{{ end }}"></a>

I got an error as follows:

error calling partial: template: theme/partials/home/latest.html:36:12: executing "theme/partials/home/latest.html" at <.URL>: can't evaluate field URL in type resource.Resource

What should be the URL code for href in order to point to the article itself instead of the associated image ? I tried {{ .URL }}; I got the above error, I tried {{ .Permalink }}, the link pointed to the image itself.
Thank you for your help

2

Don’t use .URL (long story).

You have to call the outer context: $.Permalink should work.

3

Thank you.
$.Permalink works but it returns the home page where I would like to return the post itself.
Do I need to add something ?

4

I would try changing the code snippet to:

<img src="{{with $cover }}{{ $scaled.Permalink }}{{ end }}"

This way you should be able to get the right .Permalink context and render that resource.

5

Sorry, but it still doesn’t work.
The link href={{ $.Permalink }} still return to home page instead of the post.

6

Link to your repo?

7

I made the repo public here:
https://gitlab.com/polar-hardboiled/polar-hardboiled.gitlab.io

i used the code in themes/black/layouts/partial/home/latest.html

8

I tested your repo and I can confirm that $.Permalink and $.Page.Permalink does not resolve to the Post Permalink but to the Home Page URL, when used in the context of .Resources in a list of posts on the Home Page.

Is there a simpler way to get the post permalink in a situation like this @bep ?

Anyway @Polarhardboiled first of all you must replace all instances of .URL with .Permalink in links that point to posts permalinks in your a tags.

To get the correct permalink in your partial at themes/black/layouts/partial/home/latest.html change your template to the following:

{{ range first 6 (after 3 (.Data.Pages.ByDate)) }}
<div class="card">
<h3>
{{ $cover := .Resources.GetByPrefix "cover" }}
<a href="{{ .Permalink }}" data-href="{{with $cover }}{{ $scaled := .Fill "300x150" }}{{ $scaled.Permalink }}{{ end }}" class="progressive replace">
{{with $cover }}
{{ $scaled := .Fill "300x150" }}
<img src="{{ $scaled.Permalink }}" class="preview" alt="{{ with $.Page.Params.title }}{{ . }}{{ end }}">
{{ end }}</a>
<a href="{{ .Permalink }}"></a> {{- .Title -}}</h3></a>
<p>{{ .Summary | safeHTML | truncate 50 }}<a href="{{ .URL }}">{{ partial "icons.html" "next" . }}</a></p>
</div>
{{ end }}

Basically what I’ve done is put the link outside of the.Resources context. There is a bit of repetition since you lazy load the scaled thumbnail but this is the only way I know to fix this.

9

Thanks a lot, it works perfectly.
SInce I would like to use it for most of images, I have to repeat the same trick everywhere, I guess. You mean that the trick is not a “pure” code but just a fallback solution to achieve what I want. Is it something which could be no sustainable on a long term basis ?

I also notice that I have to replace all instances of .URL with .Permalink.
Anyway, thanks to you and @bep for the swift and efficient help.

10

This is not a trick or a hack and it is future proof.

This is simply removing the .Permalink variable from the .Resources context. Because it seems that Hugo cannot get the correct post permalink from the home page or a list page in a situation like this.

11

OK, well noted