godot-website Center the images uses as article thumbnails

In the article list, each thumbnail is basically a square subset of the top banner shown when you open the article. However, the square is taken from the left of the banner, which, in most case does not fit really well. Indeed, the most representative part of the banner is usually the center.

I suggest we use the center of the thumbnails instead of its left part as a thumbnail.

Sep 19 '18 10:09 groud

It should be as easy as adding background-position: center to all article thumbnails (in the same class where background-size: cover is defined, I guess).

background-position: center;

Preview:

Sep 19 '18 12:09 Calinou

This would be a good change for some banners, but for others, it would appear this has been used as a feature:

Example 1:

Changes to:

However,

Example 2:

Changes to:

This would have to be a change to how it's being used in function, or some edits would have to be made. Perhaps a better solution would be to add a preview image for blog posts? But that does seem like a fair bit of work to backfill images, and the added storage space for the images.

Mar 16 '19 12:03 MHillier98

It wasn't really used as a feature, though you're right it turned out well in those two examples :)

If we change to center, I'll just keep this in mind when picking up banner images to ensure that the cropped version would look decent.

Mar 16 '19 16:03 akien-mga

Another potential solution could be to make the images not take up the full height, allowing them to maintain their original size? However I do assume that it was designed to be a square originally:

The CSS for the images:

element {
	background: url('https://godotengine.org/storage/app/uploads/public/5c7/67d/8c6/thumb_667_400x1_0_0_auto.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

Mar 17 '19 01:03 MHillier98

@MHillier98 I think that doesn't look as good from a visual standpoint, especially if images with different aspect ratios were to be used on the same page.

Mar 17 '19 13:03 Calinou

Agreed. Ultimately, this does come down to the images themselves. I do think it would be beneficial to standardize the sizing / formatting of the images put up there, but that potentially is a fair bit of work to go back and update images, if desired. I think this does come back to what the blog submitters want to do, as they are the ones actually entering the image.

However, a general rule that could be created for this would to always format the image so that either it's center or left side (how it currently is) would work as the thumbnail.

Again, I think the best examples of the problem can be seen in this screenshot:

The GDC meetup is a good example of what should be done (according to current styling), because the image itself is split into 2 sections
The Summer of Code is a bad example of what should be done, because it cuts off nearly half the image
The Beta 9 screenshot is an average example, as it's not a major problem showing that part of the game

IMO, the best solution to this would be separating out the blog banner image into a 2 images - a preview image (on the news page), and the banner (on the blog page), and making sure that the preview image is always a square. However, I think it comes back to the fact that the people submitting content are usually developers, not content managers or whatever they might be called to constantly be worrying about the website.

At the end of the day, this might even be a non-issue, but more of a reminder for the formatting of the images.

Mar 17 '19 14:03 MHillier98

My opinion in two points:

I think people won't like having to make two images to illustrate blog posts. IMHO, it's not worth asking for two image (but if it can be optional, than can be ok)
I think it is a lot easier to make a picture that works for both situations when the content is centered.

IMHO, centering the image is the way to go for now. Even if in some old pictures will not look right, this will simplify things in the future.

Mar 17 '19 15:03 groud

In most news sites (coming from someone who worked at an online news publication at one point) the way this is done is by creating several different crops per image that are used wherever appropriate.

Like, a small thumbnail (square), a 16x9, a banner at the top of the article, and something for the news banner on the front page. These crops can actually be different images altogether, in the event that there isn't an appropriate thumbnail size, such as the above text-heavy images.