Server Web Page banner doesn't respect 16:9 aspect ratio
The settings state:
This image will be displayed on both your Discovery Listing and Server Web Page. The recommended minimum size is 1920x1080 and the recommended aspect ratio is 16:9.
However, as shown by several banners on https://discord.com/servers by viewing one that clearly shows the wrong aspect ratio being applied, such as https://discord.com/servers/discord-bots-852531635252494346, on a full width browser window, you can see that it's not 16:9 (1920x1080). It appears to be designed primarily with mobile view in mind.

Rather than the above, it should behave more like this:

The css modifications I made above were very simple:
@media screen and (min-width: 1024px)
.splashImage-1uyRk8 {
/* height: 400px; this is the original */
height: 576px; /* 1024x576 = 16:9 */
}
.splashImage-1uyRk8 {
grid-column: span 12;
width: 100%;
/* height: 218px; I removed this */
-o-object-fit: cover;
object-fit: cover;
border-radius: 16px;
}
I propose 2 different solutions to this problem:
- Modify the website code to respect the 16:9 aspect ratio.
- A different file upload in the Server Web Page settings screen that doesn't share the same asset as the one used by Server Discovery.
While there's a 3rd option I can think of, which is modifying the banner recommendations to fit both use cases, I don't suggest it because it'll require most servers to recreate their assets and start over, which costs time and for some, money (we had our art commissioned and there's no way to make it fit both uses due to the subject/style. we would need an entirely different design).
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
Kommentare
0 Kommentare