Imagens de fundo de categoria não escalonam bem para mobile

Contribuir Experiência do Usuário
1

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

here is the background image in desktop:

png_fixed
png_fixed432×464 22.8 KB

the same image in a topic for mobile ux:

jpg_fixed
jpg_fixed270×480 51.3 KB

1 curtida
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 curtidas
3

here are two samples:

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

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

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:

https://padpors.com/t/آیا-تا-حالا-تجربه-ای-از-کار-داوطلبانه-بین-المللی-توی-حوزه-کامپیوتر-داشتین؟/10482/?safe_mode=no_custom%2Cno_plugins%2Conly_official

5

thanks, but I’m a little bit confused:

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

image
image781×635 62.6 KB

2 curtidas
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 curtidas
8

Alguma novidade sobre isso? Estou pensando em implementar isso para algumas subcategorias que estamos prestes a adicionar, e elas realmente ficam horríveis no mobile…

Alternativamente, há uma maneira de implementar um fundo único para uma categoria/subcategoria individual usando CSS?

9

Descobri como fazer isso e achei que seria útil compartilhar a técnica que funcionou para mim. Para adicionar a imagem em https://some.url como fundo da categoria com o id category-off-topic-rwby, usei este CSS em um componente de tema:

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);
    }
}

Isso centraliza a imagem em https://some.url e a dessatura (usando a propriedade opacity), além de torná-la fixa para que não role junto com a página. O resultado:

PNG
PNG1333×1147 364 KB

3 curtidas
10

Estou supondo que você esteja usando um dispositivo iOS? Se sim, isso é realmente apenas parcialmente culpa do Discourse. Dispositivos iOS não respeitam background-attachment: fixed;, que é a propriedade CSS atualmente usada no Discourse para criar o efeito de um fundo fixo no corpo da página quando você define imagens de categoria.

A razão pela qual os dispositivos iOS ignoram essa propriedade é devido às preocupações com a repintura constante que ela causa.

Aqui estão alguns exemplos do que quero dizer:

Se você usar uma cor CSS sólida como fundo, a única coisa que é repintada enquanto você rola a página é a barra de rolagem – destaque verde.

Até aqui, tudo bem. No entanto, assim que você adiciona uma imagem real e a combina com background-attachment: fixed;, o navegador precisa repintá-la constantemente para mantê-la no lugar a cada rolagem.

Perceba como o fundo é repintado a cada rolagem? É por isso que os dispositivos iOS não respeitam essa propriedade.

Sua solução é boa, mas você ainda está fazendo o navegador repintar os fundos, assim como no vídeo acima.

Isso já está na minha lista há algum tempo, mas vou tentar encaixar uma correção nas próximas três semanas.

Se você não puder esperar tanto tempo, aqui está o que pretendo implementar e você pode testar isso no seu tema:

3 curtidas