How do I change the home image to not be grayscale? about hugo-liftoff HOT 4 CLOSED

Hi @kvnkho, this should be fixed in #19. It now defaults to non-grayscale and I added a grayscale_avatar parameter in params.toml so it can be re-enabled if desired.

from hugo-liftoff.

That's one of the beauties of Hugo. Anything in your parent project with the same named file will override the theme's version of that file.

Another method I didn't think of at first would be to create an assets/custom.css file (and make sure the custom_css param in params.toml is set to that filename). Then use the CSS filter() function to modify the color of the .hero-avatar class. You can use a hex to filter converter to get approximate colors. This won't alter the original image itself for social tags or anything but will change its style in the browser at least.

from hugo-liftoff.

Yeah, that was kind of an opinionated choice on my part before I open sourced the theme.

The way to override it temporarily would be to copy the entire layouts/index.html file to your own project's layouts/ directory (create one if it doesn't exist) with the {{ $image = $image | images.Filter (images.Grayscale) }} line removed.

I know this isn't an ideal long-term solution so I'll add a disable grayscale frontmatter parameter for the index file specifically, or a global config. Let me know if that helps!

from hugo-liftoff.

Ah that really helps. New to Hugo so I didn't know I could override from the layouts directory in my project. That is the perfect workaround for now.

No rush on this, and yes I think it would help, because I am thinking of maybe tweaking the default colors with CSS down the line also.

Thanks for the response!

from hugo-liftoff.