Image Plus (Source) - Fit mode Cover

Shaking The Habitual STH Support
1

Hi Stuart, it’s possible, even using custom CSS, to add the “Cover” Fit mode and “Center Center” Anchor point to an Image Plus (Source) stack.

I could use Image Fit (Source), but I have a WebP image to insert, so I’d like to use Image Plus.

Thanks

1 Like
2

Hi @Gianluca

That should be possible already. Try setting the ‘Display’ setting to be ‘Fill space’.

3

These are screenshots of Image Plus and Image Fit:

  1. I set Image Plus to:
    display: normal
    limit size: height
    limit value: 200px

Then I changed Display to Fill Space
Display Fill Space
Position Relative
Anchor: Center Center

1
11482×894 71.2 KB

  1. Setting:
    display: normal
    limit size: height
    limit value: 100%
    Then I changed Display to Fill Space

Then I changed Display to Fill Space
Display Fill Space
Position Relative
Anchor: Center Center

2
2750×974 40.3 KB

  1. Setting and keeping only:
    display: normal
    limit size: height
    limit value: 100%
    3
    31476×974 80.7 KB

Visually, perhaps the best solution is to leave Display Normal.
But unfortunately, it’s not Cover.
Fill Space doesn’t look the way I’d like…

I don’t know what to do; maybe I should use Image Fit with JPGs instead of WebP.

4

You could put the Image Plus stack inside a Coder stack and use it to control the image height (when using the Fill space mode).

e.g. give it a css class name of my-image-height and then in the CSS box of RW add something like: .my-image-height{height: 200px}

3 Likes
5

Perfect, it works beautifully.
Thanks, Stuart

1 Like