I have the following shortcode:
{{ $image }}
<div class="colored-shadow" style="background-image:url('{{ $image | safeURL }}');"></div>
The first call to the variable is working fine but the second, within background-image, returns url("null");
This however only seems to happen in the dev tools for chrome, safari, and firefox.
I’ve tried to use the safeHTML, CSS, and safeURL but always get the same result. Is this related to how hugo parses inline CSS?
What is the value of $image, and what is the path to this image from the root of your project?
And how are you setting $image?
sorry, forgot that part. It’s the RelPermalink of a header resource.
{{ $image := "" }}
{{- with .Resources.GetMatch "header" }}
{{ $image = (.Fill "800x533").RelPermalink }}
{{ end }}
So the image file is in the page bundle directory from which you are calling the short code?
no, in this case I use the shortcode in other parts of the site. And using the variable just two lines above is working as expected.
<img src="{{ $image | safeHTML }}" alt="img-blur-shadow-blog-2" class="img-fluid border-radius-lg" loading="lazy">
Edit: I double checked and it’s not a problem of scope, the variable is defined inside the same context.
So if the image file is not inside of the page bundle, then where is it?
The image is inside a page bundle, just not the one where the shortcode is placed.
I got it working with a bizarre use of the variable.
<!-- Full shortcode -->
{{ $page := first 1 ( (where (where .Site.RegularPages ".Params.options" "!=" nil) ".Params.options.unlisted" "!=" true) ).ByPublishDate.Reverse }}
{{ range $page }}
{{ $image := "" }}
{{- with .Resources.GetMatch "header" }}{{ $image = (.Fill "800x533") }}{{ end }}
<div class="row {{ with ($.Get "rowclasses") }}{{ . }}{{ end }}">
<div class="col-lg-4 col-md-6 justify-content-center d-flex flex-column {{ with ($.Get "alignright") }}order-last{{ end }}">
<div class="card">
<div class="d-block blur-shadow-image">
<a href="{{.Permalink}}"><img src="{{ $image.RelPermalink | safeHTML }}" alt="alt text" class="img-fluid border-radius-lg" loading="lazy"></a>
</div>
<style>.colored-shadow{ background-image: url({{$image.RelPermalink | safeCSS}}); }</style>
<div class="colored-shadow" style='background-image:url({{$image.RelPermalink | safeCSS}});'></div>
</div>
</div>
<div class="col-lg-8 col-md-6 justify-content-center d-flex flex-column pl-lg-5 pt-lg-0 pt-3">
<div class="category text-primary mt-3 h6"> {{ index .Params.categories 0}}</div>
<h3 class="card-title">
<a href="{{.Permalink}}" class="text-dark">{{ .Title }}</a>
</h3>
<p class="card-description">
{{ .Summary }} <a href="{{ .Permalink}}" class="text-darker icon-move-right text-sm"> <br> {{ T "read_more"}}
<i class="fas fa-arrow-right text-xs ms-1" aria-hidden="true"></i>
</a>
</p>
{{$author := ""}}
{{ with (index .Params.authors 0) }}
{{ $author = $.Site.GetPage (printf "authors/%s/" .) }}
{{ end }}
<p class="author">
{{ if $author }}
{{ T "by"}} <a href="{{.Permalink}}" class="ms-1"><span class="font-weight-bold text-primary"> {{ $author.Params.name }}</span></a>,
{{ end }}
{{ .PublishDate | dateFormat "02-Jan-2006" }}
</p>
</div>
</div>
{{ end }}
When I run Hugo server, these two lines:
<style>.colored-shadow{ background-image: url({{$image.RelPermalink | safeCSS}}); }</style>
<div class="colored-shadow" style='background-image:url({{$image.RelPermalink | safeCSS}});'></div>
Return this HTML when I go to the source code:
<style>.colored-shadow{ background-image: url(/post/simplify-your-life-with-markdown/images/markdown-3d-logo_hud088a4c6c6daa5b47f53bc25e0d26d5b_196601_800x533_fill_q85_lanczos_smart1.jpeg); }</style>
<div class="colored-shadow" style='background-image:url(/post/simplify-your-life-with-markdown/images/markdown-3d-logo_hud088a4c6c6daa5b47f53bc25e0d26d5b_196601_800x533_fill_q85_lanczos_smart1.jpeg);'></div>
They are both correct.
Using the chrome dev tools, I get the result below.
Not only is the turned weird, it also duplicates the div.colored-shadow.
Both of these would have been useful in your initial post.
Where exactly do you see this source code – in the HTML file on disk?
And that’s what your browser sees.
I suppose that you are generating invalid HTML and that your browser tries to “fix” that. As indicated by the bogus
<style style="...">
element shown in your screenshot (a code listing would’ve been more useful, BTW). That’s not HTML, that’s pure hallucination.
Also: If {{with .Resources.GetMatch "header"}} fails, your $image variable will be empty. Which means that you expect .Resources.GetMatch "header" to always return a true value. Why do you then even check for it?
Aside: Why are you defining a style element for a class if you never really use it? Instead of all these shenanigans, a simple
<div style="background-image:url(whatever)>
suffices. No need for the class=colored-shadow in the div nor for the style element itself. And an empty div only to display a background image?
@jmooring, you’re right and I apologize.
@chrillek, yes on disk and in View > Source in the browser.
I sometimes may forget the header.
The colored-shadow div has a few settings by itself and may be used more than once in a page. The background image is meant to be the same as the previous tag. The end result is this.
I suggest running your HTML through a validator. What the developer tools show is probably a “fixed” version.
