AlUlkesh / stable-diffusion-webui-images-browser

an images browse for stable-diffusion-webui
623 stars 111 forks source link

feature: Add support for padded thumbs #239

Closed funwhilelost closed 5 months ago

funwhilelost commented 10 months ago

Right now non-square thumbnails are cropped to a square and have information removed. This feature allows you to make thumbnails that show the whole image "fit" to the square grid.

This isn't the most elegant solution. It could probably be done in CSS but we'd have to remove image.crop anyways. Starting with the simplest solution. Later you could completely remove L891 and do the fitting in CSS.

AlUlkesh commented 10 months ago

This extension supports user-defined thumbnails in user.css, so that a change there can affect thumbnails all over a1111.

For example you can put this in user.css (in the main a1111 directory):

.thumbnail-item > img {
    object-fit: contain !important;
}
.thumbnail-lg > img {
    object-fit: contain !important;
}

Is that what you are trying to achieve, or am I misunderstanding?

funwhilelost commented 10 months ago

This extension supports user-defined thumbnails in user.css, so that a change there can affect thumbnails all over a1111.

For example you can put this in user.css (in the main a1111 directory):

.thumbnail-item > img {
    object-fit: contain !important;
}
.thumbnail-lg > img {
    object-fit: contain !important;
}

Is that what you are trying to achieve, or am I misunderstanding?

That is what I'm trying to achieve but, unfortunately, the thumbnail cropping actually eliminates the rest of the photo so the CSS change has no effect. I could change the PR to simple remove the image.crop call and then this CSS would work great.

AlUlkesh commented 10 months ago

That is what I'm trying to achieve but, unfortunately, the thumbnail cropping actually eliminates the rest of the photo so the CSS change has no effect. I could change the PR to simple remove the image.crop call and then this CSS would work great.

Yeah, let's do that. I'll include the css info in the readme.