[Feature] Fine grained settings for image_fit

[shyd]

I have searched the existing feature requests to make sure this is not a duplicate request.

• Yes

The feature

Description

Thank you for this project it perfectly fits my needs since I moved to immich lately.

Since my photoframe application does not work anymore due to google's api change I found this awesome project.
It would be awesome to have some more flexibility for the image_fit settings.
My wish goes to

• portrait, square and landscape separate ImageFill settings
• custom image settings per image

Use Case

If you have several portrait, square and landscape photos it might be handy to set different fill settings because the cameras aspect ratio does not fit 100% to landscape photos, so you set image_fit to cover. But then all portrait photos look awkward scaled in the frame. Same for square images. I suggest having square images separately configured because you can have portrait or landscape photo frames.

Details

For the custom settings I used the description field of my google photos to inject css via a json description like so to override the settings

{"photoFrame":{"size":"contain"}}

to override image_fit=cover

or

{"photoFrame":{"vertical":"top"}}

to fill but off center.

To have this ability would make this project a game changer for my photo frame.

For example these are the settings my app could parse:

{
    "photoFrame": {
        "vertical": "bottom",
        "horizontal": "left",
        "size": "contain"
    }
}

[shyd]

Any thoughts on this? Feedback is appreciated.
I use immich-kiosk every single day since my change to immich. It works great!

[damongolding]

Hey,

Sorry for the delay.

You can do this via custom css or you could use the splitview layout.

The example below would change any portrait/square image (when using image_fit=cover) to image_fit=contain:

/* portrait image with image_fit=cover */
.frame--image-fit-cover.frame--image--portrait {
  object-fit: contain;
}

As for off centring you could use object-position.

/* portrait image with image_fit=cover */
.frame--image-fit-cover.frame--image--portrait {
  object-fit: contain;
  object-position: left bottom;
}

[shyd]

Hi, thanks for the reply!
This is for all portraits right? Is there a way to do this conditionally per image?

[damongolding]

Not currently no.

Out of curiosity what would you want to match for the condition to be true?

[shyd]

If you could expose the tags as css classes, I think I can do everything I have in mind together with custom css.

[damongolding]

If you pull ghcr.io/damongolding/immich-kiosk-development:0.31.0-beta.1 you can have a play with targeting via tags.

I haven't added them as class' as I feel they don't belong there. Instead I have added them as a data-*.

This is the selector for targeting the tags [data-tags~="YOUR_TAG"].

/* portrait image with image_fit=cover and has the tag "demo" */
.frame--image-fit-cover.frame--image--portrait[data-tags~="demo"]  {
  object-fit: contain;
}

The tags are sanitised, so all special chars (bar \) are removed and they are converted to lowercase e.g.

• ParentChild -> parentchild
• parent/!child/grand@c$$$$$hild -> parent/child/grandchild

You can see my unit test here.

[shyd]

Awesome, thanks a lot for the quick implementation! I'll test it later or tomorrow.

[shyd]

That seems work fine when the config is set to image-fit: contain.
When setting image-fit: cover and using custom css to override with contain, the background is black instead of blurred.
I overcame this issue by setting contain in the config and then override like so:

/* override default contain to always have blurred background beeing rendered */
.frame--image-fit-contain  {
  object-fit: cover;
}
.frame--image-fit-contain.frame--image--portrait  {
  object-fit: contain;
}

/* then conditionally override image-fit by tags */
[data-tags~="kiosk-fill"]  {
  object-fit: cover;
}

[data-tags~="kiosk-contain"]  {
  object-fit: contain;
}

[damongolding]

That's expected behaviour. As the user doesn't see the blurred background when cover is used, Kiosk doesn't create or send it to save on compute and performance.

[shyd]

Okay, perfect! Then it works exactly how I hoped it would. I think the implementation is even better than my initial thought.
Thank you very much for your lightning fast support! I really appreciate your work!