Fix fileupload thumbnail preview

[AIC-BV]

No description provided.

[LukeTowers]

@AIC-BV can you post a before / after screenshot so I can visualize the change and why it was required?

[AIC-BV]

@LukeTowers

Before:

After:

[WebVPF]

@LukeTowers @bennothommo
This is the wrong fix. Preview works correctly. The default mode is auto, which makes the thumbnail in portrait or landscape orientation.
Cancel this change.

@AIC-BV If you need thumbnails of the same size, you need to set the field settings mode to exact or crop .
https://wintercms.com/docs/v1.2/docs/services/image-resizing#available-parameters

[LukeTowers]

@AIC-BV can you post the configuration of the field where you were running into the issue?

[AIC-BV]

@AIC-BV can you post the configuration of the field where you were running into the issue?

photos:
            context: ['create', 'update']
            tab: aic.account::lang.general.photos
            label: Foto's
            type: fileupload
            mode: image
            useCaption: false
            thumbOptions:
                mode: crop
                offset:
                    - 0
                    - 0
                quality: 90
                sharpen: 0
                interlace: false
                extension: auto
            span: auto

[WebVPF]

@AIC-BV if you need strict sizes, please set

imageHeight: 100
imageWidth: 100

Forcing the width and height to stretch via CSS is not a solution. We then leave no way for the user to visually distinguish portrait images from landscape images.
The user may want to sort images based on their orientation.

[AIC-BV]

In that case, to avoid stretching, it should be this code?

&.image img {
    .border-left-radius(3px);
    width: auto;
    height: auto;
    max-height: 100%;
}

(max-width: 100% is already set by something else)

Because if you leave it as is, images get stretched?

I don't want to destroy your method of working, but there is something wrong with the css 😅
I don't mind this getting roll backed, I can just add it to my own override.css file

[AIC-BV]

How about a PDF icon? Should be centered?
Should all images be centered then?

.icon-container {
    border-right: 1px solid #f6f8f9;
    float: left;
    // display: inline-block;
    overflow: hidden;
    width: 75px;
    height: 75px;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

[WebVPF]

I like it when it's centered

[bennothommo]

Yeah I'd be happy with it being resized and centered, but still hinting the actual orientation of the image. As long as the result is that all preview images are square in terms of their container. I'm a stickler for consistency myself.

[AIC-BV]

Right now it should look like this @bennothommo.
If you prefer the 1st draft, where I used object-fit: cover, we will have to add something to display the orientation of the image for @WebVPF's case

[bennothommo]

@AIC-BV that example you posted in your latest post is what I prefer. :)

[AIC-BV]

@AIC-BV that example you posted in your latest post is what I prefer. :)

That one is merged 😇
#991