What are ideal dimensions for category logo images?


(Tobias Eigen) #1

I really like the category logo images and have been setting them up for all categories on the Kabissa forum. But I am realizing that I need to resize and crop the images so they display properly on computers and smartphones.

See the screenshots below for what is happening now. Looks great on computer, too big on smartphone.


So my question to the community is this: what are the ideal dimensions for category logo images? Or is there an option to not display logos on mobile devices with small screens? Or perhaps are there plans in the works to enable discourse sites to serve up differently sized images on different devices?

Thanks much! :sunny:


(Robin Ward) #2

It is likely that we haven’t fully tested them on mobile yet. This is probably something @awesomerobot can look into when he gets time :smile:


(Rikki Tooley) #3

I think you can change the size with some CSS, the mobile theme puts the .mobile-viewclass on html, so

.mobile-view .category-logo {
    height: 100px;
}

in your customisations might fix your problem? You can of course do the same with the .desktop-view class for desktop pages.

This is totally untested btw!


(Tobias Eigen) #4

Thanks for the tip! Your fix looks good. However, I am not customizing discourse at all at the moment and am trying to keep it that way - discourse.kabissa.org is completely plain vanilla.

A related issue is that if you upload a big file as logo it serves up that big file to everyone, even when it’s resized. Because I am lazy, my preference would be to have discourse automagically resize images for the various locations they show up. Or if discourse won’t do my work for me, I’d like to at least be told what dimensions to resize the image to before uploading… as is customary and familiar on other sites. :wink:


(Robin Ward) #5

I’ve just deploed a fix to the CSS to size category logos better on mobile. Give it a try and let me know how it works for you:

https://github.com/discourse/discourse/commit/c2ed765396fc48b848a39817a96af59914f333bc


(PJH) #6

FWIW:

We had this the other day - Category Logo max-height not on Mobile CSS - What the Daily WTF?

Initially:

After custom mobile css:

.category-logo {
    max-height: 32px;
}

(PJH) #7

100px for comparison:


(Sam Saffron) #8

The “Create Topic” and “Edit” button are screaming “move me to top”, @awesomerobot how complicated is it to change that ?


(Daniela) #9

Sorry to resume this topic after 1 year, but resize from smartphone is still broken (categoty logo images are too big).
Any plan to fix this for the next beta?
Or is it better if I work in a CSS customization in the meanwhile?


(Sebastian) #10

I think there should be two images: one for mobile, one for desktop. We have variations for the general forum, so why not for category images? On Desktop you might want something squared, that is left aligned, on mobile you might want something rectangular that is kind of like a 300x40 type banner maybe…