Category logos displaying larger than the original size

Contribute Bug

AI-generated summary

Category logos displaying larger than the original size

After upgrading to Discourse 2.9.0.beta11 and later to 3.0.0.beta16, T_Disco noticed category logos were displaying larger than their original size, causing blurry images and vertically stacked text. A temporary fix was applied using custom CSS: .category-logo.aspect-image img { width: auto !important; }.

T_Disco confirmed the upgrade to the latest tests-passed version. JammyDodger suggested checking a similar report on meta.discourse.org which may be related to the issue.

However, after Amicable upgraded and removed their CSS fix, the error no longer occurred, indicating a possible change in the code between October 2022 and the present. The exact cause remains unknown, but Amicable noted that their installation is vanilla and the error seemed related to server-side CSS cache.

1

After upgrading to 2.9.0.beta11 I noticed that the category logos were displaying larger than the original image size causing the image to look blurry and the description text to display in a vertical column:

The-STEP-Forums-Before
The-STEP-Forums-Before487×705 76.1 KB

As a temporary measure I’ve added a custom CSS class to resolve the issue:

.category-logo.aspect-image img {
    width: auto !important;
}

The-STEP-Forums-After
The-STEP-Forums-After478×241 22 KB

For an example go to: https://forum.step.org/, inspect one of the category images and deselect the above custom class. It also occurs on the individual category pages i.e. Contentious Trusts & Estates - The STEP Forums

Looks like this is the class that is then active:

.category-logo.aspect-image img {
    width: calc(var(--max-height) * var(--aspect-ratio));
}
2

I recall that we had to refine this area, can you confirm you upgraded to latest tests-passed ?

3

Hi @sam,

I upgraded midday yesterday (GMT) to 2.9.0.beta11 (de2382a652)

This is what’s on the Upgrade page:
Repository:
discourse de2382a6

version: tests-passed is commented out in params section of the app.yml file.

Is this the information you require or is there more detail elsewhere that I can provide?

Thanks,
Tom

1 Like
4

Hi Tom :slight_smile:

Is this still an issue for you?

5

Hi @JammyDodger :slight_smile:

Yes it is, the Discourse version is now 3.0.0.beta16.

Thanks,
Tom

1 Like
6

Hmm. :thinking: That is unfortunate. I was hoping for a bit of ‘magically-fixed’. :slight_smile: I think when we had a run of these issues after the category-logo class change almost all have come good again. I think there’s also this report as well Category logo image overlaid by text after recent update which may well be worth checking in on (@Amicable) to see if there’s anything you have in common that could be causing this to persist in your case.

1 Like
7

I’ve just upgraded and removed the css fix I employed (Category logo image overlaid by text after recent update - #19 by Amicable) to see where we’re at.

The error no longer occurs, so something has changed between then (Oct '22) and today. I couldn’t tell you what, though :neutral_face: . What I can say is that my installation is vanilla and that the error seemed to be due to css cache server side.

2 Likes