New: Neater filling of author images to aspect ratio

frontend/src/Author/AuthorImage.js

@@ -122,9 +122,17 @@ class AuthorImage extends Component {
       placeholder,
       size,
       lazy,
-      overflow
+      overflow,
+      blurBackground
     } = this.props;
 
+    const blurStyle = {
+      ...style,
+      objectFit: 'fill',
+      filter: 'blur(8px)',
+      WebkitFilter: 'blur(8px)'
+    };
+
     const {
       url,
       hasError,
@@ -168,13 +176,26 @@ class AuthorImage extends Component {
     }
 
     return (
-      <img
-        className={className}
-        style={style}
-        src={isLoaded ? url : placeholder}
-        onError={this.onError}
-        onLoad={this.onLoad}
-      />
+      <>
+        {
+          blurBackground ?
+            <img
+              style={blurStyle}
+              src={isLoaded ? url : placeholder}
+              onError={this.onError}
+              onLoad={this.onLoad}
+            /> :
+            null
+        }
+
+        <img
+          className={className}
+          style={style}
+          src={isLoaded ? url : placeholder}
+          onError={this.onError}
+          onLoad={this.onLoad}
+        />
+      </>
     );
   }
 }
@@ -188,6 +209,7 @@ AuthorImage.propTypes = {
   size: PropTypes.number.isRequired,
   lazy: PropTypes.bool.isRequired,
   overflow: PropTypes.bool.isRequired,
+  blurBackground: PropTypes.bool.isRequired,
   onError: PropTypes.func,
   onLoad: PropTypes.func
 };
@@ -195,7 +217,8 @@ AuthorImage.propTypes = {
 AuthorImage.defaultProps = {
   size: 250,
   lazy: true,
-  overflow: false
+  overflow: false,
+  blurBackground: false
 };
 
 export default AuthorImage;

frontend/src/Author/Index/Overview/AuthorIndexOverview.css

@@ -14,11 +14,14 @@ $hoverScale: 1.05;
 }
 
 .poster {
-  position: relative;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
 .posterContainer {
   position: relative;
+  overflow: hidden;
 }
 
 .link {

frontend/src/Author/Index/Overview/AuthorIndexOverview.js

@@ -125,31 +125,30 @@ class AuthorIndexOverview extends Component {
     return (
       <div className={styles.container}>
         <div className={styles.content}>
-          <div className={styles.poster}>
-            <div className={styles.posterContainer}>
-              {
-                status === 'ended' &&
-                  <div
-                    className={styles.ended}
-                    title={translate('Ended')}
-                  />
-              }
-
-              <Link
-                className={styles.link}
-                style={elementStyle}
-                to={link}
-              >
-                <AuthorPoster
-                  className={styles.poster}
-                  style={elementStyle}
-                  images={images}
-                  size={250}
-                  lazy={false}
-                  overflow={true}
+          <div className={styles.posterContainer}>
+            {
+              status === 'ended' &&
+                <div
+                  className={styles.ended}
+                  title={translate('Ended')}
                 />
-              </Link>
-            </div>
+            }
+
+            <Link
+              className={styles.link}
+              style={elementStyle}
+              to={link}
+            >
+              <AuthorPoster
+                className={styles.poster}
+                style={elementStyle}
+                images={images}
+                size={250}
+                lazy={false}
+                overflow={true}
+                blurBackground={true}
+              />
+            </Link>
 
             <AuthorIndexProgressBar
               monitored={monitored}

frontend/src/Author/Index/Posters/AuthorIndexPoster.css

@@ -17,6 +17,13 @@ $hoverScale: 1.05;
 
 .posterContainer {
   position: relative;
+  overflow: hidden;
+}
+
+.poster {
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
 .link {

frontend/src/Author/Index/Posters/AuthorIndexPoster.js

@@ -167,6 +167,7 @@ class AuthorIndexPoster extends Component {
                 size={250}
                 lazy={false}
                 overflow={true}
+                blurBackground={true}
                 onError={this.onPosterLoadError}
                 onLoad={this.onPosterLoad}
               />