webtrees
webtrees copied to clipboard
fisharebest
Default silhouette images as inline SVGs
Could the default silhouette images be inline SVG images instead, using currentColor as fill color? This would enable a simple way to change the color of the silhouette images. Maybe it would be a breaking change for existing themes.
A search online gives some sample silhouette images: https://openclipart.org/detail/157891/male-profile-silhouette https://openclipart.org/detail/157927/female-profile-silhouette
Or maybe the current ones have vector original images?
Alternatively, how can this be done in a custom theme?
AFAIK, the current silhouette icons came from a public clipart library and don't have SVG originals.
More than happy to use SVGs instead of PNGs.
At present, we use 3 icons - male/female/unknown.
There is a fourth option "other", which currently uses the same icon as unknown.
So, we either need three (or four) icons - or we ignore gender and just use the same icon for both.
We already have a "user" icon (control panel, sign-in/registration). We could use that.
I'd be curious to know the opinion of other users.
For gender neutral silhouettes there are a number of heads without hair or other markings which would be typical for male or female.
For unknown there are heads with a question mark in the head.
How about using those 2 beside female and male?
I think it adds value to have different generic images for male and female individuals in the tree. But seems to be a bit difficult to find suitable sets of images with a "neutral" image (for unknown and other) also in the same style. At least I don't yet have a good suggestion of a set of images that also has this.
@LarsRabe Have you found any suitable images in that style you can link to?
@ekdahl This a example of what I mean for gender neutral https://www.shutterstock.com/de/image-vector/human-head-design-665830270
I use SVG images in the Justlight theme, made with Icomoon from the original webtrees silhouettes.
https://github.com/JustCarmen/webtrees-theme-justlight/blob/d3b19ae7cb837d544940e4224d838af572aad7a4/JustlightTheme.php#L196
https://github.com/JustCarmen/webtrees-theme-justlight/blob/d3b19ae7cb837d544940e4224d838af572aad7a4/resources/fonts/icomoon.svg?short_path=8be431d#L10
https://github.com/JustCarmen/webtrees-theme-justlight/blob/d3b19ae7cb837d544940e4224d838af572aad7a4/resources/css/justlight.min.css#L20130
For an example look at my website. Same icons, different colors in justlight and justblack palette. I also have an icon for undefined (although it is not the same as gender neutral I know), example here.
You might find it useful.
Some time ago I designed four silhouettes and described how to replace the standard ones using the CSS&JS module. Feel free to use them, but they are png and not SVG.
https://wiki.genealogy.net/Webtrees_Handbuch/Entwicklungsumgebung#Beispiel_-_Austausch_der_Standard-Silhouetten
After thinking a bit about this, isn't it most natural with front facing silhouette images? When adding real photos for individuals, all of these tend to be from the front, so why should the replacement image be from the side? Anyway, I did a PR that uses the user SVG from Font Awesome, that can be styled by theme with foreground or background color dependent on sex.