Option to "blur" Image instead of black bars when "size: contain"?

[tubit]

Hi & thank you for this awesome MM Module!

I use MM2 as a digital picture frame and just converted from a manual download & using github.com/NautiluX/slide as a slideshow app.

I like to see the full picture instead of zooming into the picture, so I've set size to contain. However, the black bars on the top/bottom or left/right (for portrait) is a bit ulgy.. :)

The slide application had the option to display a blurred background image instead of a black bar - would this also be possible for MMM-Wallpaper?

An example can be seen on the picture here: https://github.com/NautiluX/slide/raw/master/doc/screen.jpg

Thank you!

[asc11111]

I have been able to get something close to this by having two instances in the config.js file and changing the custom.css a little.

config.js

        {
              module: 'MMM-Wallpaper',
              position: 'fullscreen_below',
              config: {
                source: "<local source>",
                caption: false,
                slideInterval: 15000,
                crossfade: true,
                maximumEntries: 1000,
                filter:"grayscale(0.5) brightness(0.2)",
                fadeEdges: true,
                size: "cover",
              }
        },
        {
              module: 'MMM-Wallpaper',
              position: 'fullscreen_below',
              config: {
                source: "<local source>",
                caption: false,
                slideInterval: 15000,
                crossfade: true,
                maximumEntries: 1000,
                filter:"grayscale(0) brightness(1)",
                fadeEdges: true,
                size: "contain",
              }
        },

custom.css

.MMM-Wallpaper .content-fill {
  background-color: rgba(255,255,255, 0.2);
  backdrop-filter: blur(10px);
}

[tubit]

That's an interesting idea, I will give it a try.

Thanks for sharing!