Sur le forum Blender Artists, nous avons une politique de contenu assez libérale qui autorise la nudité et la violence (dans une certaine mesure). Bien que la plupart des membres acceptent ce type de contenu, il existe naturellement des publics et des situations où cela n’est pas approprié (pour nous, principalement les écoles et les enfants). Comme nous utilisons largement des galeries en mosaïque avec le plugin Topic List Preview, nous avions besoin d’un moyen de rendre ce type de contenu optionnel et de ne pas l’afficher par défaut.
La solution s’est révélée plus facile à mettre en œuvre que prévu, et j’ai décidé de la partager ici au cas où d’autres personnes pourraient en bénéficier. Avertissement : je vais lier à du contenu NSFW ici. C’est parti !
Nous exigeons déjà un tag #nsfw pour tout post pertinent et l’appliquons strictement depuis quelques mois. Notre plugin AdSense est configuré pour ne pas afficher de publicités sur ces pages, car cela nous (et l’a déjà fait) causerait des problèmes avec Google. (Un grand merci à @neil pour avoir ajouté cette fonctionnalité !)
En utilisant du CSS, nous avons ajouté un flou et un texte de superposition pour tous les médias contenus dans ces sujets. Le flou disparaît au survol :
/* afficher le flou NSFW et le texte de superposition sur tous les médias dans les sujets #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: '⚠️ Contenu mature - Survolez pour afficher';
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;
}
}
Les images et vidéos dans un sujet ressemblent maintenant à ceci :
Et dans toutes les galeries en mosaïque TLP, nous avons :
Ensuite, nous avons ajouté une préférence permettant aux utilisateurs de désactiver le flou pour leur compte. Cela s’est avéré plus facile à mettre en œuvre que prévu grâce aux champs personnalisés.
Nous avons commencé par créer un champ personnalisé de type case à cocher :
Ensuite, nous avons réutilisé du code pour ajouter le tag ‘nsfw-always-show’ à la classe body pour ces utilisateurs :
<!-- ajouter les préférences NSFW de l'utilisateur actuel à la balise 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();
// afficher toujours le NSFW
if (u.custom_fields.user_field_2) {
console.log('afficher nsfw pour l\'utilisateur');
$('body').addClass('nsfw-always-show' );
}
});
};
</script>
Un dernier bout de CSS supprime le flou pour ces utilisateurs :
/* masquer les champs personnalisés du formulaire d'inscription */
.login-form .user-fields {display:none;}
/* désactiver le flou NSFW pour les utilisateurs qui l'ont défini dans leurs préférences */
.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 problème connu avec cette approche est qu’elle ne fonctionne pas encore très bien sur mobile, car :hover n’est pas pris en charge.
Si vous voulez voir cela en action, vous pouvez visiter notre page du tag #nsfw, mais, eh bien, vous pourriez y voir du contenu nsfw 
J’espère que cela sera utile à quelqu’un !
