حلنا لمعاملة محتوى 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

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

أيضًا، على سطح المكتب، إذا احتلت صورة بعض المساحة على الشاشة، فقد تمر فوقها بالخطأ بسهولة.
بدلًا من التمرير لإزالة الضبابية، ماذا لو أضفنا زرًا ديناميكيًا بعنوان “عرض الصورة غير الآمنة للعمر” فوق أو تحت كل صورة غير آمنة للعمر؟

[raghukamath (Raghavendra Kamath)]

في krita-artists.org قمنا بتعديل هذا قليلاً ليصبح عند النقر بدلاً من عند التحويم. ومع ذلك، الإعداد المستخدم في الملف الشخصي لا يعمل. حتى لو قام المستخدم بتعيين إظهار محتوى NSFW، فإنه يحصل على محتوى ضبابي. هل هناك حل لذلك؟

[bartv (Bart)]

لم أعد قادرًا على تعديل منشوري الأصلي، لكن إليك الكود المحدث. هل تمانع في مشاركة حلك الخاص بـ ‘عند النقر’ أيضًا؟

<!-- إضافة تفضيلات المستخدم الحالي للمحتوى غير الآمن (NSFW) إلى وسم body -->
<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)]

حلاًنا الحالي باستخدام ‘onlick’ هو حل غير أنيق وقد لا يكون مثاليًا؛ فقد قمنا بإزالة تأثير الضباب (blur) عند التمرير وأضفناه افتراضيًا. كما تم تغيير الرسالة لتوضيح أن على المستخدم النقر للانتقال إلى المنشور. الآن، يجب على المستخدم النقر للانتقال إلى المنشور ثم النقر مرة أخرى لكشف الصورة غير الملائمة (NSFW) في نافذة منبثقة (lightbox). هذا الإجراء مرهق بعض الشيء، لكنه يمنع الكشف العرضي عند التمرير. قد يكون من الجيد استخدام JavaScript لإزالة تأثير الضباب عند النقر.

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

/* إخفاء الحقول المخصصة من نموذج التسجيل */
.login-form .user-fields {display:none;}

/* تعطيل تأثير الضباب للمحتوى غير الملائم للمستخدمين الذين حددوا ذلك في تفضيلاتهم */
.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 لقد قمت بإنشاء المنشور الأول كويكي، فلا تتردد في تحديثه حسب الحاجة!