Shrunken Category Images

Support
1

Hi all,

Just spotted that our category images have shrunk from 200px wide to about 72px wide… looks a bit daft…

Inspecting the element it appears to be .category-logo.aspect-image in topic-list.scss but I can’t seem to find where this actually is on our hosted site, nor why it has changed?

Any ideas?

2

Hey Rob!

topic-list.scss is part of Discourse core, that’s why you’re not seeing it. https://github.com/discourse/discourse/blob/master/app/assets/stylesheets/desktop/topic-list.scss

For the specfic change that cuased this, see https://github.com/discourse/discourse/commit/1da265db11b0894f9712ec3fa40f4bb5ed155ec4 and https://github.com/discourse/discourse/commit/5db50d6cdc227e98a1d25dea53997e7de9fbe276. The changes were made to prevent the page from “jumping” as images of unknown heights are loaded - we now reserve the space upon page load.

3

Hi Joshua,

Thanks for such a prompt response and info :slight_smile:

So, I guess my next question is, how do I get these images back to the size I want them?

4

You’d need to use a little CSS in your theme (or as a theme component) to resize them. That said, I’m not certain that this change was supposed to resize images - I thought it was just reserving the space to prevent jumping. If you can hang on 'til Monday I’ve asked Vinoth about it and should have more details for you next week.

1 Like
5

Ours are now very dinky…

image

Less than half of the size they were before, pretty sure its the line which states max-width: 25% - if I unchecked that in the inspector, they revert to 200px wide again.

Happy to hang on till Monday, no point us adding stuff to revert if it might revert on its on later :slight_smile:

Looking at a positive - I now feel like a giant! :smiley:

1 Like
6

We are going to get a fix deployed to you today, restricting to 25% width on these images was bug on our part, fixed per:

5 Likes
7

Many thanks Sam, for the update, the fix and the info :slight_smile:

4 Likes
8

Just to update on this…

We no longer have small images… now we have large ones… they are in fact larger than what we had originally! :stuck_out_tongue_winking_eye:

Our images were originally around 200x112px, they are now weighing in around 267x149px.

Any chance we can have them back to 200x112 please :slight_smile:

It looks like the sizes used on the categories view are the same as the ones that were used on the specific category view, these were always a little bit larger and that was fine.

2 Likes
9

I added the following to your theme’s css to restrict the width of the images in the /categories view to 200px:

.category-list .category-logo.aspect-image {
    max-width: 200px;
}
7 Likes
10

Thank you, we are all back to normal now :slight_smile:

This will be a requirement going forwards now I guess, e.g the change you made for us?

12

Hello, I just set that CSS on the theme. But I also want to resize on the specific category view /c/category

My original image is 32px x 32px but it stills enlarging to 150px x 150px.

I checked CSS and seems they are shareing the same classes, so I am not very sure how to change the size inside the category view.

735×227 58.3 KB

Any idea?

Thank you

13

See the category-heading example below:

.category-list .category-logo.aspect-image {
    max-width: 32px;
}
.category-heading .category-logo.aspect-image {
    max-width: 32px;
}
1 Like