Featured mods stretched

AHK1221

@administrators Pleaase look into this issue?

Dark0ne

Looks like this was an issue During Rappo (tm): https://web.archive.org/web/20170213170519/https://www.gta5-mods.com/

We'll take a look, but I assume Rappo did it that way as those dimensions fit into the height of the main image to the left of that space. "Unsquashed", they wouldn't.

AHK1221

@Dark0ne Well, I have a suggestion that people might not like? Anyway, why not have an image limit like 1024 x 512 (or like have it to that proportions, like 512 x 256 would also work), idk its a suggestion. Maybe have a different proportion, since 1024 x 512 seems a bit too wide.

ikt

@AHK1221 @Dark0ne
The website software seems to generate proper thumbnails for mods with images, but it can't cope with YouTube thumbnail previews.

Example: https://img.gta5-mods.com/q95-w170-h60-cfill/images/spider-man-homecoming-4k/f3d5f6-Wallpaper.jpg

The part before /images specifies the quality, width and height, but if you look at this for mods with a YouTube thing as main image, you'll see a link to the YouTube thumbnail.

Still, it should be not hard to make it just overflow invisibly.
Removing the height rule for the image itself and adding a height rule for the surrounding box (.clearfix), with overflow:hidden will just show the topmost part of this. Just 3 css edits.

Adding the following also centers it but could be overkill.

transform: translateY(-50%);
top: 50%;
position: relative;

Uh, here's my final css rules:

#featured ul li a {
    display: block;
    position: relative;
    padding: 3px;
    background-color: #fff;
    border: 1px solid #ddd;
    transition: border 0.2s ease-in-out, opacity 0.1s ease-in;
    color: #000;
    opacity: 0.65;
    height: 70px;
    overflow: hidden;
}

#featured ul li a img {
    width: 100%;
    overflow: hidden;
    transform: translateY(-50%);
    top: 50%;
    position: relative;
}

Also the big preview image uses a different generator (src="https://img.gta5-mods.com/q95-w550-h275-cfill/images/alien-city/81bd41-photo1.jpg"), but still uses the same YouTube thumbnail link for the Ford GT example. When the currently featured Ford GT is highlighted you can also see the box itself expanding, so I guess you could also use the same trick (overflow hidden and center).