Fancybox now used for image handling

[phenomlab]

Seeing as fancybox is such a great and efficient library, I’ve decided to implement it here. Being super lightweight, there’s absolutely zero impact to the overall speed of the Sudonix platform, I’ve included it here. In fact, it’s a fork of the same extension I wrote for the Flarum project which is still very much in use

I’ve streamlined the code and the required functions. Images only are shown, and the function will ignore avatars and emojis etc as displaying these as part of an image carousel is pointless in my view.

Enjoy.

[DownPW]

@phenomlab

Great
Possible to have the code or a tutorial for implemented it on nodeBB ?

because it’s very practical when users put large images for example!

[phenomlab]

@DownPW Sure. Here goes…

1. In /admin/appearance/customise#custom-header add the below code

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.css"/>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.umd.js"></script>

2. In /admin/appearance/customise#custom-js

// Fancybox wrapper

if (top.location.pathname !== '/login') {
    $(window).on('action:ajaxify.end', function (data) {
        this.$('img').not('.forum-logo').each(function () {
            // Strip out the images contained inside blockquotes as this looks nasty :)
            $('blockquote img').remove();
            Fancybox.bind(
                'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]',
                {
                    groupAll: true,
                }
            );
        });
    });
}

[DownPW]

@phenomlab

• Possible to host the script locally?
• Possibility to have the images all the same size in the posts

For example here, I have two images of different sizes, they should appear identically in the posts like on sudonix ?

[phenomlab]

@DownPW possible, yes, 100%. You’d just need to download the files locally and host them on your own server. Finally, you obviously need to change the target path

The image size is simple CSS.

[DownPW]

@phenomlab

ha yes I have it:

@media (min-width: 1200px) {
.topic .posts .content .img-responsive {
    max-width: what you want %;
    width: auto;
    padding: 20px;
}
}