Generating page-specific css for image previews

support
1

Hi all, I’m a bit stuck with adding background styles to images containing image previews. It’s quite easy to add an inline style to image element, but CSP will block that, it’s quite easy to add a style declaration before image element, but a hoster like Netlify doesn’t allow styles inside div, picture or figure. As I see there could be two following options - either to add background declaration to all images, then CSP will allow to manipulate background style inline (do I understand it right?), or create and load in head a page-specific css style for every page - but how is it possible?

1 Like
2

Please provide a complete example of the CSS to apply.

3

Either

{{- $backgroundStyle := printf "%s%s%s" "background: linear-gradient" $imageColorBackground "); background-size: cover; background-repeat: no-repeat;" -}}

Or

{{- $backgroundStyle = printf "%s%s%s" "background: url(data:image/webp;base64," . "); background-size: cover; background-repeat: no-repeat;" -}}
4

Would this work?

markdown

![alt](a.jpg "title")
{.foo}

rendered

<img src="a.jpg" alt="alt" title="title" class="foo">

css

.foo {
  background: linear-gradient...
}
5

Since I know this is in relation to Adding Base64-encoded and picture colors based background styles by mesetka · Pull Request #72 · danielfdickinson/image-handling-mod-hugo-dfd · GitHub

I want to clarify it’s not Netlify, it’s the html-validator plugin, because HTML5 spec doesn’t allow that.

<style>: The Style Information element - HTML: HyperText Markup Language | MDN (mozilla.org)

2 Likes
6

This would work if hugo generated .foo style. And that is what I’m trying to achieve.

7

What does that mean?

8

I think .anchorize or similar might help here. You could use the name and path of the image file as input (since the background image or colour gradient would be the same for all instances of the name image). Then the head template could generate the background style from the same image.

So, the partial (for render-hook or figure, and other image tag generators), could create the class name, and the head template would generate the actual background image and style.

Does that make any sense?

1 Like
9

The point is that image-handling-mod-hugo-dfd supposed to do all the hard job with image optimizing automatically, including generating styles for images with a background base64-encoded low-res, without a need for user to create and apply .foo1-.foo532647 manually to every image.

10

It seems like this conversation should be continued here:
https://github.com/danielfdickinson/image-handling-mod-hugo-dfd/issues

Or here:
https://github.com/danielfdickinson/image-handling-mod-hugo-dfd/discussions

11

Well, I was hoping to get someone’s else experience, maybe someone dealt already with generating page-specific CSS.

1 Like
12

But how the head template will be aware what it has to generate?

13

I’ve followed up in Adding Base64-encoded and picture colors based background styles by mesetka · Pull Request #72 · danielfdickinson/image-handling-mod-hugo-dfd · GitHub since the main moderator would rather we do that.

@bwintx @iaeiou Would you be interested in joining the discussion there?

1 Like
15

Does this trick where you override CSS in a page by appending {.foo} after the insertion require
some configuration to work? I tried it with the example you provided recently for forum
topic #45971, by inserting this definition of .foo into assets/css/main.css…

.foo {
    width: 500px;
    background: linear-gradient(45deg,blue,red);
}

Then in template layouts/_default/home.html I inserted

<img src="/a.jpg" alt="alt">
{.foo}
<h1 class="foo">Hello World<h1>

The rendered result shows the Hello World text in a gradient background that extends to 500px,
but the width of the image is not changed (and the text “{.foo}” is part of the output). If instead
the img element is modified to include class="foo" the image width is changed to 500px.

16

That syntax is known as a markdown attribute, and can only be used in markdown.

This is a paragraph.
{.foo .bar #baz}
17

I must be missing something here, because I tried using this in a Markdown file, namely, in
content/_index.md in the project mentioned (topic 45971). Here are the changes…

+++

This is a paragraph.
{.foo}

{{< figure src="/a.jpg" class="foo" >}}

## Example 1

The foo class is not applied to the text “This is a paragraph”, but it is applied to the image: it is placed in a box of width 500px with gradient background.

18

I suspect you haven’t enabled markdown attributes in your site configuration.

[markup.goldmark.parser.attribute]
title = true # default is true; applies to h1-h6 elements
block = true # default is false; applies to other block-level elements

There’s an extensive article and examples here.