Im Blender Artists-Forum haben wir eine relativ liberale Inhaltsrichtlinie, die Nacktheit und Gewalt (bis zu einem gewissen Grad) erlaubt. Während die meisten Mitglieder mit dieser Art von Inhalt einverstanden sind, gibt es natürlich Zielgruppen und Situationen, in denen dies nicht geeignet ist (für uns hauptsächlich Schulen und Kinder). Da wir stark auf Kachelgalerien mit dem Topic List Preview-Plugin zurückgreifen, benötigten wir eine Möglichkeit, diese Art von Inhalt als Opt-in zu gestalten und standardmäßig nicht im Vordergrund zu zeigen.
Die Lösung war einfacher zu implementieren als erwartet, und ich habe mich entschieden, sie hier zu teilen, falls andere sie ebenfalls nutzen können. Fairer Hinweis: Ich werde hier auf einige NSFW-Inhalte verlinken. Los geht’s!
Wir haben bereits einen #nsfw-Tag für alle relevanten Beiträge gefordert und dies in den letzten Monaten strikt durchgesetzt. Unser AdSense-Plugin ist so konfiguriert, dass auf diesen Seiten keine Werbung angezeigt wird, da dies (und hat!) Probleme mit Google verursachen würde. (Großer Dank an @neil für das Hinzufügen dieser Funktion!)
Mithilfe von etwas CSS haben wir für alle Medien in solchen Themen eine Unschärfe und einen Overlay-Text hinzugefügt. Die Unschärfe wird beim Hover entfernt:
/* Anzeige von NSFW-Unschärfe und Overlay-Text für alle Medien in #nsfw-Themen */
.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: '⚠️ Erwachseneninhalte – Zum Anzeigen überfahren';
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;
}
}
Bilder und Videos in einem Thema sehen nun so aus:
Und in allen TLP-Kachelgalerien haben wir:
Als Nächstes haben wir eine Einstellung hinzugefügt, die es Benutzern ermöglicht, die Unschärfe für ihr Konto zu deaktivieren. Dies erwies sich als einfacher zu implementieren als gedacht, indem wir benutzerdefinierte Felder verwendeten.
Wir begannen damit, ein Kontrollkästchen als benutzerdefiniertes Feld zu erstellen:
Dann haben wir etwas Code umfunktioniert, um für diese Benutzer das Tag ‘nsfw-always-show’ zur body-Klasse hinzuzufügen:
<!-- Aktuelle NSFW-Einstellungen des Benutzers zum body-Tag hinzufügen -->
<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();
// NSFW immer anzeigen
if (u.custom_fields.user_field_2) {
console.log('NSFW für Benutzer anzeigen');
$('body').addClass('nsfw-always-show' );
}
});
};
</script>
Ein letzter CSS-Abschnitt entfernt die Unschärfe für diese Benutzer:
/* Benutzerdefinierte Felder vom Anmeldeformular ausblenden */
.login-form .user-fields {display:none;}
/* NSFW-Unschärfe für Benutzer deaktivieren, die dies in ihren Einstellungen festgelegt haben */
.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;
}
}
Ein bekanntes Problem bei diesem Ansatz ist, dass es auf mobilen Geräten noch nicht gut funktioniert, da :hover nicht unterstützt wird.
Wenn Sie dies in Aktion sehen möchten, können Sie unsere #nsfw-Tag-Seite besuchen, aber nun ja, Sie könnten dort einige NSFW-Inhalte sehen 
Ich hoffe, das war für jemanden hilfreich!
