How to avoid carousel images being darkened?

[ckamps]

When I use the carousel component on my Hinode site, the images appear darkened.

For example, here's what an image looks like when displayed via carousel:

Yet, the actual image isn't darkened:

Here's the associated code:

{{< carousel >}}
  {{< img src="img/parcel/parcel-in-context.png" >}}
  {{< img src="img/drone/home-bridge.jpeg" >}}
  {{< img src="img/parcel/google-maps-screenshot.png" >}}
  {{< img src="img/parcel/2232-aerial.png" >}}
  {{< img src="img/parcel/2232-topo.png" >}}
{{< /carousel >}}

When I use the image component, the darkening doesn't occur.

I wonder if somehow the automatic darkening is related to modes. Even when I toggle to light mode, the images are still darkened.

Hugo version: 0.122.0

params.yaml

main:
  separator: '-'
  description: ...
  endorse: false
  enableDarkMode: true
  modes:
    - light
    - dark
  canonifyAssetsURLs: false
  footerBelowFold: false
  loading: lazy
  externalLinks:
    cue: true
    tab: true
  build:
    transpiler: dartsass

navigation:
  logo: 
  color: body
  fixed: true
  horizontal: false
  offset: 3em
  search: false
  searchModal: false
  breadcrumb: false
  toc: true
  sidebar: false
  size: lg

home:
  fullCover: true
  centerHeadline: true
  style: gradient-featured
  feature:
    orientation: stacked
    color: ''
    width: 7
    align: start

sharing:
  enabled: false

modules:
  core:
    - bootstrap
    - flexsearch
    - fontawesome
  optional:
    - leaflet
    - katex
    - lottie
  excludeSCSS:
    - bootstrap
  disableTemplate:
    - katex
  katex:
    state: defer
  fontawesome:
    inline: true
    debug: true
    skipMissing: false

[markdumay]

The carousel applies a gradient filter to its images to improve contrast. You can adjust the gradient filter, see #287.

[ckamps]

I followed the approach as referenced for the template use case, but have not seen a change in gradient.

#287 (comment)

My build automation includes:

      - name: Install Dart Sass Embedded # Installs dart-sass
        run: sudo snap install dart-sass-embedded
      - name: Set up Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: latest
          extended: true
      - name: Build
        run: hugo
      - name: Deploy to S3
        run: hugo deploy --maxDeletes -1 --invalidateCDN

[markdumay]

I tested this locally just now and it still works as expected. There could be multiple reasons why your production (?) site is not updated as expected. I'd suggest to break it down into smaller steps. What happens if you run your site locally?

Follow the next steps to remove the gradient filter in a demo site:

1. Follow step 1 and step 2 of the Hinode installation guide (Hugo version)
2. Create a demo post content/blog/example.md

---
author: Mark Dumay
title: Carousel
date: 2024-02-18
description: Carousel gradient demo
thumbnail: img/boots.jpg
---

## Carousel

As an example, the following shortcode displays a centered carousel with three slides, 16x9 aspect ratio, and a relative width of 67% on large screens.

<!-- markdownlint-disable MD037 -->
{{< example lang="hugo" >}}
{{</* carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" */>}}
  {{</* img src="img/coffee.jpg" caption="slide 1" */>}}
  {{</* img src="img/phone.jpg" caption="slide 2" */>}}
  {{</* img src="img/dunes.jpg" caption="slide 3" */>}}
{{</* /carousel */>}}
{{< /example >}}
<!-- markdownlint-enable MD037 -->

3. Create a custom theme file in assets/scss/theme/theme.scss

.gradient {
    background-color: rgba(255, 0, 0, 0); // disable gradient filter
    // background-color: rgba(255, 0, 0, 0.3); // uncomment this line to use a red filter instead
}

4. Run the site with Hugo server

You can adjust the theme.scss file to see a more profound gradient effect. If the effects do not work, try to clear your browser cache. I added a screenshot for Chrome below.

[ckamps]

Thanks for your assistance. I believe I traced the problem to how I was configuring the mounts section of the hugo.yaml file.

I have since removed the following mounts section and moved my images to assets/img. As I was doing before, I also have the style override as you recommended above in assets/scss/theme/theme.scss.

Those changes appear to have fixed the issue.

Interestingly, even though I had forcibly removed the css files from S3 and rebuilt and redeployed the site, the override wasn't taking effect. Once I removed the mounts settings and moved my images to assets/img/, the override starting getting picked up.

module:
  imports:
    - path: github.com/gethinode/hinode
    - path: github.com/gethinode/mod-bootstrap
    - path: github.com/gethinode/mod-fontawesome
    - path: github.com/gethinode/mod-leaflet
  mounts:
    - source: static/images
      target: assets/img

[markdumay]

Good to hear you solved it. Hugo mounts can be tricky, as their order is not always clear at first sight.