Feature suggestion: Image positioning with cover mode

[antoinebarbier022]

The project I work on needs both cover mode and image position.

Observed

When mode is cover, the image is centered

Needs

When in cover mode, it should be possible to change the image's position (ie: center bottom or center top) using the same api than for contain mode

Thank you

[mbgspcii]

Hi @antoinebarbier022

In the current version, the management of the image positions applies only in contain mode.

However, you can achieve a similar result in cover mode by using the focus property of the components.

Here is a link to codesandbox which shows how to manage your needs through the focus of Twic Components : https://codesandbox.io/s/twicpics-x-svelte-basic-forked-njbrbk.

Equivalences used :

position: left --> focus = "0px50p" position: right --> focus = "100px50p" position: top--> focus = "50px0p" position: bottom--> focus = "50px100p"

Note that in a future version, we plan to add shortcuts to the focus property like : focus="bottom"

Hope it helps.

[Strift]

Hi @antoinebarbier022,

Thanks for opening this issue.

We're thinking about releasing a new API that one unify positioning for both contain and cover. We would name the new attribute anchor, and it would accept values like top, bottom-left, etc.

For more specific use cases, it would still be possible to override the attribute by using either focus or position attributes.

Cheers,

[mbgspcii]

Hi @antoinebarbier022.

Thanks for opening this issue and your feature suggestion.

Version 0.9.0 allows the image to be positioned in both contain and cover mode using the new anchor attribute.

Accepted values are top, bottom, left, right, top-left, top-right, bottom-left and bottom-right. position and focus attributes take precedence in containand covermode respectively. Please note that anchor is applied after an eventual preTransform.

Hope it helps.

Best regards.