• 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.


  • @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!


  • @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>
    
    1. 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,
                    }
                );
            });
        });
    }
    

  • @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 ?

    638a003a-c839-4890-bfe5-bf79a2b36403-image.png


  • @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.


  • @phenomlab

    ha yes I have it:

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


Discover More