Assign fill anchor for specific photo

support
1

Smart crop works fine for most use cases, but I have some photos where the algorithm is very off and I would like to override the default.

I typically create a page resource named “cover” with a photo to use in the list template as well as display at the top of a single post.

My first thought was that page resources should have params where I could set arbitrary values, ie:

resources:
- name: cover
  src: coverphoto.jpg
  title: foo
  anchor: Center

But I don’t think this is supported. Or have I misunderstood something?

2

What you want is possible. So instead of hardcoding the anchor argument, use the front matter param.

3

oh ok…I think I’m gonna need a smaller spoon to get it right :wink:

In Content/photo/foo/index.md I have defined the cover resource as in my original post.

In my list template I have this block of code:

{{ if .Resources.GetMatch "cover" }}
    {{ $fig := .Resources.GetMatch "cover" }}
    {{ $fig.Params }}
    {{ if $fig.Params.Anchor }}<p>Poo!</p>{{ end }}

in my output $fig.Params evaluate to “map[]” and the last line does not print a new paragraph.

I’m sure it’s simple, but how can I get the content of the defined Anchor?

4

I got a bit further.

In the post the resource should be defined like so:

resources:
- name: cover
  src: coverphoto.jpg
  title: foo
  params:
    anchor: Center

In my template I then use {{ $fig.Params.anchor }} and “Center” is printed out.

However. When I add this to my figure srcset and inspect the output it is not applied:

                    <figure>
                    <a href="{{.Permalink}}">
                    <img
                        srcset="
                            {{ ($fig.Fill "576x192 $fig.Params.anchor").RelPermalink }} 576w,
                            {{ ($fig.Fill "768x256 $fig.Params.anchor").RelPermalink }} 768w,
                            {{ ($fig.Fill "992x331 $fig.Params.anchor").RelPermalink }} 992w,
                            {{ ($fig.Fill "1200x400 $fig.Params.anchor").RelPermalink }} 1200w"
                        sizes="
                            (max-width: 576px) 576px,
                            (max-width: 768px) 768px,
                            (max-width: 992px) 992px,
                            (min-width: 992px) 1200px"  
                        src="{{ ($fig.Fill "1200x400 .anchor").RelPermalink }}" alt="{{ .Title }}"/>
                    </a>
                </figure>

and output (with the real file namee, resampleFilter and quality-setting inherited from config.toml):

<img srcset="
                            /photo/hallaroya/2018-04-04%2016.52.26_hu21d62dc05ed1fb6f82c2d6baa2084e55_3061996_576x192_fill_q100_lanczos_smart1.jpg 576w,
                            /photo/hallaroya/2018-04-04%2016.52.26_hu21d62dc05ed1fb6f82c2d6baa2084e55_3061996_768x256_fill_q100_lanczos_smart1.jpg 768w,
                            /photo/hallaroya/2018-04-04%2016.52.26_hu21d62dc05ed1fb6f82c2d6baa2084e55_3061996_992x331_fill_q100_lanczos_smart1.jpg 992w,
                            /photo/hallaroya/2018-04-04%2016.52.26_hu21d62dc05ed1fb6f82c2d6baa2084e55_3061996_1200x400_fill_q100_lanczos_smart1.jpg 1200w" sizes="
                            (max-width: 576px) 576px,
                            (max-width: 768px) 768px,
                            (max-width: 992px) 992px,
                            (min-width: 992px) 1200px" src="/photo/hallaroya/2018-04-04%2016.52.26_hu21d62dc05ed1fb6f82c2d6baa2084e55_3061996_1200x400_fill_q100_lanczos_smart1.jpg" alt="Hallarøya">
5

Instead of this:

($fig.Fill "1200x400 .anchor")

Try this:

($fig.Fill (print "1200x400 " $fig.Params.anchor))
1 Like
6

Thank you! worked perfectly :+1:

2 Likes