Game thumbnails distorted on /welcome

Despite the feedback from the Pro users on the Dev server, game thumbnails on the /welcome page are now stretched to a 2:1 ratio. I spoke too soon. I was confused because on Production the default thumbnails for games without a launch page image have been switched and the proportions of the launch page image have changed, but the thumbnails on /welcome and the Games drop-down menu seem to be unchanged (and stretched) at 3x2. Adding the following CSS fixes the stretching of game thumbnails on /welcome and the Games drop down. .imgcontainer img { object-fit: contain; }

Sad news, this change is totally unwelcome. Now every single game I've made (most of them from licensed products) looks ugly. Thanks for the fix.

I think the appearance of this still needs a lot of loving redesign work, to overcome-eliminate the 2 new ways of making our chosen Game art look mucky and soupy:  The large blur background, (Yes it's better than stretching but it's still badly soupy looking) and a bright pink smear shouting SCHEDULE NOW, that will flagrantly clash with almost any art-colors from any publisher's products (WoTC et al). Of course pink-magenta will clash if it's adjacent to orange, red, yellow, in the original game artwork. This current redesign does not abide by the basic color wheel. That hurts the eyes of the art appreciators, for such a visual-oriented and digital-art-selling website like this one. But, small blessings, it's not doing the Stretch that was feared. For me, when I load Dev and test it today: It's not exactly Brian's simple CSS solution, this has added blur and no padding.. Screenshot of Dev Server layout changes coming soon  The new design, as you can see, has no padding whatsoever around the game's art, it's hugged into a blur+pink bar sandwich. It kind of looks like soup, with a layer of pink cheese on top.

On Dev, the blur would not be necessary if the SCHEDULE NOW bar was not across the top. The SCHEDULE NOW bar doesn't do anything special, either. The SCHEDULE NOW bar is just a link to the game's launch page, the same launch page linked to by the game's thumbnail and title. The SCHEDULE NOW bar does not appear if you have not yet launched a game since the update, and they look so much better without the SCHEDULE NOW bars. On Live, one thing that is a bit strange is that the game title goes outside of the div in certain title and browser widths.

That kinda looks like the Game Details Page from DEV is on your Production server, if that is a On-Live screenshot?  My game details (on Production) that I went to today, does Not have that appearance yet. Yes, agreed, on testing I also found that the pink SCHEDULE NOW is a duplicate of the same functionality as other buttons, while taking up space & adds a glaring pink color (and I love Roll20's magenta color scheme, it's really spoiling the brand color to smash it up against game cover images of all-other-colors). Please remove that part of this, Roll20.

They definitely made bits of it live yesterday.  The home page was briefly all 2x1 images yesterday and they changed the default for games with no image. I uploaded some new images for my games because apparently 2x1 is the future - but now it's reverted and the pictures I uploaded are weirdly squished (as is the ugly pink gradient thing for games with no image). And can second Brian's observation.  If you shrink the browser to the width where the purple "created by" box still exists but turns square, the launch game button gets all wonky.

Sean G. said: They definitely made bits of it live yesterday.  The home page was briefly all 2x1 images yesterday and they changed the default for games with no image. I uploaded some new images for my games because apparently 2x1 is the future - but now it's reverted and the pictures I uploaded are weirdly squished (as is the ugly pink gradient thing for games with no image). And can second Brian's observation.  If you shrink the browser to the width where the purple "created by" box still exists but turns square, the launch game button gets all wonky. It was 2x1? That's what I had thought, and then I checked back later and saw it was back to the original stretched 3x2. I thought I had made a mistake.

The suggested size is still 1600 x 800 which would be 2:1. But my 2:1 images now look distorted and now 3:2 seems to look fine again. That's super confusing!

Eukaryot said: The suggested size is still 1600 x 800 which would be 2:1. But my 2:1 images now look distorted and now 3:2 seems to look fine again. That's super confusing! The 1600x800 recommendation, which is 2:1, will be optimal when (whenever) Roll20 launches what they're testing now. The upcoming next layout for Roll20 that's motivated by the phone app version. So, for better or worse (it's visibly worse), aim for making 1600x800 or at least 2:1 for game cover images so it will work with the upcoming update soon.

