Merge branch 'main' into fix/fix-badges-spacing-componentize

[lemmy-ui.git] / src / shared / components / common / pictrs-image.tsx

diff --git a/src/shared/components/common/pictrs-image.tsx b/src/shared/components/common/pictrs-image.tsx
index 31e3052f9dd3727a8f3d61ede287c5e896353d61..5c3d823df58ba1a415ab1d5cb169adb81ea2e22a 100644 (file)
--- a/src/shared/components/common/pictrs-image.tsx
+++ b/src/shared/components/common/pictrs-image.tsx
@@ -29,16 +29,19 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
         <img
           src={this.props.src}
           alt={this.alt()}
+          title={this.alt()}
           loading="lazy"
-          className={classNames({
+          className={classNames("overflow-hidden pictrs-image", {
             "img-fluid": !this.props.icon && !this.props.iconOverlay,
-            "banner": this.props.banner,
-            "thumbnail rounded": this.props.thumbnail && !this.props.icon && !this.props.banner,
+            banner: this.props.banner,
+            "thumbnail rounded object-fit-cover":
+              this.props.thumbnail && !this.props.icon && !this.props.banner,
             "img-expanded slight-radius":
               !this.props.thumbnail && !this.props.icon,
             "img-blur": this.props.thumbnail && this.props.nsfw,
-            "rounded-circle img-icon mr-2": this.props.icon,
-            "ml-2 mb-0 rounded-circle avatar-overlay": this.props.iconOverlay,
+            "object-fit-cover img-icon me-1": this.props.icon,
+            "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
+              this.props.iconOverlay,
             "avatar-pushup": this.props.pushup,
           })}
         />
@@ -50,17 +53,17 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
     // sample url:
     // http://localhost:8535/pictrs/image/file.png?thumbnail=256&format=jpg
 
-    let split = this.props.src.split("/pictrs/image/");
+    const split = this.props.src.split("/pictrs/image/");
 
     // If theres not multiple, then its not a pictrs image
     if (split.length == 1) {
       return this.props.src;
     }
 
-    let host = split[0];
-    let path = split[1];
+    const host = split[0];
+    const path = split[1];
 
-    let params = { format };
+    const params = { format };
 
     if (this.props.thumbnail) {
       params["thumbnail"] = thumbnailSize;
@@ -68,8 +71,8 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
       params["thumbnail"] = iconThumbnailSize;
     }
 
-    let paramsStr = new URLSearchParams(params).toString();
-    let out = `${host}/pictrs/image/${path}?${paramsStr}`;
+    const paramsStr = new URLSearchParams(params).toString();
+    const out = `${host}/pictrs/image/${path}?${paramsStr}`;
 
     return out;
   }