Nel forum di Blender Artists abbiamo una politica sui contenuti piuttosto liberale che consente nudità e violenza (entro certi limiti). Sebbene la maggior parte dei membri sia a suo agio con questo tipo di contenuti, esistono ovviamente pubblici e situazioni in cui non è appropriato (per noi principalmente scuole e bambini). Dato che facciamo ampio uso di gallerie a piastrelle con il plugin Topic List Preview, avevamo bisogno di un modo per rendere questo tipo di contenuti opzionali e tenerli nascosti di default.
La soluzione è stata più semplice da implementare del previsto e ho deciso di condividerla qui nel caso in cui qualcun altro possa trarne beneficio. Avvertenza: linkerò a contenuti NSFW. Andiamo!
Richiedevamo già il tag #nsfw per tutti i post pertinenti e lo abbiamo applicato rigorosamente negli ultimi mesi. Il nostro plugin AdSense è configurato per non mostrare annunci su queste pagine, poiché ciò ci avrebbe (e lo ha già!) messo nei guai con Google. (Un grande grazie a @neil per aver aggiunto questa funzione!)
Utilizzando del CSS, abbiamo aggiunto un effetto sfocatura e un testo di sovrapposizione per tutti i media all’interno di tali argomenti. La sfocatura verrà rimossa al passaggio del mouse:
/* visualizza sfocatura NSFW e testo di sovrapposizione su tutti i media negli argomenti #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: '⚠️ Contenuto maturo - Passa il mouse per mostrare';
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;
}
}
Immagini e video in un argomento ora appaiono così:
E in tutte le gallerie a piastrelle TLP, abbiamo:
Successivamente, abbiamo aggiunto una preferenza che permette agli utenti di disabilitare la sfocatura per il proprio account. Si è rivelato più semplice da implementare di quanto pensassi, utilizzando campi personalizzati.
Abbiamo iniziato creando un campo personalizzato di tipo casella di controllo:
Poi, abbiamo riutilizzato del codice per aggiungere il tag ‘nsfw-always-show’ alla classe del body per questi utenti:
<!-- aggiungi le preferenze NSFW dell'utente corrente al 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();
// mostra sempre NSFW
if (u.custom_fields.user_field_2) {
console.log('mostra nsfw per l\'utente');
$('body').addClass('nsfw-always-show' );
}
});
};
</script>
Un ultimo pezzo di CSS rimuove la sfocatura per questi utenti:
/* nascondi campi personalizzati dal modulo di registrazione */
.login-form .user-fields {display:none;}
/* disabilita sfocatura NSFW per gli utenti che lo hanno impostato nelle loro preferenze */
.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;
}
}
Un problema noto con questo approccio è che non funziona ancora bene su mobile, poiché :hover non è supportato.
Se vuoi vedere questo in azione puoi visitare la nostra pagina del tag #nsfw, ma, beh, potresti vedere alcuni contenuti NSFW lì 
Spero che questo sia stato utile per qualcuno!
