Processing images to specific folder #412

mfasold · 2023-06-22T18:33:19Z

mfasold
Jun 22, 2023

I would like to publish my hyas site by just copying the output of npm run build to my webspace.

During build, all the images from pages (leaf bundle) get processed by hyas/images into the root folder of public. As I don't like my root folder stuffed with images, how could I change the rendering target of images to a subfolder, for example public/assets? I am new to Hugo. :)

Answered by h-enk

Jun 27, 2023

Thanks for your input! Please use the new create-hyas (v1.0.3):

npm create hyas@latest

Or, in one command with options:

npm create hyas@latest my-bootstrap-project -- --template bootstrap-starter-rec

View full answer

h-enk · 2023-06-22T18:51:11Z

h-enk
Jun 22, 2023
Maintainer

I can't reproduce your issue /I don't see this behavior with e.g. Doks v1:

Assets directory (in images subfolder): https://v1--doks.netlify.app/images/bozhin-karaivanov-3HnVKfQZGTQ-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_4763481_768x0_resize_q90_h2_lanczos.webp
Page resource: https://v1--doks.netlify.app/docs/cheat-sheets/shortcodes/bozhin-karaivanov-zs6GW81O538-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_3735066_768x0_resize_q90_h2_lanczos.webp

Deploy preview: https://v1--doks.netlify.app/

Do you have a repo you could share?

0 replies

mfasold · 2023-06-23T08:26:49Z

mfasold
Jun 23, 2023
Author

Thank you for the prompt reply. I created this clean repo for easy reproducibility.

Essentially, it is a new hyas project (created today with npm create hyas@latest, bootstrap starter, recommended plugins). As the second commit, I just added an about page with an image. When you build the page, the images used in the rendered HTML are located in the root of public/ (and some additional images are indeed rendered to public/about).

1 reply

h-enk Jun 27, 2023
Maintainer

Thanks for your input! Please use the new create-hyas (v1.0.3):

npm create hyas@latest

Or, in one command with options:

npm create hyas@latest my-bootstrap-project -- --template bootstrap-starter-rec

Answer selected by mfasold

mfasold · 2023-06-28T12:37:05Z

mfasold
Jun 28, 2023
Author

Thank you, that fixes the problem!

Btw. I noted that this latest version contains quite some changes wrt. to the version I started with some months ago (removal of RSSlink & Site.Params.footer & lazyimg, new bs themes folder, renaming of hugo.yml). Hoping to see a stable documentation soon!

1 reply

h-enk Jun 28, 2023
Maintainer

Hoping to see a stable documentation soon!

Working hard on that!

mfasold · 2023-06-28T13:42:31Z

mfasold
Jun 28, 2023
Author

Hi again! I observed a similar problem as the above: some bootstrap code is missing in the build.

Easy replicable case: Define a custom CSS class in themes/my-bootstrap-theme/assets/scss/layouts/_pages.scss and then style any element in the HTML with it. In the dev preview, all is fine. But when you build it, the contents of _pages.scss are not exported, so the styling is not available.

0 replies

h-enk · 2023-06-28T16:31:41Z

h-enk
Jun 28, 2023
Maintainer

👉 Most likely, you'll need to update your safelist or whitelister settings in ./config/postcss.config.js.

Do you have a repo you could share?

I can't reproduce your issue:

I've added to ./themes/my-bootstrap-theme/assets/scss/layouts/_pages.scss:

  .bg-yellowgreen {
    background-color: yellowgreen;
  }

And, to ./themes/my-bootstrap-theme/layouts/_default/baseof.html:

[..]
<body class="{{ delimit (.Scratch.Get "class") " " }} bg-yellowgreen">
[..]

Next ran:

pnpm build && pnpm preview

As expected:

0 replies

mfasold · 2023-06-28T19:39:09Z

mfasold
Jun 28, 2023
Author

