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.

---

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

maybe something like

action:posts.loaded

to trigger your function?

@鄭宇佋 NodeBB is my favorite because with this core I think I can create everything I want it to be.

Endless possibilities

I use NodeBB because I don't want "just a forum" I want to built something unique in some ways. And therefore NodeBB is my choose.

@ab Probably to your website.

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

});

Whats the right way to use third party libraries?

I tried to do it descriped in the docs:
https://docs.nodebb.org/development/plugins/libraries/

But it doenst work.

I want to use Swiper in my Theme:
https://swiperjs.com/get-started/

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', {
      ...
      ...
      ...
   })
}

@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:

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.

@esha This should help you.

Hey! I called and opened the composer via GET-Params:

https://nodebb.development.fail/recent?discord=question&tags=javascript,jquery,get,request

URL is valid, so feel free to test it
Open Composer

---

• ?discord=question defines category questions
• &tags=javascript,jquery,get,request tags added to composer as well -> javascript, jquery, get, request

---

So: composer is opening automatically if:

• ?discord=question is available. Also the category Questions is selected automatically. And tag list:
• javascript,jquery,get,request should also be added automatically.

---

But theres ohne thing: I dont have a question actually.

Bye Bye

Prototype and Test-Code:

$(window).on('action:ajaxify.end', function(event, data) {

    var urlParams = new URLSearchParams(window.location.search); //get all parameters
    var discord = urlParams.get('discord');
    
    var tags = [];
    
    if(tags = urlParams.get('tags')){
        tags = urlParams.get('tags').split(",");
    }
    
    
    
    if(discord){
        var cid;
        
        if(discord == "question"){
            cid = 1;
            app.newTopic(cid, tags);
        }
        
        if(discord == "tutorial"){
            cid = 2;
            app.newTopic(cid, tags);
        }
        
        if(discord == "showroom"){
            cid = 4;
            app.newTopic(cid, tags);
        }
        
        if(discord == "talk"){
            cid = 3;
            app.newTopic(cid, tags);
        }
    }
	
});

To open composer use:

• app.newTopic();

To define category or tags use params of function:

• app.newTopic(cid, tags);
  ->
  app.newTopic(1, ["javascript", "jquery", "get", "request"]);

You can also use this snippet to add additional buttons to create new topic on specific category or tags.

Bye

@aleksei I read your topic: https://community.nodebb.org/topic/15252/execute-custom-js-on-infinite-scroll and saw you're dealing with C4D-Files.

Hello Guys!

I was trying to get Apache2 to work as a proxy. Finally I did it but I have had a few issues:

• first It wasn't reachable at all
• then Images just fetched still in HTTP
• suddenly I had problems with WebSockets, they didn't work
• with this fixed: login wasn't working anymore
• with this fixed I wasn't able to use https:// in my config.json
• .. and so on and so an

I struggled about 3 hours to get it work. Now my NodeBB-instance is running under the hood of Apache2 - delivered by a subdomain. Everything is working. So I just want to share my Apache2 configuration so that you do not have to struggle with the same things.

---

Apache2 configuration:

<IfModule mod_proxy.c>
        ProxyPass /.well-known/acme-challenge !
</IfModule>

Alias /.well-known/acme-challenge /home/dogs/www/.well-known/acme-challenge

ProxyPass / http://127.0.0.1:4567/
ProxyPassReverse / http://127.0.0.1:4567/

# Required for websockets
RewriteEngine on
RewriteCond %{HTTP:UPGRADE} ^WebSocket$ [NC]
RewriteCond %{HTTP:CONNECTION} ^Upgrade$ [NC]
RewriteRule .* ws://localhost:4567%{REQUEST_URI} [P]

# Required to tell its external port
RequestHeader set X-Forwarded-Port "443"
RequestHeader set X-Forwarded-Proto "https"

---

Maybe you can remove

Alias /.well-known/acme-challenge /home/dogs/www/.well-known/acme-challenge or change it to another path!

