Thank you, @Lhc_fl, for quick and quality solution.
Our use case is based on our marketplace request’s description:
The idea was inspired by Our solution for blurring NSFW content, we just started by inverting the logic and needed a toggle for our community to blur & unblur media.
Just add Custom User Field as a Checkbox and follow our approach below.
We use Sidebar User Field Toggle with additional custom component like so:
- Create new theme component right within your admin dashboard
/admin/customize/ → Components → Install → Create new (component) - Add CSS:
CSS
/* display nsfw blur and overlay text on any media in #nswf topics */
.nsfw-hide {
.topic-body .cooked img:not(.emoji):not(.avatar),
.topic-body .cooked iframe,
.topic-body .cooked .lazyYT-container,
.topic-body .cooked .video-container,
.topic-thumbnail img:not(.emoji) {
filter: blur(10px);
-webkit-transition: .3s ease-in-out;
transition: .2s ease-in-out;
}
.topic-body:hover .cooked img:not(.emoji),
.topic-body:hover .cooked iframe,
.topic-body:hover .cooked .lazyYT-container,
.topic-body:hover .cooked .video-container,
.topic-thumbnail:hover img:not(.emoji) {
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: '👀 Hover to show';
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,
.topic-body .cooked .video-container:hover:before {
display:none;
}
}
- Add JS (Head):
JS Code
<script type="text/discourse-plugin" version="0.8.7">
const { userPath } = require("discourse/lib/url");
const { ajax } = require("discourse/lib/ajax");
const you = api.getCurrentUser();
if (you) {
ajax(userPath(`${you.username_lower}.json`)).then((res) => {
api
._lookupContainer("model:site")
.appEvents.trigger("sidebar_user_fields_toggled", {
user_fields: res.user.user_fields,
});
});
}
// https://meta.discourse.org/t/css-classes-for-group-membership-for-simplified-ui-mode/60838/2
api.onAppEvent("sidebar_user_fields_toggled", (status) => {
if (window.jQuery) {
window.jQuery(function ($) {
if (status.user_fields[2] === "true") { // Or some else
$('body').addClass('nsfw-hide' );
} else {
$('body').removeClass('nsfw-hide' );
}
});
}
});
</script>
- Just set up the toggle component’s buttons the way you want them to be. We use Custom User’s Field ID there as a reference.
P.S. It may be we could enter the same code into the Toggle’s component itself, but I just don’t bother to test it and why touch perfectly working code anyway?
The @Lhc_fl’s component works within Dropdown navigation type perfectly too.