Kindly take a look at this repo . In themes/my-bootstrap-theme/assets/scss/layouts/_pages.scss I added a new class .nav-subfolder that is used in the header of all pages - but not included in the build. Even stranger: my blog content is in a column with col-xl-8 that is also displayed correctly in the dev view (npm run dev) but not in the build. It seems that the col-xl-8 CSS definition is missing (which of course was not added by myself).

2 replies

h-enk Jun 29, 2023
Maintainer

The PostCSS process only runs on a (production) build (so, not when running the development server). That's why you notice a difference. What the PostCSS process does is strip out unused CSS based on both styles and content files defined in ./config/postcss.config.js.

You've added a layouts directory to the root of your project. So, if you add this directory to the content section of the latter file, you'll be fine! Like so:

[..]
    purgecss({
      content: [
        './node_modules/@hyas/core/layouts/**/*.html',
        './themes/my-bootstrap-theme/layouts/**/*.html',
        './content/**/*.md',
        './layouts/**/*.html',
      ],
[..]

NB) My idea with the Hyas setup is to keep things in their (to me) logical place or separated if you like (following the default Hugo directories setup):

a theme's or starter's core module (and integration module for that matter) would hold the assets and layouts directories
the theme or starter itself would hold the config, content, static, and themes directories
the themes directory could hold a theme directory with theme overrides (keeping the folder structure in place)

But, your setup also works fine (thank you Hugo for your flexibility)!

mfasold Jul 4, 2023
Author

Ah, now I understand. All unused styles are removed from the final CSS file using the purgecss library. Thank you a lot for pointing that out!

Thanks also for the high-level folder description. As I mentioned, the first Hyas version I tried did not have a themes directory. But even if it existed I probably would have put my layouts in the ./layouts folder instead ./themes/my-bootstrap-theme/layouts/ because a) all online Hugo tutorials do it that way and b) I usually would not expect a theme to know about my site structure (e.g. layouts/blog). So for Hugo newbie like me it would help to include ./layouts into the configuration above.

mfasold · 2023-07-04T11:15:08Z

mfasold
Jul 4, 2023
Author

Sorry, but I have to come back to the issue with the images. I was so happy that the images are now in place, that I did not notice that the image are now not displayed!

So the blog markdown content (in the repo above) includes an image ![Unboxing](ng_unboxing.jpg). The resulting HTML is

<div class="img-wrapper"> 
 <picture> <source data-srcset="[MULTIPLE IMAGES HERE]" type="image/webp"></picture>
</div>

But nothing will be displayed. Did I miss anything? In the previous Hyas version, this worked out-of-the-box.

Also, it would be great to know how to use the image partial with a concrete image in the template. This example did not work for me.

0 replies

h-enk · 2023-07-05T07:17:05Z

h-enk
Jul 5, 2023
Maintainer

In config/_default/params.yml you've set (line 7):

formats: [webp] # [original, webp] (default)

Reset to defaults (the original format is always needed) and it works.

This is how to use the picture (or img or figure) partial:

{{ partial "picture" (dict
  "ctx" .
  "src" "startpage-alps.jpg"
  "class" "p-1 img-fluid lazyload"
  "alt" "The alps"
) }}

Documentation is in the making. Until then see Usage Examples (Quick Start)

1 reply

mfasold Jul 5, 2023
Author

Perfect, thanks!

mfasold · 2023-07-05T09:29:55Z

mfasold
Jul 5, 2023
Author

I noticed that when I use images this way, they look blurry. That is, on initial page loading it will display a low resolution image, and it will not update it with a higher resolution image (I have a retina display). Interestingly, it will update and display the high resolution image when I inspect the page. It is the same for Firefox and Chrome browsers. Is this to be expected?

6 replies

mfasold Jul 5, 2023
Author

On the linked page, the image is nice and sharp. Maybe I did not describe the problem well enough: I don't see a blur-up effect. The browser just does not load the high-res image, it seems to select a low-res picture instead.

This is a screenshot of my blog post:

