Added background blurred image if width < height

platypush/backend/http/static/css/widgets/image-carousel.css

@@ -1,15 +1,33 @@
 .carousel {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     overflow: hidden;
-    background-color: black;
     color: #999;
-}
+    position: relative;
-
+    width: 100%;
-.carousel > img {
-    flex-shrink: 0;
-    border-radius: 5px;
     height: 22.5em;
 }
 
+.carousel > img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 5px;
+    z-index: 2;
+}
+
+.carousel-background {
+    position: absolute;
+    width: 100%;
+    height: 22.5em;
+    top: 0;
+    left: 0;
+    background-color: black;
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    filter: blur(10px);
+    z-index: 1;
+}
+

platypush/backend/http/static/js/widgets/image-carousel.js

@@ -1,5 +1,6 @@
 $(document).ready(function() {
     var $imgContainer = $('.image-carousel').find('.carousel'),
+        $imgBackground = $('.image-carousel').find('.carousel-background'),
         config = window.widgets['image-carousel'],
         images = config.imageUrls,
         processedImages = 0;
@@ -14,9 +15,10 @@ $(document).ready(function() {
     };
 
     var refreshImage = function() {
+        var nextImage = images[processedImages++];
         var $oldImg = $imgContainer.find('img');
         var $newImg = $('<img></img>')
-            .attr('src', images[processedImages++])
+            .attr('src', nextImage)
             .attr('alt', 'Could not load image')
             .appendTo('body').hide();
 
@@ -24,6 +26,9 @@ $(document).ready(function() {
             $oldImg.remove();
             if ($newImg.width() > $newImg.height()) {
                 $newImg.css('width', '100%');
+                $imgBackground.css('background-image', '');
+            } else {
+                $imgBackground.css('background-image', 'url(' + nextImage + ')');
             }
 
             $newImg.css('max-height', '100%');

platypush/backend/http/templates/widgets/image-carousel.html

@@ -9,6 +9,7 @@
 </script>
 
 <div class="carousel">
+    <div class="carousel-background">&nbsp;</div>
     <img alt="Your carousel images">
 </div>