Skip to content

Plugin to show images in teasers

General
  • Hi,

    I’ve posted this on nodebb before but was hoping to get more response here if anyone is interested. 🙂

    I was searching for a solution to show images, especially custom emojis, in teasers. Right now custom emojis or images are shown like “xyz.png” or “:emoji1:”:

    Screenshot 2023-06-08 at 12-39-45 Kategorien.png

    Regular emojis from emoji packs are displayed, I guess because the browser interprets ASCII.

    I’ve then created a plugin using an intended solution found here. It should remove the img-tag from the configureStripTags Hook.

    Unfortunately there is no impact to the recent cards plugin or any other teasers. No regarding error or warning found in the nodebb log. This is part of the log when I run ./nodebb dev:

    verbose: [plugins] Loaded plugin: nodebb-plugin-teaser-image
    
    verbose: [plugins/fireHook] filter:teasers.configureStripTags
    

    Plugin is as basic as it can be:

    index.js:

    'use strict';
    
    var plugin = {};
    
    plugin.filterTeasersConfigureStripTags = async function (hookData) {
      // Check if the "img" tag is present in the tags array
      if (hookData.tags.includes('img')) {
        // Remove the "img" tag from the tags array
        hookData.tags = hookData.tags.filter(tag => tag !== 'img');
      }
    
      return hookData;
    };
    
    module.exports = plugin;
    

    package.json:

    {
      "name": "nodebb-plugin-teaser-image",
      "version": "1.0.0",
      "description": "NodeBB Plugin to show images in teasers",
      "main": "index.js",
      "dependencies": {},
      "nbbpm": {
        "compatibility": "^1.0.0 || ^2.0.0 || ^3.0.0"
      }
    }
    
    

    plugin.json:

    {
      "id": "nodebb-plugin-teaser-image",
      "name": "Show images in Teasers",
      "description": "A NodeBB plugin to show images in teasers",
      "version": "1.0.0",
      "hooks": [
        {
          "hook": "filter:teasers.configureStripTags",
          "method": "filterTeasersConfigureStripTags"
        }
      ]
    }
    
    

    Anything I have overlooked or any more information I could add? From my understanding, this should already work. 🤔 Help is appreciated. I don’t have a github link yet, If anyone wants to try you can just create a folder in node_modules and add the above files.

  • @dave1904 there’s nothing wrong with the plugin you’ve written, but seeing as it’s a server side hook, have you changed the plugin load order so that yours is the last to load?

    It could well be that your plugin is being overridden by another.

  • @phenomlab said in Plugin to show images in teasers:

    have you changed the plugin load order so that yours is the last to load?

    Yes I did, the plugin is last in the plugin order list.

  • @dave1904 have you considered doing this client side? You could fairly easily manipulate the element in question using js.

    Admittedly, anyone using your site without script access won’t be able to leverage this, but it’s an acceptable solution.

  • Thank you @phenomlab

    Client side development is something I would consider but I don’t like it when things don’t work and especially when I don’t know why they don’t work. Do you maybe have any idea where I could have a look for more troubleshooting? I see that the hook is fired but can I see anywhere what the hook is doing in detail?

  • @dave1904 I’d start by adding a console.log function to hookData so you can see what is being returned

    return hookData;
    console.log(hookData):
    

  • 4 Votes
    4 Posts
    171 Views

    @Norrad Are you looking for anything in particular? I only ask because Sudonix uses a number of custom functions which I wrote, but all are available on GitHub and fully supported here.

  • 1 Votes
    4 Posts
    174 Views

    @Vijay-Kumavat-0 I think you’d be better off customising the plugin above to be honest. It seems like you’d be reinventing the wheel otherwise.

    I’d modify

    /nodebb/node_modules/nodebb-rewards-essentials/lib/conditions.js
    /nodebb/node_modules/nodebb-rewards-essentials/lib/rewards.js

    These seem to be the two files that control what is in the dropdown lists.

  • 2 Votes
    4 Posts
    187 Views

    @Panda said in Sidebar Widget is no longer on the side!:

    Ah, so sidebar wont work on mobile?

    Correct. If you review the docs on bootstrap, you’ll notice that it is designed on a grid system

    https://getbootstrap.com/docs/5.0/layout/grid/

    What I mean by changing the category is moving it on here to general as you posted it in bugs, when it isn’t.

  • Composer options on nodebb

    Solved Configure
    8
    3 Votes
    8 Posts
    303 Views

    @Panda You should be able to expose the CSS for these using F12 to get into console

    3591518c-e3a3-4ada-a43c-6b32a5e0359c-image.png

    a2b8ed46-4157-4ff2-85f0-576543380107-image.png

    That should then expose the element once selected

    89d9c545-a47a-40d1-98f4-80cf3b958e8f-image.png

    Here’s the below CSS you need based on the screenshot provided.

    .composer .formatting-bar .formatting-group li[data-format="picture-o"], .composer .formatting-bar .formatting-group li[data-format="spoiler"] { display: none; }
  • 12 Votes
    47 Posts
    2k Views

    @dave1904 just coming back to this thread as @DownPW and I both experienced issues with other plugins today, and the fix was to use the plugin ordering in the ACP and move the Harmony theme to the very top so it comes before everything else in terms of other plugins.

    It might be worth at least trying this to see if it gives you a result rather than the previous bulldozer approach. Thinking about it, the previous fix I proposed is along the same lines and disabling plugins does in fact change the order when they are enabled again, so this is definitely worth a try.

    Let me know how you get on.

  • 11 Votes
    14 Posts
    613 Views

    @dave1904 excellent news. Thanks for the feedback

  • 0 Votes
    7 Posts
    416 Views

    @DownPW not sure what you mean. Can you elaborate ?

  • Nodebb Hashtag plugin

    Solved General
    15
    1 Votes
    15 Posts
    735 Views

    @jac Great ! I’ll close this off.