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!