Issues with Imgur images in Fancybox chat module

[DownPW]

@phenomlab said in [SOLVED] Fancybox doesn’t work in chat:

Do you have the script running in your test environment? I need to see some working examples.

yes

[phenomlab]

@DownPW Right, this is interesting. On your forum, I have adjusted the code so it looks like the below (this is a snippet of the overall function, so do not copy it)

        if (isFound) {
            this.$('img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                newHref = $(this).attr("src");
                $(this).wrap("<a class='fancybox' href='" + newHref + "'/>");
                $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
                data.preventDefault();
                // Strip out the images contained inside blockquotes as this looks nasty :)
                $('blockquote img').remove();
            });
            pattern = /assets/;
            exists = pattern.test(newHref);
            if (exists) {
                console.log(newHref + " is a local resource and not subject to Fancybox");
                return false;
                // Do not trigger fancybox
            }
            else {
            Fancybox.bind(
                'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]', {
                    groupAll: true,
                }
            );
            }
        }

Essentially, we are performing unit tests here in the sense that we first check the newly wrapped a href and see if it contains /assets/ - if it does, we issue return false; which basically means “don’t do anything” - if there isn’t a match, we proceed to issue fancybox.bind to other URL’s in the loop.

Still working through this, but the behaviour is not what I expected. Are you using the imgur plugin?

[DownPW]

@phenomlab

On my production yes but I just realized that it was not installed on the dev instance.
I just did it now

[phenomlab]

@DownPW I finally got to the bottom of this - see

https://community.nodebb.org/topic/748/nodebb-plugin-imgur-imgur-plugin/89

As you have the Imgur plugin enabled, this will override fancybox so there isn’t much I can do to circumvent this sadly.

See this particular post from @julian

[DownPW]

yep @phenomlab but in fact, the imgur external link image open correctly with Fancybox on topics without problem

Actually, this problem is just on the chat. It’s incomprehensible by the way, why it would be ok in the topics and not in the chat ? I confess I don’t understand well.

But if there are no other solutions, I would enlarge the images to 100% only in the chat via CSS, that’s already what I did on V2

[phenomlab]

@DownPW Yes, I can actually replicate this very same experience. No matter what code I try, I can’t override this behaviour, which is just bizarre as it works fine in posts!!

[DownPW]

yes, that’s for sure ^^
But I don’t want to do without this plugin so I’ll do with it. I don’t want to host all the images on the forum

thank you for trying something!

[phenomlab]

@DownPW I like a challenge, so I’ll keep trying. It’s just really odd to me.

[DownPW]

@phenomlab

While waiting for a solution (or not), here is my code to determine the size of images or gifs in the chat and in the posts

It seems to work as it should.

If you see errors Mark, do not hesitate to tell me or improve

/* Appearance of images in posts */
.topic .posts .content a > img.img-fluid.img-markdown, [component="post/content"] .img-fluid {
  padding: 8px;
  margin: 8px 0;
  border: 1px solid var(--bs-border-color);
  max-width: 80%;
}

/* Appearance of "GIF" images in posts */
.topic .posts .content a > img.img-fluid.img-markdown[src$="gif"], [component="post/content"] .img-fluid[src$="gif"] {
  padding: 8px;
  margin: 8px 0;
  border: 1px solid var(--bs-border-color);
  max-width: 60%;
}

/* Appearance of images in Chat */
.chat .message .content a > img.img-fluid.img-markdown, [component="chat/message"] .img-fluid {
  padding: 8px;
  margin: 8px 0;
  border: 1px solid var(--bs-border-color);
  max-width: 80%;
}
/* Appearance of "GIF" images in Chat */
.chat .message .content a > img.img-fluid.img-markdown[src$="gif"], [component="chat/message"] .img-fluid[src$="gif"] {
  padding: 8px;
  margin: 8px 0;
  border: 1px solid var(--bs-border-color);
  max-width: 60%;
}

[phenomlab]

@DownPW looks good to me.