Hey! Today I want to share my newest plugin with you guys.
Its called makesmart-image-gallery.

Live Demo

https://nodebb.development.fail/topic/3/image-gallery-made-easy

How to use

Just add [[gallery]] on top of your image-collection, followed by the images which should be displayed in the slider:

[[gallery]]
![fun](https://media.tenor.com/images/11fc14bb1b8dc3efbf7aa496432601d4/tenor.gif)
![dance](https://media.tenor.com/images/82f7d090429ddc3e5ae33d7244d369c2/tenor.gif)
![happy](https://media.tenor.com/images/a12ac6302bccc01652b7f4b33a034777/tenor.gif)

This simple syntax creates a slim and nice image-gallery:

---

It uses Swiper as slider. You can look trough the examples to customize your slider if you want. To change behaviour edit static/lib/main.js.

require(["swiper"], function (Swiper) {
  var swiper = new Swiper(".makesmart-image-gallery", {
    autoHeight: true,
    loop: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
});

---

Installation

So far I dont know, how to use npm so this plugin is currently only available via GitHub.

1. Clone the repo with
   git clone https://github.com/me-cooper/nodebb-plugin-makesmart-gallery
2. Open the downloaded folder via console and link the folder with
   sudo npm link
3. Go into your nodebb installation folder and type
   npm link nodebb-plugin-makesmart-gallery
4. Activate the plugin via cli ./nodebb activate makesmart-gallery or via ACP

Installation via NPM

Here is the way @Spin0us installed it :

npm install git+https://github.com/me-cooper/nodebb-plugin-makesmart-gallery.git

Reply

It's my first plugin but I hope you enjoy it.

---

https://github.com/me-cooper/nodebb-plugin-makesmart-gallery

To-Do:

• Display Image-Slider in the composer preview as well

I still have a question. Everything works fine at the moment. Send data from the client to the server isn't a problem now.

But how can I emit a event to all connected clients serverside?

Something e.g

myPlugin.emit('plugins.publishMessage', {data: "Some data"}, function(err, result) {
			console.log(result);
	});

---

After one hour spending searching different topics and some code I found the solution.

Besides the custom clientside Sockets

const myPluginSockets = require.main.require('./src/socket.io/plugins');

you have to define the Server Sockets too

const myPluginSockets = require.main.require('./src/socket.io/plugins');
const serverSockets = require.main.require('./src/socket.io');

Now you can emit events from server side to the clients:

serverSockets.server.sockets.emit('messageReceive', data);

to receive the event clientside, you can use following in ur main.js file:

socket.on('messageReceive', function(data){
      console.log(data);
});

Client console output:
{msg: "my message"}

---

Maybe I'll write a little Tutorial on this because I am probably not the only one who does not understand it so easily.

@aleksei

Did you take a look at

https://github.com/NodeBB/NodeBB/wiki/Hooks#client-side-hooks

maybe something like

action:posts.loaded

to trigger your function?

@r4z3r You have to edit the template. Subcategory description is available in the template.

Like here in Nodebb Category: Plugins

{
         "cid":7,
         "name":"NodeBB Plugins",
         "description":"Discussion regarding NodeBB Plugin development.",
         "icon":"fa-wrench",
         "slug":"7/nodebb-plugins",
         "topic_count":1041,
         "order":4,
         "bgColor":"#333",
         "link":"",
         "class":"col-lg-4 col-md-6 col-xs-12",
         "numRecentReplies":1,
         "color":"#ffffff",
         "post_count":10510,
         "descriptionParsed":"<p>Discussion regarding NodeBB Plugin development.</p>\n",
         "subCategoriesPerPage":10,
         "minTags":0,
         "maxTags":5,
         "postQueue":1,
         "parentCid":0,
         "disabled":0,
         "isSection":0,
         "totalPostCount":12763,
         "totalTopicCount":1550,
         "tagWhitelist":[
            
         ],
         "unread-class":"",
         "children":[
            {
               "cid":17,
               "name":"Plugin Development",
               "description":"Have a question about building a plugin? Ask here",
               "icon":"fa-wrench",
               "bgColor":"#DC9656",
               "color":"#ffffff",
               "slug":"17/plugin-development",
               "parentCid":7,
               "topic_count":322,
               "post_count":1419,
               "disabled":0,
               "order":14,
               "link":"",
               "numRecentReplies":1,
               "class":"col-md-3 col-xs-6",
               "imageClass":"auto",
               "subCategoriesPerPage":10,
               "minTags":0,
               "maxTags":5,
               "postQueue":1,
               "isSection":0,
               "totalPostCount":1419,
               "totalTopicCount":322,
               "descriptionParsed":"Have a question about building a plugin? Ask here",
               "tagWhitelist":[
                  
               ],
               "unread-class":"",
               "parent":{
                  "cid":7,
                  "name":"NodeBB Plugins",
                  "description":"Discussion regarding NodeBB Plugin development.",
                  "icon":"fa-wrench",
                  "slug":"7/nodebb-plugins",
                  "topic_count":1041,
                  "order":4,
                  "bgColor":"#333",
                  "link":"",
                  "class":"col-lg-4 col-md-6 col-xs-12",
                  "numRecentReplies":1,
                  "color":"#ffffff",
                  "post_count":10510,
                  "descriptionParsed":"<p>Discussion regarding NodeBB Plugin development.</p>\n",
                  "subCategoriesPerPage":10,
                  "minTags":0,
                  "maxTags":5,
                  "postQueue":1,
                  "parentCid":0,
                  "disabled":0,
                  "isSection":0,
                  "totalPostCount":10510,
                  "totalTopicCount":1041,
                  "tagWhitelist":[
                     
                  ],
                  "unread-class":""
               },
               "posts":[
                  {
                     "pid":82335,
                     "timestamp":1617367530536,
                     "content":"<p dir=\"auto\"><a class=\"plugin-mentions-user plugin-mentions-a\" href=\"https://community.nodebb.org/uid/21579\">@ape</a> the standard way to get nodebb modules is require.main.require</p>\nconst Posts = require.main.require('./src/posts');\nPosts.getPostData(pid, callback)\n",
                     "timestampISO":"2021-04-02T12:45:30.536Z",
                     "user":{
                        "uid":3076,
                        "username":"PitaJ",
                        "userslug":"pitaj",
                        "picture":"https://i.imgur.com/Dj8Fe85.png",
                        "displayname":"PitaJ",
                        "icon:text":"P",
                        "icon:bgColor":"#e65100"
                     },
                     "index":4,
                     "cid":17,
                     "topic":{
                        "slug":"15505/script-to-display-all-posts-by-_id",
                        "title":"Script to display all posts by _id"
                     }
                  }
               ]
            },
            {
               "cid":18,
               "name":"Plugin Requests",
               "description":"Need a plugin developed? Ask here!",
               "icon":"fa-comments",
               "bgColor":"#BA8BAF",
               "color":"#ffffff",
               "slug":"18/plugin-requests",
               "parentCid":7,
               "topic_count":187,
               "post_count":834,
               "disabled":0,
               "order":18,
               "link":"",
               "numRecentReplies":1,
               "class":"col-md-3 col-xs-6",
               "imageClass":"auto",
               "subCategoriesPerPage":10,
               "minTags":0,
               "maxTags":5,
               "postQueue":1,
               "isSection":0,
               "totalPostCount":834,
               "totalTopicCount":187,
               "descriptionParsed":"Need a plugin developed? Ask here!",
               "tagWhitelist":[
                  
               ],
               "unread-class":"",
               "parent":{
                  "cid":7,
                  "name":"NodeBB Plugins",
                  "description":"Discussion regarding NodeBB Plugin development.",
                  "icon":"fa-wrench",
                  "slug":"7/nodebb-plugins",
                  "topic_count":1041,
                  "order":4,
                  "bgColor":"#333",
                  "link":"",
                  "class":"col-lg-4 col-md-6 col-xs-12",
                  "numRecentReplies":1,
                  "color":"#ffffff",
                  "post_count":10510,
                  "descriptionParsed":"<p>Discussion regarding NodeBB Plugin development.</p>\n",
                  "subCategoriesPerPage":10,
                  "minTags":0,
                  "maxTags":5,
                  "postQueue":1,
                  "parentCid":0,
                  "disabled":0,
                  "isSection":0,
                  "totalPostCount":10510,
                  "totalTopicCount":1041,
                  "tagWhitelist":[
                     
                  ],
                  "unread-class":""
               },
               "posts":[
                  {
                     "pid":82295,
                     "timestamp":1617018854196,
                     "content":"<p dir=\"auto\"><a class=\"plugin-mentions-user plugin-mentions-a\" href=\"https://community.nodebb.org/uid/2\">@julian</a> Hello it doesn't work</p>\n",
                     "timestampISO":"2021-03-29T11:54:14.196Z",
                     "user":{
                        "uid":20901,
                        "username":"Amir_4",
                        "userslug":"amir_4",
                        "picture":"https://lh3.googleusercontent.com/a-/AOh14Ggw_1MviR2iNN1v-cvJSjfUp7weiHzhphjKFVs6=s96-c",
                        "displayname":"Amir_4",
                        "icon:text":"A",
                        "icon:bgColor":"#33691e"
                     },
                     "index":3,
                     "cid":18,
                     "topic":{
                        "slug":"15479/steam-login",
                        "title":"Steam login"
                     }
                  }
               ]
            }
         ],
         "posts":[
            {
               "pid":82348,
               "timestamp":1617481846069,
               "content":"<p dir=\"auto\"><a class=\"plugin-mentions-user plugin-mentions-a\" href=\"https://community.nodebb.org/uid/1\">@baris</a> Ok that's a understandable point. 👍 I try to understand it. Thank you for your help. 👍</p>\n",
               "timestampISO":"2021-04-03T20:30:46.069Z",
               "user":{
                  "uid":19253,
                  "username":"dogs",
                  "userslug":"dogs",
                  "picture":"/assets/uploads/profile/19253-profileavatar-1609661611394.jpeg",
                  "displayname":"dogs",
                  "icon:text":"D",
                  "icon:bgColor":"#827717"
               },
               "index":6,
               "cid":7,
               "topic":{
                  "slug":"13368/get-user-data-from-a-custom-field",
                  "title":"Get user data from a custom field"
               }
            }
         ],
         "teaser":{
            "url":"/post/82348",
            "timestampISO":"2021-04-03T20:30:46.069Z",
            "pid":82348,
            "topic":{
               "slug":"13368/get-user-data-from-a-custom-field",
               "title":"Get user data from a custom field"
            }
         }
      },

You can edit the corresponding template.
Lets say its yourtheme/templates/categories.tpl

You can access these data inside your theme file like so:

{{{each categories}}}
    <!-- loops trough the categories array --> 

   {{{ each categories.children }}}
      <!-- loops trough the current categories children array -->

      <!-- prints out children category name -->
      <h3>{categories.children.name}</h3>
   {{{ end }}}

{{{end}}}

Result:

Here are my categories:

This is the rendered template:

---

You can view available and accessable data if you prepend api to the route.

Route:

https://community.nodebb.org/topic/15523/enable-subcategory-description-in-main-page

API Route with data:

https://community.nodebb.org/api/topic/15523/enable-subcategory-description-in-main-page

---

So in your case you have two fields available:

"description": "Its a short description here.",
"descriptionParsed": "<p dir=\"auto\">Its a short description here.</p>\n"

And you can use this in your template too. Here I use description not descriptionParsed:

{{{each categories}}}
    <!-- loops trough the categories array --> 

    {{{ each categories.children }}}
        <!-- loops trough the current categories children array -->

        <!-- prints out children category name -->
        <h3>{categories.children.name}</h3>

        <!-- Check if description for that subcat is available or not -->
        {{{ if categories.children.description}}}
            <p>{ categories.children.description }</p>
        {{{ end }}}


    {{{ end }}}

{{{end}}}

The second Subcat has no description. So there it is empty:

Hey @dunlix

You could fork the persona-theme and edit that specific template: templates/partials/menu.tpl located at theme-persona.

Snippet:

<li>
   <a component="header/profilelink/edit" href="{relative_path}/user/{user.userslug}/edit">
   <i class="fa fa-fw fa-edit"></i> <span>[[user:edit-profile]]</span>
   </a>
</li>
<li>
   <a component="header/profilelink/settings" href="{relative_path}/user/{user.userslug}/settings">
   <i class="fa fa-fw fa-gear"></i> <span>[[user:settings]]</span>
   </a>
</li>

If you do that, only your template would be replaced. The rest is inherited from the original theme an will stay the same.

---

If you looking for a quick & dirty solution, you could add custom JS to insert your discord link in that menu.

$(window).on('action:ajaxify.end', function(data) {
    
    // add discord link to menu dropdown

});

@ab Probably to your website.

@dunlix

$(document).ready(function() {

    var link_to_discord_server = "https://google.com";

    var element = '<li><a href="' + link_to_discord_server + '" class="user-status"><i class="fa fa-comment"></i> Discord</a></li>';

    if ($('ul#user-control-list li[role="presentation"]:first').length) {

        $(element).insertAfter('ul#user-control-list li[role="presentation"]:first');

    }


});

Result:

Whats the right way to use third party libraries?

I tried to do it descriped in the docs:

But it doenst work.

I want to use Swiper in my Theme:

I tried it with

"modules": {
   "swiper.js": "node_modules/swiper/swiper-bundle.min.js"
}

in client.js i used:

require(['swiper'], function (Swiper) {
	
	
	var mySwiper = new Swiper('.swiper-container', {
		// Optional parameters
		direction: 'vertical',
		loop: true,
	  
		// If we need pagination
		pagination: {
		  el: '.swiper-pagination',
		},
	  
		// Navigation arrows
		navigation: {
		  nextEl: '.swiper-button-next',
		  prevEl: '.swiper-button-prev',
		},
	  
		// And if we need scrollbar
		scrollbar: {
		  el: '.swiper-scrollbar',
		},
	  })

});

The Javascript from Swiper does not load.

Can you help me?

I also treid to import it directly via html

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

and I also copied the contents of:
https://unpkg.com/[email protected]/swiper-bundle.js

and createt a file unter /lib/swiper-bundle.min.js. Nothing worked for me. The JS is still not loading...

Looking forward to your answers!

---

I fixed it.

I am sorry. In my development I use grunt. But it seems that I doesnt load new libraries if installen. So I determinated the process Ctrl+C and restarted it using grunt. The librariers are loaded and the third party library works well now using:

"modules": {
   "swiper.js": "node_modules/swiper/swiper-bundle.min.js"
}

require(['swiper'], function (Swiper) {

   var mySwiper = new Swiper('.swiper-container', {
      ...
      ...
      ...
   })
}

@esha This should help you.

https://github.com/NodeBB/NodeBB/releases

Re: Execute Custom JS on Infinite Scroll

A little while ago I read this thread - today that strange white gave me an idea. How cool would it be to have an STL viewer right in the forum?

So I got down to work and programmed a small snippet quick & dirty. Everything can be reached via custom codes in the ACP. No plugin required.

Preview & Demo

---

https://nodebb.development.fail/topic/2/3d-rendered-stl-viewer-inside-topics

---

How does it work?

Your liked files will be automatically converted:

[My Model](https://example.com/assets/model.stl)

turns out with a little 3d cube attached. A click on this cube toggles the STL-Model preview.

As showed in the preview video, the STL-Viewer is also available in the composer preview.

Compatibility

This little snippet is also mobile responsive You can view the 3d models on mobile devices like a boss. Full responsive.

---

Code

Just at these snippets to custom HTML / CSS / Javascript via the ACP.

style.css

iframe.stl-model-viewer{
    min-width: 200px;
    max-width: 600px;
    width: 100%;

    min-height: 300px;
    max-height: 500px;
    height: 100%;

    border: 1px solid lightgray;
    border-radius: 10px;

    display: block;

    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;


    -webkit-box-shadow: 0px 13px 29px -15px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 13px 29px -15px rgba(0,0,0,0.75);
    box-shadow: 0px 13px 29px -15px rgba(0,0,0,0.75);


}

javascript.js

var re = /(?:\.([^.]+))?$/;
// NO BACKSLASH AT THE END!
var base_url = "https://your-nodebb-url.com";

$(window).on('action:posts.loaded action:ajaxify.end action:composer.preview', function(data) {
    
    $('a').each(function(){
      var href = $(this).attr("href");
      var ext = re.exec(href)[1];
      
      if(ext == "stl"){
        var indicator = Math.floor(Math.random() * 1000000) + 1 
        var currentModelUrl = $(this);
        if (href.substring(0, 8) !== 'https://'){
            href = base_url + href;      
        }
        
        
        var alreadyLinked = $(this).closest('p').find('a#open-stl-model').attr('data-url');
        
        if(!alreadyLinked){
            $(' <a style="margin-left: 5px; cursor: pointer;" title="3D-Modell anzeigen" id="open-stl-model" data-url="' + href + '" related="' + indicator + '"><i class="fa fa-cube"></i></a>').insertAfter(currentModelUrl);
            $(' <div id="' + indicator + '" style="display: none;" data-url="' + href + '"><iframe class="stl-model-viewer" src="https://www.viewstl.com/?embedded&url=' + href + '&color=white&bgcolor=transparent&shading=flat&rotation=yes&clean=yes&noborder=yes&orientation=top&edges=no"></iframe></div>').insertAfter( $(this).closest("p") );
        }

        
        
      }
    });
    
    
    
});

$(window).on('action:ajaxify.end action:composer.preview', function(data) {
    
    $('a#open-stl-model').click(function(){
        var thisLink = $(this);
        var related = thisLink.attr("related");
        $('div#' + related).slideToggle();
    })
    
})

Before running:

Change the base url to fit your nodebb path:

// NO BACKSLASH AT THE END!
var base_url = "https://your-nodebb-url.com";

In case of https://community.nodebb.org/ it would be:

// NO BACKSLASH AT THE END!
var base_url = "https://community.nodebb.org";

It is used to convert local links e.g /assets/uploads/top_pla_3_holes.stl to public links: https://community.nodebb.org/assets/uploads/top_pla_3_holes.stl

---

Adjustments

You can take a look at viewstl.com/embed to adjust your model viewer inside of javascript.js.

$(' <div id="' + indicator + '" style="display: none;" data-url="' + href + '"><iframe class="stl-model-viewer" src="https://www.viewstl.com/?embedded&url=' + href + '&color=white&bgcolor=transparent&shading=flat&rotation=yes&clean=yes&noborder=yes&orientation=top&edges=no"></iframe></div>').insertAfter( $(this).closest("p") );

There are thinks like:

• Shading
• Rotation
• Orientation
• Model Color
• Background Color

---

Limitations

The files which are linked in the topic have to be accessible by viewstl.com so private files wont work here I think.
Maybe you do have to enable cross site origin for viewstl.com as well.

---

This should be just a little playaround with some nodebb given features. As mentioned: it's a quick & dirty plugin which uses third party services. But there is also a standalone javascript plugin available: https://www.viewstl.com/plugin/ which you could use in a nodebb plugin.

See this topic more as a simple feature and as well as an inspiration for other plugins in this direction you could make.

Maybe its interesting for @Aleksei or someone else.

Thanks for reading.

@gotwf I'm not sure it's been weeks ago I wrote this.

Maybe I did not find this or something didn't work for me. I can't tell you...

Greets

@mohammed-fowzi https://github.com/NodeBB/NodeBB/wiki/Hooks/

@הערשלה

https://community.nodebb.org/topic/15548/iframely-plugin-doesn-t-work/1?_=1619591672463

It was discussed here a few days ago.

@anodetobb If you often use pictures in your forum I would recommend my lil plugin

https://community.nodebb.org/topic/15420

@varun-ganesh-d

Found this. Does it fix it?

https://community.nodebb.org/topic/15598/recent-card-old-version/5?_=1619297115978

@rajeev2189

ACP - Posts - Go to bottom:

Should do what you want.

@esha This should help you.

https://github.com/NodeBB/NodeBB/releases

@chez Yes I meant this.

But I didn't know you are on windows.
Don't know the commands for windows.

@ab Probably to your website.

@thalix Apparently there is no possibility via the write API.

Maybe this will help you:
https://github.com/NodeBB/NodeBB/blob/728ac5ff72dfd2300ebb80039d41b35013ffab4d/src/notifications.js