search

wjh18 / hugo-liftoff

Minimal blog/portfolio theme with a focus on content creation and SEO best practices. An ideal choice for technical users jump-starting a personal brand.
https://hugo-liftoff.netlify.app
MIT License
93 stars 27 forks source link

How do I change the home image to not be grayscale? #17

Closed kvnkho closed 1 year ago

kvnkho commented 1 year ago

Is your feature request related to a problem? Please describe.

I updated the image in the home page by placing an image under my assets directory. It comes out as grayscale by default though, my understanding is that it's because of this line:

https://github.com/wjh18/hugo-liftoff/blob/master/layouts/index.html#L23

where the filter is applied. I am wondering how to toggle this off?

Describe the solution you'd like

I guess this might have to be made a config on the config.toml? I am not sure though.

wjh18 commented 1 year ago

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!

kvnkho commented 1 year ago

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!

wjh18 commented 1 year ago

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.

wjh18 commented 1 year ago

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.