Allow alternate logo on mobile view

Contribute Feature

AI-generated summary

A feature request was made to allow for an alternate logo on mobile view. ampburner noted that while custom CSS and HTML headers can be specified for desktop and mobile views, the site logo remains the same, which is problematic for logos not suitable for small screens. downey agreed, mentioning that this issue also affects wider logos, but suggested that CSS media queries could be used to implement a solution. However, ampburner questioned the feasibility of this approach. downey provided a link to a resource that outlines several techniques for modifying image sources with CSS media queries. In response to the discussion, riking implemented the feature, and posted a link to the pull request on GitHub, which was met with appreciation from ampburner.

1

Under admin > customize, I have the ability to specify custom css and a html-header for both the desktop and mobile views (independently)

But the site logo is always the same (shared between both views)

I would like the ability to specify a separate image for the mobile view, because my logo is not suitable for small screen displays:

image.jpg640×1136 143 KB

(The font looks kind of crappy on mobile)

This has the additional advantage of saving bandwidth and faster loading times.

Possible implementations:

  • additional setting for the mobile logo (empty defaults to desktop logo)
  • allow to override the image via a stylesheet somehow? If that’s possible.
1 curtida
2

Yes please. This is a problem for anyone with wider logos, I think.

It should be possible with CSS media queries.

This would also help with our hack to get a higher-resolution logo in there for HiDPI displays.

1 curtida
3

How would you do it with media queries? I guess that you would only be able to manipulate it via css if the image is a style background-image, but not as long as it’s an img src?

4

See https://stackoverflow.com/questions/12776434/media-query-image-src-property-change-using-css or Google around for several different techniques.

1 curtida
5

I just finished this feature:

https://github.com/discourse/discourse/pull/2454

4 curtidas
6

Awesome! Much appreciated!