Comments Plugin onComment/onLoad Example
perchance.org

https://perchance.org/comments-plugin-oncomment-example Simple: Allow users to add a URL at the end of their nickname, which is hidden from their displayed nickname, but used as an avatar pic.

According to the tutorial, it is suggested to be simple. But because I am a newbie, I won’t even able to do it after explained like I was five.

  • VioneTMEnglish
    2•1 month ago

    Here is the modification of the example: https://perchance.org/gqp3r7gugk

    On that one, you can see on Line 56 is where you can access the username of the person that sent the comment. My implementation is as follows:

    • We can specify a pattern that the users can follow so the code can parse the URL that is provided.
    • Since the nickname is only 50 characters long only, we can have them only specify the File ID of their avatar that is uploaded on the Perchance upload.
    • The file id is the random string before the file extension e.g. https://user-uploads.perchance.org/file/<file id>.<file extension> which is about 32 characters + 4-5 characters due to file extension and the dot (.webp, .png, .jpeg etc) so only 13 characters are left for the nickname (at the minimum).
    • The pattern is as follows: nickname|fileId.fileExtension so on the code we can split them to the file ID and the nickname.
    • On Line 61 is where we create an Image element and pass the file id to the URL formatting for accessing files in the upload.
    • On LIne 66, I just revamped the bubble format, so it is a little bit like the ai-character-chat message bubble.
    • We also prioritize the blue username, if available, over the provided nickname. So, if the person has a blue nickname, they can just pass through |fileID.fileExtension on the nickname.
    • RudBoOPBEnglish
      2•1 month ago

      Thank you VioneT it looks decent!

    • RudBoOPBEnglish
      1•30 days ago

      I am sorry it may be way too demanding, but is there a way to find where the style of original comment style?

      Because using F12 console panel or checking comment plugin code seems still messing up and missing lots of pieces.

      Functions like timestamps, reply quote, report and block, back to bottom, colorful ID visual, admin flair, delete…they are all crucial and I just want to add the avatar, not rebuilding a completely different one visually.

      Thanks 🥺

      • VioneTMEnglish
        2•30 days ago

        Sadly, the buttons for block, reply, report cannot be programmatically set up and you can’t ‘customize’ the actual plugin since it is essentially an embed.

        • RudBoOPBEnglish
          1•30 days ago

          then I think I’ll make a suggest for plugin update!

          • VioneTMEnglish
            1•30 days ago

            Best way to utilize the custom message bubble currently is to have an option to toggle between the views from custom to the original. I’ve updated the code on the example generator to show it.

  • VioneTMEnglish
    2•22 days ago

    Update: There is now a ‘pic’ on the comment settings (⚙) to add your own Avatar.

  • RudBoOPBEnglish
    1•30 days ago

    It seems if we want to preserve the original comment bubble and style (timestamp, block, reply…etc…) It’ll be something really not easy.