Gold said: Eukaryot said: The suggested size is still 1600 x 800 which would be 2:1. But my 2:1 images now look distorted and now 3:2 seems to look fine again. That's super confusing! The 1600x800 recommendation, which is 2:1, will be optimal when (whenever) Roll20 launches what they're testing now. The upcoming next layout for Roll20 that's motivated by the phone app version. So, for better or worse (it's visibly worse), aim for making 1600x800 or at least 2:1 for game cover images so it will work with the upcoming update soon. Alright, thanks! Then I'll stick with 3:2 for now and change everything to 2:1 once this "update" goes live!

JR said: Apologies for the confusion! We had a bit of trouble getting this code out, so you may have had a different experience initially than is currently available. To be clear, we do not intend to implement game banners as they appear in the screenshots in this thread, as outlined when we closed the feedback thread on these changes. Per the Development server feedback thread, we aren’t yet satisfied with our implementation of game image standardization and game time reminders. We released updates to the campaign details page including: A new image uploader that does not delete existing images on click Removal of white gradient and alterations to game name placement Topographical default game image and updated toolbar images We will also now sort your games on /welcome by the next scheduled game unless you do not have one, in which case it will still sort by last modified. We are aware of existing issues with stretched images in the toolbar, and still intend to make larger design changes in the future that will address that experience. Thanks for your feedback, and I hope this clears up some of the confusion here! Thanks for the update. It's good to know I wasn't remembering things incorrectly. I would like to highlight some other places where images would benefit from a solution which preserves the height/width ration of the image. This isn't an exhaustive list, but it is what I could find quickly. /campaigns page The player's thumbnails for each game are resized to 40x40 pixels even if the original image is not square. object-fit: contain; fixes this. .campaignlisting .campaignplayer {     width: 40px;     height: 40px;     border-radius: 20px;     overflow: hidden;     margin-right: 5px;     margin-bottom: 5px;      object-fit: contain; } Journal thumbnails in addons I don't know if this happens in other situations, but journal thumbnails in addons get cropped to a square. When I create the journal handouts and characters and attach an image, the thumbnail preserves the image ratio. However, somewhere between when the game is addonized and when I add the addon to a new game, all thumbnails have been cropped to a square and then resized to 100x100 pixels. The journal thumbnails are then styled to 28x28 pixels. object-fit: contain; will not help here, because the source image has been corrupted. This leads to NPC thumbnails with heads cut off, dragons that have their wings cut off, and other cases where the thumbnail becomes hard to identify or just looks bad. Avatars in the forums Another place where object-fit: contain; would help, the forum avatars next to posts are stretched to fit 80x80 pixels. My "Z" avatar as of this post is stretched vertically because it is a wide image. .circleavatar {     width: 80px;     height: 80px;     border-radius: 40px;     background-color: white;     overflow: hidden;     position: relative;      object-fit: contain; } Avatars in game landing pages This one is a bit more complicated. Wide avatar images sit at the top of the white circle. Adding a line height to the avatar allows the img CSS to vertically align properly. I don't know what, if anything, would need to happen with tall avatar images (maybe text-align: center;?). .userprofile .avatar {     width: 80px;     height: 80px;     border-radius: 40px;     background-color: white;     overflow: hidden;     position: relative;     float: left;     margin-right: 20px;     line-height: 80px; }

Hey all, I realize there is a huge disconnect between what is on the Beta server and what is in Production. We took your feedback the last time we talked about this and pared it down quite a bit, and we don't plan on implementing any further changes without going through that feedback process again in a little while. That said, Brian C. - thanks a TON for the work you put in to your response. I'm going to take this to my team and see if we can plop it in to our CSS without any undue side-effects, which is kind of the status-quo of our code base :)

Jarrett G. said: That said, Brian C. - thanks a TON for the work you put in to your response. I'm going to take this too my team and see if we can plop it in to our CSS without any undue side-effects, which is kind of the status-quo of our code base :) You're welcome. Obviously, I only see a small fraction of the code base and am unaware of potential side effects. I can only see what is directly ahead of me.