No fórum da Blender Artists, temos uma política de conteúdo bastante liberal, onde permitimos nudez e violência (até certo ponto). Embora a maioria dos membros esteja confortável com esse tipo de conteúdo, existem, claro, públicos e situações onde isso não é adequado (principalmente escolas e crianças). E como fazemos uso intensivo de galerias em mosaico com o plugin Topic List Preview, precisávamos de uma maneira de tornar esse tipo de conteúdo opt-in e mantê-lo fora da vista por padrão.
A solução foi mais fácil de implementar do que o esperado, e decidi compartilhá-la aqui caso alguém mais possa utilizá-la. Aviso justo: vou vincular a alguns conteúdos NSFW aqui. Vamos lá!
Já exigíamos uma tag #nsfw para qualquer post relevante e temos aplicado isso rigorosamente nos últimos meses. Nosso plugin AdSense está configurado para não exibir anúncios nessas páginas, pois isso (e já aconteceu!) nos colocaria em problemas com o Google. (Muito obrigado ao @neil por adicionar esse recurso!)
Usando algum CSS, adicionamos um desfoque e um texto de sobreposição para todas as mídias dentro desses tópicos. O desfoque será removido ao passar o mouse:
/* exibe desfoque NSFW e texto de sobreposição em qualquer mídia em tópicos #nsfw */
.tag-nsfw {
.topic-body .cooked img,
.topic-body .cooked iframe,
.topic-body .cooked .lazyYT-container,
.topic-thumbnail img {
filter: blur(10px);
-webkit-transition: .3s ease-in-out;
transition: .2s ease-in-out;
}
.topic-body:hover .cooked img,
.topic-body:hover .cooked iframe,
.topic-body:hover .cooked .lazyYT-container,
.topic-thumbnail:hover img {
filter: blur(0);
-webkit-transition: .3s ease-in-out;
transition: .2s ease-in-out;
}
.topic-body .cooked a.lightbox:before,
.topic-body .cooked iframe:before,
.topic-thumbnail a:before {
z-index:2;
padding: 5px;
font-size:1em;
position:absolute;
color:#fff;
content: '⚠️ Conteúdo maduro - Passe o mouse para mostrar';
background: #e86800;
}
.topic-body .cooked a.lightbox:before,
.topic-body .cooked iframe:before {
top: 15px;
left: 10px;
}
.topic-thumbnail a:before {
top: 65px;
left: 20px;
}
.topic-body .cooked a.lightbox:hover:before,
.topic-body .cooked iframe:hover:before,
.topic-thumbnail a:hover:before {
display:none;
}
}
Imagens e vídeos em um tópicos agora aparecem assim:
E em qualquer galeria em mosaico do TLP, temos:
Em seguida, adicionamos uma preferência que permite aos usuários desativar o desfoque para suas contas. Isso acabou sendo mais fácil de implementar do que eu pensava, usando campos personalizados.
Começamos criando um campo personalizado de caixa de seleção:
Depois, reaproveitamos algum código para adicionar a tag ‘nsfw-always-show’ à classe do corpo para esses usuários:
<!-- adiciona as preferências NSFW do usuário atual à tag body -->
<script type="text/discourse-plugin" version="0.8">
// https://meta.discourse.org/t/css-classes-for-group-membership-for-simplified-ui-mode/60838/2
if (window.jQuery) {
window.jQuery(function ($) {
var u = Discourse.User.current();
// sempre mostrar NSFW
if (u.custom_fields.user_field_2) {
console.log('mostrar nsfw para o usuário');
$('body').addClass('nsfw-always-show' );
}
});
};
</script>
Um último trecho de CSS remove o desfoque para esses usuários:
/* esconde campos personalizados do formulário de cadastro */
.login-form .user-fields {display:none;}
/* desativa o desfoque NSFW para usuários que definiram isso em suas preferências */
.nsfw-always-show .tag-nsfw {
.topic-body .cooked img,
.topic-body .cooked iframe,
.topic-body .cooked .lazyYT-container,
.topic-thumbnail img {
filter: blur(0px);
}
.topic-body .cooked a.lightbox:before,
.topic-body .cooked iframe:before,
.topic-thumbnail a:before {
display:none;
content: none;
}
}
Um problema conhecido com essa abordagem é que ela ainda não funciona bem em dispositivos móveis, pois :hover não é suportado.
Se você quiser ver isso em ação, pode visitar nossa página da tag #nsfw, mas, bem, você pode ver algum conteúdo NSFW lá 
Espero que isso tenha sido útil para alguém!
