For the second guide, today we will work on creating a "spoiler" feature, to hide images from being previewed. This will make use of Minnit's CSS Assets feature, which allows you to upload images for use in your CSS layouts.

Let's begin!


Step 1 - Creating our "spoiler image"

For the purposes of this demonstration, I will be using a simple, 105x105 image I made in Paint, that just says "image hidden". You could make this anything you want, with any size, but it will require tweaking my example codes to your liking.

preview

This will be what is displayed in place of a "spoiler image".

Then, we must upload this as a "CSS Asset", like so:

preview

For this demonstration, "image1" will be our Image Hidden. If that slot is taken by another project, simply choose another slot, and remember the name of the slot you chose, and amend my code accordingly.


Step 2 - Hiding the Images

We can use the following CSS code to hide all images in the chat:

.attachBoxImg {background: url(%image1%); width: 105px; height: 105px !important; padding-left: 105px; padding-top:105px;}

Note, this will set the background URL to %image1%, which Minnit will replace with the CSS Asset you uploaded. Change the "image1" to the slot you chose, and the "105" for width/padding left, and "105" for height/padding top, with your own image's width/height respectively.


Step 3 - Only hiding "spoiler" images.

You'll likely only want to hide images if the message owner specifically says "spoiler" in the message, like I did with my example above. If so, once again, we will be using the "message" data attribute. We want it to match any instance of "spoiler", so, referencing this guide by CSS-Tricks, we will set it up using the [data-value*="foo"] example, thus doing:

.msgText[data-message*="spoiler"] .attachBoxImg{background: url(%image1%); width: 105px; height: 105px !important; padding-left: 105px; padding-top:105px;}

Thus, we get the following result:

preview

Users who click on the "image hidden" will get to see the hidden image. But, users who don't want to be "spoiled", won't. This can be useful if you want to send an image, but don't want people to see it unless they're absolutely sure. When they click it, of course, they'll be able to see the real image in fully glory.

preview

Looking good!


That wraps up today's guide. As always, if you have any questions about how to do this, or you have any other questions, feel free to make a post on this board.

Want to make custom CSS for your chat? Check out https://minnit.chat/pricing to get a "Community" or "Pro" chat, which gives you access to many cool features, including the CSS design tools outlined above.

Happy chatting!