En el foro de Blender Artists tenemos una política de contenido bastante liberal que permite la desnudez y la violencia (hasta cierto punto). Aunque la mayoría de los miembros están bien con este tipo de contenido, por supuesto, existen audiencias y situaciones donde esto no es adecuado (principalmente para nosotros, escuelas y niños). Y dado que hacemos un uso intensivo de galerías en mosaico con el plugin de vista previa de lista de temas, necesitábamos una forma de hacer que este tipo de contenido fuera optativo y que no apareciera frente a tus ojos de forma predeterminada.
La solución fue más fácil de implementar de lo esperado y decidí compartirla aquí por si alguien más puede aprovecharla. Advertencia justa: enlazaré a contenido NSFW aquí. ¡Vamos!
Ya requeríamos una etiqueta #nsfw para cualquier publicación relevante y hemos estado aplicándola estrictamente durante los últimos meses. Nuestro plugin de AdSense está configurado para no mostrar anuncios en estas páginas, ya que eso (¡y lo ha hecho!) nos metería en problemas con Google. (¡Muchas gracias a @neil por agregar esta función!)
Usando algo de CSS, añadimos un desenfoque y un texto superpuesto para todos los medios dentro de dichos temas. El desenfoque se eliminará al pasar el cursor:
/* mostrar desenfoque NSFW y texto superpuesto en cualquier medio en temas #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: '⚠️ Contenido maduro - Pasa el cursor 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;
}
}
Las imágenes y videos en un tema ahora se ven así:
Y en cualquier galería en mosaico de TLP, tenemos:
A continuación, añadimos una preferencia que permite a los usuarios desactivar el desenfoque para su cuenta. Resultó ser más fácil de implementar de lo que pensaba usando campos personalizados.
Comenzamos creando un campo personalizado de casilla de verificación:
Luego, reaprovechamos algo de código para añadir la etiqueta ‘nsfw-always-show’ a la clase del cuerpo para estos usuarios:
<!-- agregar las preferencias NSFW del usuario actual a la etiqueta 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();
// mostrar siempre NSFW
if (u.custom_fields.user_field_2) {
console.log('mostrar nsfw para el usuario');
$('body').addClass('nsfw-always-show' );
}
});
};
</script>
Un último fragmento de CSS elimina el desenfoque para estos usuarios:
/* ocultar campos personalizados del formulario de registro */
.login-form .user-fields {display:none;}
/* desactivar el desenfoque NSFW para usuarios que lo establecieron en sus preferencias */
.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 conocido con este enfoque es que aún no funciona muy bien en dispositivos móviles, ya que :hover no es compatible.
Si quieres ver esto en acción, puedes visitar nuestra página de etiqueta #nsfw, pero, bueno, podrías ver algo de contenido nsfw allí 
Espero que esto haya sido útil para alguien!
