Unable to get partial to return images generated from title

1

Based on this blogpost, I am trying to generate a pseudo-random thumbnail for each new post. First, in my data folder I have a bg.json which contains information about the colours and SVGs like so:

{
  "colours": [
    "#dfe6e9",
    "#00b894"
  ],
  "patterns": [
    "data:image/svg+xml..."
  ]
}

Next, in the partials folder, I created a new partial called thumbnail.html which contains the following code:

{{ $hash := split (md5 .Title) "" }}
		{{ $totalColours := len .Site.Data.bg.colours }}

		{{ $primaryIndex := index $hash 1 }}
		{{ $basedPrimaryIndex := printf "%x" $primaryIndex }}
		{{ $modIndex := mod $basedPrimaryIndex $totalColours }}
		{{ $primary := index .Site.Data.bg.colours $modIndex }}

		
		{{ $secondaryIndex := index $hash 2 }}
		{{ $basedSecondaryIndex := printf "%x" $secondaryIndex }}
		{{ $modIndex := mod $basedSecondaryIndex $totalColours }}
		{{ $secondary := index .Site.Data.bg.colours $modIndex }}


		{{ $bgIndex := mod (printf "%x" (index $hash 0)) (len .Site.Data.bg.patterns) }}
		{{ $bg := replace (replace (replace (replace (index .Site.Data.bg.patterns $bgIndex) "%3C" "<") "%3E" ">") "%23" "" | safeHTML) "data:image/svg+xml," "" }}
		{{ $colouredBg := replace $bg "9C92AC" $secondary }}
		<style>
			.post__header {
				--color: {{ $primary }};
				--bg: url("data:image/svg+xml;charset=utf-8;base64,{{ base64Encode $colouredBg }}");
			}
		</style>

My theme generates portfolio cards in another partial called portfolio.html. I looked through the file and replaced the original img src with a path to my partial like so:

 <div class="box-masonry">
                      {{ if and (isset .Params "image") .Params.image }}
                        {{ if eq .Params.showonlyimage true }}
                        <a href="{{ .Permalink }}" title="" class="box-masonry-image with-hover-overlay">
                        {{ else }}
                        <a href="{{ .Permalink }}" title="" class="box-masonry-image with-hover-overlay with-hover-icon">
                        {{ end }}
                            <img src="{{ partial "thumbnail.html" . }}" alt="" class="img-responsive">
                        </a>
     (...)

However, I am not seeing any images when I run my hugo server. I thought this would be the neatest way to approach things, but I think the post title (which is hashed to pick a random palette/pattern) is not being passed. How can I fix this?

image
image766×393 13.6 KB

My repo is hosted here: https://github.com/thedivtagguy/archives
The repo for the original blogpost’s code is hosted here: https://github.com/trys/random-to-a-point

2

So I went through the repo again and on line 2, the header is called by <header class="post__header"> and in the styles, .post__header has the bit that displays the background. If I place the contents of thumbnail.html inside portfolio.html, I thought I could change it to something like this:

 <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 masonry-item">
                  <div class="box-masonry">
                      {{ if and (isset .Params "image") .Params.image }}
                        {{ if eq .Params.showonlyimage true }}
                        <a href="{{ .Permalink }}" title="" class="box-masonry-image with-hover-overlay">
                        {{ else }}
                        <a href="{{ .Permalink }}" title="" class="box-masonry-image with-hover-overlay with-hover-icon">
                        {{ end }}
     //Changed to div  	<div class="post__header"></div>

                        </a>
                      {{ end }}

But still no luck. Is this even possible?

3

That is not how HTML works. You can’t have a partial output some stylesheet and then use that as src attribute for an image. That is not related to Hugo, it’s just how HTML works. And you can’t set CSS variables to values and expect they return an image when you include them. That’s not how CSS works.

I would do this at the end of thumbnail.html instead of doing the style thing:

<div style="
  width:100%;
  height:auto;
  background-image: url("data:image/svg+xml;charset=utf-8;base64,{{ base64Encode $colouredBg }}")
"></div>

(I do not know if the data:image-stuff is right, you probably know that yourself, just make sure it’s a background-image with URL)

And then in the layoutwhere you call it:

 <div class="box-masonry">
{{ if and (isset .Params "image") .Params.image }}
{{ if eq .Params.showonlyimage true }}
<a href="{{ .Permalink }}" title="" class="box-masonry-image with-hover-overlay">
{{ else }}
<a href="{{ .Permalink }}" title="" class="box-masonry-image with-hover-overlay with-hover-icon">
{{ end }}
{{ partial "thumbnail.html" . }}
</a>
...

The partial will output a div. with a little bit of stylesheet goodness you define the width and height of the image area and the div should show up. If you know height and width then add it explicitly instead of width/height I used. However, you could set the size on the surrounding a-tag and then 100%/auto will work just fine. If that is a bootstrap based site then w-100 should do the width trick if you don’t want to monitor inline CSS.

1 Like
4

Thank you so much! I admit this was a ridiculous thing in hindsight but I think I’m still figuring out how partials get pieced together in Hugo which is why I might have made this mistake.

For now, it’s still outputting a blank image but I think this might be better taken up with the original author. I’ve learnt how to output an image from a partial in any case. Thank you again :smiley:

5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.