Kategorie-Hintergrundbilder skalieren für Mobilgeräte nicht gut

Beitragen UX
1

category background image doesn’t scale correctly in mobile ux,

here is the background image in desktop:

png_fixed

the same image in a topic for mobile ux:

jpg_fixed

1 „Gefällt mir“
2

I’m not aware of anyway to add background images to topic pages based on the topic category (which is what the second screenshot looks like) except via a theme.

Category images only show up on top of their pages and on the categories topic-list. How are you adding these images? Can you please share a link to a page where I can see this?

2 „Gefällt mir“
3

here are two samples:

https://padpors.com/c/PP-Porch/Library

even in safe-mode and when the themes are deactivated, you can see the background image in a topic page. e.g. of safe-mode activated page:

5

thanks, but I’m a little bit confused:

we used the category setting to add the background and not a theme.

image
image.png781×635 62.6 KB

2 „Gefällt mir“
6

Ah, I see what you mean, this was a feature that I hadn’t used before so apologies for the confusion :sunflower:

I’ll take a look and see what I can do to make it look nicer :+1:

6 „Gefällt mir“
8

Gibt es dazu schon Neuigkeiten? Ich überlege, diese für einige Unterkategorien einzuführen, die wir bald hinzufügen werden, und sie sehen auf mobilen Geräten tatsächlich schrecklich aus …

Gibt es alternativ eine Möglichkeit, mit CSS einen einzigartigen Hintergrund für eine einzelne Kategorie oder Unterkategorie zu implementieren?

9

Ich habe herausgefunden, wie das geht, und möchte die Technik, die bei mir funktioniert hat, teilen. Um das Bild unter https://some.url als Hintergrund für die Kategorie mit der ID category-off-topic-rwby hinzuzufügen, habe ich diesen CSS-Code in einer Theme-Komponente verwendet:

body[class~="category-off-topic-rwby"] {
    #background {
    background: url(https://some.url);
    background-position: center center;
    background-size: cover;
    z-index: -1;
    opacity: .50;
    min-width: 100vw;
    width: auto;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    }
}

Dadurch wird das Bild unter https://some.url zentriert und entfarbt (über die Eigenschaft opacity), und es wird fixiert, sodass es nicht mit der Seite mitläuft. Das Ergebnis:

PNG
PNG1333×1147 364 KB

3 „Gefällt mir“
10

Ich vermute, du benutzt ein iOS-Gerät? Wenn ja, liegt das nur teilweise an Discourse. iOS-Geräte respektieren background-attachment: fixed; nicht, die CSS-Eigenschaft, die derzeit in Discourse verwendet wird, um den Effekt eines fixierten Seitenhintergrunds zu erzielen, wenn du Kategorienbilder festlegst.

Der Grund, warum iOS-Geräte diese Eigenschaft ignorieren, liegt in ihren Bedenken bezüglich der ständigen Neuzeichnung, die sie verursacht.

Hier sind einige Beispiele, was ich meine:

Wenn du eine feste CSS-Farbe als Hintergrund verwendest, wird beim Scrollen nur die Bildlaufleiste neu gezeichnet – grüne Markierung.

Bisher so gut. Sobald du jedoch ein echtes Bild hinzufügst und dies mit background-attachment: fixed; kombinierst, muss der Browser es ständig neu zeichnen, um es bei jedem Scrollen an Ort und Stelle zu halten.

Beachte, wie der Hintergrund bei jedem Scrollen neu gezeichnet wird? Deshalb respektieren iOS-Geräte diese Eigenschaft nicht.

Deine Lösung ist gut, aber du veranlasst den Browser immer noch dazu, die Hintergründe genau wie im obigen Video neu zu zeichnen.

Das steht schon seit einiger Zeit auf meiner To-Do-Liste, aber ich werde versuchen, innerhalb der nächsten drei Wochen eine Lösung zu finden.

Wenn du nicht so lange warten kannst, hier ist das, was ich implementieren möchte, und du kannst es in deinem Theme ausprobieren.

3 „Gefällt mir“