Retrieving a "Resource" back from a string which matches the resource path?

support
1

It was helpful to get this response yesterday and now I understand that Page Resources can be called upon even if they aren’t referenced in the frontmatter of the index.md. My next question is relevant if I want to add metadata to the photos I retrieved with resources. In this case I have a gallery parameter where I associate images with descriptions like so:

gallery:
    - src: "am-red.JPG"
      description: Send it baby
    - src: am-kite-sbend.jpg
      description: "whatever"
    - src: alessio-foil.jpg
      description: "gnarly"

But now I just have string returned from “ranging” those gallery images. How do I use that string to return a “resource” which can be resized and such? I’ve tried the following but am receiving errors which are indicating that those methods are not available.

                                {{ $name := .File.Dir}}

                                   {{ range .Params.gallery  }}
                                   {{ $resourceString := (printf "/%s%s" ($name) (.src))}}
                                   {{ $resourceString }}
                                   {{ $img := .Resources.Match $resourceString }}
                                   {{ $img := $img.Resize "x250" }}  
                                    <img src="{{ $img.RelPermalink }}" />
                                    <article class="article article-1 bg-image" style="background-image: url('{{ $img.RelPermalink }}');">
                                        <a href="#" target="_blank" class="article-link"></a>
                                        <div class="caption">
                                            <a href="#" class="article-title" target="_blank"><h2>{{ .Parent.Name }}</h2></a>
                                            <div class="entry-meta">
                                                <span class="published">Yesterday</span>
                                                <span class="posted-by">- By <a href="#" title="View all posts by Admin">Admin</a></span>
                                                <span class="posted-in">- in <a href="#" title="View all posts in Holiday">Holiday</a></span>
                                            </div>
                                        </div>
                                    </article>
                                {{ end }}

Thanks in advance for your time and help!

2

I may have achieved it. Feedback welcomed on if this is the preferred method. Related, I’m realizing that even upon retrieving the resized background image, all that appears in my style attribute in my html is a strange string style='ZgotmplZ'. Which is strange because I’m able to print out the full path and access it directly in my browser …

                                {{ $name := .File.Dir}}
                                {{ range .Params.gallery  }}
                                    {{ $resourceString := (printf "/%s%s" ($name) (.src))}}
                                    {{ $img := $.Resources.GetMatch .src }}
                                    {{ $img := $img.Resize "x100" }}  
                                    {{ $styleString := printf "background-image: url('%s');" $img.RelPermalink }}
                                    {{ $styleString }}
                                    <article class="article article-1 bg-image" style={{ $styleString }}>
                                        <a href="#" target="_blank" class="article-link"></a>
                                        <div class="caption">
                                            <a href="#" class="article-title" target="_blank"><h2>caption here</h2></a>
                                            <div class="entry-meta">
                                                <span class="published">Yesterday</span>
                                                <span class="posted-by">- By <a href="#" title="View all posts by Admin">Admin</a></span>
                                                <span class="posted-in">- in <a href="#" title="View all posts in Holiday">Holiday</a></span>
                                            </div>
                                        </div>
                                    </article>
                                {{ end }}
3 
<article class="article article-1 bg-image" {{ printf "style=%q" $styleString | safeHTMLAttr }}></article>

https://gohugo.io/functions/safehtmlattr/

2 Likes
4

This is one of the reasons to love Golang. Google that weird term :wink: It’s un-mis-understandable what this is about.