حلنا لمعاملة محتوى NSFW بشكل غير واضح

[bartv (Bart)]

في منتدى Blender Artists، نتبع سياسة محتوى ليبرالية إلى حد ما تسمح بالعري والعنف (إلى حد معين). بينما يقبل معظم الأعضاء هذا النوع من المحتوى، توجد بالطبع جماهير ومواقف لا يكون فيها مناسبًا (خاصة بالنسبة لنا في المدارس والأطفال). ونظرًا لأننا نستخدم بكثرة المعارض المبلطة مع إضافة معاينة قائمة المواضيع، احتجنا إلى طريقة لجعل هذا النوع من المحتوى اختياريًا وإخفاؤه افتراضيًا عن أعينكم.

كان الحل أسهل في التنفيذ مما توقعنا، وقررت مشاركته هنا في حال كان بإمكان أي شخص آخر الاستفادة منه. تحذير عادل: سأقوم بربط بعض المحتوى غير الملائم للعمل (NSFW) هنا. لنبدأ!

كاننا نطلب بالفعل استخدام وسم #nsfw لأي منشورات ذات صلة، وقد قمنا بتطبيق ذلك بصرامة خلال الأشهر القليلة الماضية. تم ضبط إضافة AdSense لدينا لعدم عرض الإعلانات على هذه الصفحات، لأن ذلك (وقد حدث بالفعل!) سيوقعنا في مشكلة مع جوجل. (شكرًا كبيرًا لـ @neil لإضافة هذه الميزة!)

باستخدام بعض تنسيقات CSS، أضفنا تأثير ضبابي ونصًا تراكبيًا لجميع الوسائط داخل هذه المواضيع. سيتم إزالة الضبابية عند تمرير الماوس:

/* عرض تأثير الضباب والنص التراكبي لأي وسائط في مواضيع #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: '⚠️ محتوى ناضج - مرر الماوس للإظهار';
        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;
	}
}

تبدو الصور والفيديوهات في الموضوع الآن بهذا الشكل:

وفي أي معرض مبلط باستخدام TLP، يكون الشكل كالتالي:

بعد ذلك، أضفنا تفضيلاً يسمح للمستخدمين بتعطيل التأثير الضبابي لحساباتهم. اتضح أن تنفيذ ذلك أسهل مما ظننت باستخدام الحقول المخصصة.

بدأنا بإنشاء حقل مخصص من نوع مربع اختيار:

ثم أعيدنا توظيف بعض الأكواد لإضافة وسم ‘nsfw-always-show’ إلى فئة الجسم (body class) لهؤلاء المستخدمين:

<!-- إضافة تفضيلات المستخدم الحالية المتعلقة بـ NSFW إلى وسم الجسم -->
<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 دائمًا
        if (u.custom_fields.user_field_2) {
            console.log('إظهار NSFW للمستخدم');
            $('body').addClass('nsfw-always-show' );
        }

    });
};

</script>

وقد أضافت قطعة أخيرة من CSS إزالة التأثير الضبابي لهؤلاء المستخدمين:

/* إخفاء الحقول المخصصة من نموذج التسجيل */

.login-form .user-fields {display:none;}

/* تعطيل تأثير الضباب لمحتوى NSFW للمستخدمين الذين حددوا ذلك في تفضيلاتهم */

.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;
	}
}

مشكلة معروفة مع هذا النهج هي أنه لا يعمل بشكل جيد على الأجهزة المحمولة بعد، حيث لا يتم دعم :hover.

إذا كنت ترغب في رؤية هذا التطبيق عمليًا، يمكنك زيارة صفحة وسم #nsfw لدينا، لكن، حسنًا، قد ترى بعض محتوى NSFW هناك

آمل أن يكون هذا مفيدًا لشخص ما!

[Canapin (Coin-coin le Canapin)]

@bartv

A known issue with this approach is that it does not work great on mobile yet as :hover is not supported.

Also, on desktop, if an image take some space on the screen, you can easily hover it by mistake.
Instead of hovering to unblur, what about dynamically add a button “show the nsfw image” on top or under each nsfw image ?

[raghukamath (Raghavendra Kamath)]

At krita-artists.org We have slightly modified this to be on click and not on hover. However the setting used in the profile doesn’t work. Even if the user has set to show nsfw content he gets the blurred content. Is there a fix for it?

[bartv (Bart)]

I can’t edit my OP anymore, but here’s the updated code. Mind sharing your ‘on click’ solution too?

<!-- add current user's nsfw preferences to body tag -->
<script type="text/discourse-plugin" version="0.8.7">

// https://meta.discourse.org/t/css-classes-for-group-membership-for-simplified-ui-mode/60838/2
if (window.jQuery) {
    window.jQuery(function ($) {

        let currentUser = api.getCurrentUser();
        
        if (currentUser) {
            api.container.lookup('store:main').find('user', currentUser.username).then((user) => {

                if (user.user_fields[2]) {
                    $('body').addClass('nsfw-always-show' );
                }
            });
        }
    });
};
</script>

[raghukamath (Raghavendra Kamath)]

Our onlick solution is hacky and I think may not be ideal, we just removed blur from hover and added blur by default. The message was also changed to say user has click to go the post. Now the user has to click to go to post and click again to reveal the nsfw image in lightbox. Which is cumbersome but it prevents inadvertent hover and reveal. It might be good to use js to remove blur on click.

/* display nsfw blur and overlay text on any media in #nswf topics */
.tag-nsfw { 
.topic-thumbnail {
    overflow:hidden;
}

	.topic-body .cooked .lightbox img, 
	.topic-body .cooked iframe, 
	.topic-body .cooked .lazyYT-container, 
	.topic-thumbnail img {
    filter: blur(30px);	
    -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: '⚠️ Mature content - Click to see the picture';
    background: #000;

	}
	
	.topic-body .cooked a.lightbox:before, 
	.topic-body .cooked iframe:before {
    top: 50%;
    left: 10px;
    right: 10px;
    text-align:center;
	}

	.topic-thumbnail a:before {
    top: 65px;
    left: 20px;
	}
	
}

/* hide custom fields from signup form */
.login-form .user-fields {display:none;}

/* disable nsfw blurring for users who set this in their preferences */
.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;
	}
}

[fzngagan (Faizaan Gagan)]

@bartv @Terrapop

إذا أراد شخص ما تولي هذا الأمر، فمن الممكن استخدام Discourse Image Filter لبناء إضافة auto nsfw blurring.

[anon89147131]

مرحبًا، ما الذي يجب علي فعله لإزالة التمويه وجعل النص رابطًا تشعبيًا، كما نرغب في ربطه بالتبرع خارج الموقع؟

[bartv (Bart)]

للأسف، لا يمكنك فعل ذلك باستخدام CSS فقط؛ سيتعين عليك إضافة كود خاص بك للقيام بذلك.

[bartv (Bart)]

ما عليك سوى إزالة أسطر filter: blur(10px); من ملف CSS.

[codinghorror (Jeff Atwood)]

@bartv لقد قمت بإنشاء المنشور الأول كويكي، فلا تتردد في تحديثه حسب الحاجة!