search

ubershmekel / redditp

Convert any reddit page to a presentation or slide show
https://redditp.com
MIT License
259 stars 101 forks source link

Blurred background for non-covering photos #127

Open krislawton opened 3 years ago

krislawton commented 3 years ago

As an alternative to just having a black background, it might be good to have a second copy of the image in the background that covers the entire page and is blurred. Seems to be a common design pattern in modern times for showing images that don't have the same aspect ratio as their container.

Here is an example I drew up:

Without blur: Without blur

With blur: With blur

Here's a better example of a portrait image on a landscape display: With blur #2

To do this, I added a copy of the "cloud" HTML element and set its background-size to cover, and its filter to blur(50px). Not sure how performance-intensive this is for mobiles nor how widespread the filter style is implemented on browsers, but it has been on my Windows Chrome browser for at least a year. The new cloud element needs to be before the existing one in the DOM or else it overlaps.

I could probably look at implementing this myself if there is a consensus, would take some familiarisation and setting up a dev enviro though.

ubershmekel commented 3 years ago

This is what I did with tagsyo.com

I wouldn't be against it if the implementation was simple. With tagsyo, I used the thumbnail as the background, so the blurry image loads faster.

MrSpiffyClean commented 3 years ago

As long as there is an option to revert back to the black (or solid color, if changes are going to be made there) border, I wouldn't be bothered. I personally find it a bit distracting, but I mainly use this on desktop, so your mileage may vary.