For SSL-Encryption you can simply use certbot or whatever. Apache2 is still fully customizable and only works as a reverse proxy.

Bye bye

Nice

@nadiaeugenia Did you fork the quickstart Theme?

Then you have to check the plugin.json.

In quickstart theme it is currently:

"scripts": [
		"lib/client.js",
		"../nodebb-theme-persona/lib/persona.js",
		"../nodebb-theme-persona/lib/modules/nprogress.js",
		"../nodebb-theme-persona/lib/modules/autohidingnavbar.min.js",
		"../nodebb-theme-persona/lib/modules/quickreply.js"
	],

you have to edit the path from /lib/ to /public/.

Also the file nprogress.js isn't available anymore.

Take a look at https://github.com/NodeBB/nodebb-theme-persona/tree/master/public

maybe @baris could update the quickstart theme repo?

@nadiaEugenia your plugin.json should look like this to get sidebar working:

"scripts": [
		"lib/client.js",
		"../nodebb-theme-persona/public/persona.js",
		"../nodebb-theme-persona/public/modules/autohidingnavbar.min.js",
		"../nodebb-theme-persona/public/modules/quickreply.js"
	],

I have had the same issue but fixed it yesterday.
Don't forget to add your custom scripts eg "lib/client.js"

@twissell

To close a topic use topic tools:

What plugin(s) should I use in order to add custom fileds (Sex, Date of Birth etc.) to user registration form?

Thats a really good question. I need that to. Is there anything available? Couldnt get https://github.com/NicolasSiver/nodebb-plugin-ns-custom-fields to work... Would be perfect.

@pitaj Thank you for your fast response.

Could you give mit a litte example how to emit and receive messages? I'm new to javascript and also new to nodebb. It is hard for me to follow the programming language especially in plugin dev.

I have this in socket.io documentation

socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
  });

something comeplete different .... than

pluginSockets.calendar = {};
pluginSockets.calendar.canPostEvent = async ({ uid }, { pid, tid, cid, isMain }) => {
  const neither = {
    canPost: false,
    canPostMandatory: false,
  };

  if (!isMain && await getSetting('mainPostOnly')) {
    return neither;
  }

  if (!(pid || tid || cid)) {
    return neither;
  }

  let promises;

  if (pid) {
    promises = [
      can.posts(privilegeNames.canPost, pid, uid),
      can.posts(privilegeNames.canMandatoryPost, pid, uid),
    ];
  }
  if (tid) {
    promises = [
      can.topics(privilegeNames.canPost, tid, uid),
      can.topics(privilegeNames.canMandatoryPost, tid, uid),
    ];
  }
  if (cid) {
    promises = [
      can.categories(privilegeNames.canPost, cid, uid),
      can.categories(privilegeNames.canMandatoryPost, cid, uid),
    ];
  }

  const [canPost, canPostMandatory] = await Promise.all(promises);
  return {
    canPost,
    canPostMandatory,
  };
};

Could you give me a little introduction? I'm sorry - I am a noob but I really want to learn....

---

I got it

1. Import custom Sockets via

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

2. Define a test socket

chatSockets.sendMessage = function(socket, data, callback) {
	console.log("Working?");
	console.log(data);
	callback(null, "It worked!");
}

3. Go into Browser and Emit an Event

socket.emit('plugins.sendMessage', {data: "Some data"}, function(err, result) {
	alert(result);
});

---

U can use this snipped in your main.js client script file:

socket.emit('plugins.sendMessage', {data: "Some data"}, function(err, result) {
			alert(result);
	});

@onur-baran Should be https://github.com/NodeBB/nodebb-theme-persona

I need it to know too?

I ask it here because it's the first google page. It would be helpful if you find the answer in a top rated topic.

I try to get the user object via DiscordId from a Plugin

I tried following but is does not work:

var user = db.getObjectField('DiscordId', message.author.id, function(err, data){
   console.log(err);
   console.log(data);
});

Output:

null
null