The only change I applied to params.yml is changing the widths where I reduced the selection a bit - and I just checked this, the problem persists with the default. Also after the suggested npm run clean:build command.

mfasold Jul 5, 2023
Author

Also, it looks sharp in Safari and on my mobile browser. So I see the low resolution image only in Desktop Chrome & Firefox...

h-enk Jul 5, 2023
Maintainer

Note that, also the Hugo image processing options apply — See your hugo.toml

See in particular: Hint

I really don't have a clue why we're not seeing the blur-up effect (I'll give it another thought later).

h-enk Jul 5, 2023
Maintainer

You could also try setting the sizes attribute (note that when you widen your browser a larger sized image is loaded)

See Usage as a markdown render hook

More background: HTMLImageElement: sizes property

mfasold Jul 6, 2023
Author

Thank you for the pointers. I did some tests. Firstly, the Hugo image processing options have no effect. The main issue is, that when you load the page, the two source tags and the image tag of the picture get the property sizes="230px" (in Firefox 225px for the same window size). This is clearly too small. I don't know how this property is set. You also have to open the Developer Tools before you load the page, because when clicking Inspect afterward, the size property is (correctly) set to 832px.

I found two ways to circumvent this issue. Firstly, as suggested by you, by setting the sizes attribute manually. That is, put the following into the front matter

image:
  sizes: 40em

The other way is to replace the loading: lazysizes in params.yml with any of the other options auto or lazy (they have the same effect).

Since lazysizes seems not useful once the sizes are provided manually, I would choose the second option. But I don't understand enough of the setup to suggest a real solution for the issue.

mfasold · 2023-07-10T12:53:31Z

mfasold
Jul 10, 2023
Author

Hi! I will close this as the main question of the image location is solved. If an explanation to the image loading happens to surface, I'd be happy to be informed. Thank you again for the quick help.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Thulite

Processing images to specific folder #412

{{title}}

Replies: 10 comments 11 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Thulite

Processing images to specific folder #412

mfasold Jun 22, 2023

Replies: 10 comments · 11 replies

h-enk Jun 22, 2023 Maintainer

mfasold Jun 23, 2023 Author

h-enk Jun 27, 2023 Maintainer

mfasold Jun 28, 2023 Author

h-enk Jun 28, 2023 Maintainer

mfasold Jun 28, 2023 Author

h-enk Jun 28, 2023 Maintainer

mfasold Jun 28, 2023 Author

h-enk Jun 29, 2023 Maintainer

mfasold Jul 4, 2023 Author

mfasold Jul 4, 2023 Author

h-enk Jul 5, 2023 Maintainer

mfasold Jul 5, 2023 Author

mfasold Jul 5, 2023 Author

mfasold Jul 5, 2023 Author

mfasold Jul 5, 2023 Author

h-enk Jul 5, 2023 Maintainer

h-enk Jul 5, 2023 Maintainer

mfasold Jul 6, 2023 Author

mfasold Jul 10, 2023 Author

mfasold
Jun 22, 2023

Replies: 10 comments 11 replies

h-enk
Jun 22, 2023
Maintainer

mfasold
Jun 23, 2023
Author

h-enk Jun 27, 2023
Maintainer

mfasold
Jun 28, 2023
Author

h-enk Jun 28, 2023
Maintainer

mfasold
Jun 28, 2023
Author

h-enk
Jun 28, 2023
Maintainer

mfasold
Jun 28, 2023
Author

h-enk Jun 29, 2023
Maintainer

mfasold Jul 4, 2023
Author

mfasold
Jul 4, 2023
Author

h-enk
Jul 5, 2023
Maintainer

mfasold Jul 5, 2023
Author

mfasold
Jul 5, 2023
Author

mfasold Jul 5, 2023
Author

mfasold Jul 5, 2023
Author

h-enk Jul 5, 2023
Maintainer

h-enk Jul 5, 2023
Maintainer

mfasold Jul 6, 2023
Author

mfasold
Jul 10, 2023
Author