Center the images uses as article thumbnails about godot-website

[Calinou]

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:

[MHillier98]

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.

[groud]

My opinion in two points:

1. 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)
2. 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.

[YuriSizov]

Solved with a redesign in #468.

[MHillier98]

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.

[akien-mga]

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.

[MHillier98]

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;
}

[Calinou]

@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.

[jcs224]

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.

[Calinou]

@jcs224 While this is the best-looking solution, it also requires additional work (see @groud's comment above).

[ampsteric]

Please assign me this issue under hacktoberfest. , if it is still open.

[coppolaemilio]

Please assign me this issue under hacktoberfest. , if it is still open.

@ampsteric We will opt-in repository-wide if we decide to participate this year, so please stop spamming.