Setup OGProxy for use in NodeBB

[DownPW]

No problem dude, we are beta testers finally, we go back what we can and we propose the corrections if we find them

[phenomlab]

@DownPW thanks. Things look to be pretty stable to me. Haven’t heard from @dave1904 yet though

[DownPW]

yes it seems to be good.
It will need to watch perf on production with lot of link but It’s very cool

Question :

I imagine that we can change the 404 error image in the image directory of the plugin?

But are there any restrictions?
Oblige to use an image in webp or other formats are accepted?

[phenomlab]

@DownPW I don’t think you’ll see a performance hit as the rendering is handled client side

In terms of the 404 image, you can have whatever you want - you just need to replace the image itself, and then change the reference to it in the JS function - the path should be /images/404.webp.

As a side note, it might be worth setting a different file name, as nginx will cache it and you’ll see that same image every time (and not the new one) unless you restart the nginx service.

[DownPW]

Ok that’s very clear. thank you for all this my friend

[DownPW]

test

Université de tous les savoirs | Canal U

Présentation L’Université de tous les savoirs 2000-2010L’Université de tous les savoirs a été créée en l’an 2000 pour marquer le passage au XXIe siècl...(more)

Canal-U

[DownPW]

Above a little problem with big text.
Just truncate the text…

[phenomlab]

@DownPW fixed. I’m not going to do this with CSS as all this will do is limit the amount of characters returned in the UI - the amount of data being returned would still be the same, and that is horribly inefficient. However, in my defence the entire objective of a summary is exactly that - not the entire post (as is the case here), but an extract.

Below are the modifications

'<p class="card-text">' + truncateDescription(description, 150) + '</p>' +

And a helper function that will strip the returned data down to 150 characters (you can change this if you wish in the above line.

// Helper function to truncate the description with ellipsis if it exceeds the specified limit
function truncateDescription(description, limit) {
    if (description.length > limit) {
        return description.substring(0, limit) + '...';
    }
    return description;
}

Replacement code is below

ogproxy/function.js at main · phenomlab/ogproxy

Open Graph Proxy. Contribute to phenomlab/ogproxy development by creating an account on GitHub.

GitHub

[DownPW]

Definitively better

[DownPW]

Edit

Seems to be fixed on desktops and not on Smartphone on chat?

[phenomlab]

@DownPW odd. Can you send me the link you are the issue with in PM?

[DownPW]

See above for the link named Canal-U

[phenomlab]

@DownPW I just pasted that same link into the chat window and sent it to you. I can’t replicate it, and to be honest, it’s not a CSS problem because it’s executed at jQuery level in the function itself.

EDIT - for clarity, I checked your dev site, and it looks as though it’s still using the old code! You need up update to the newest.

[phenomlab]

Hi All,

There’s some updated code in functions.js that addresses the below bugs

Updated to use raw “title” attribute first if it is detected in the HTML stream. Some sites do not use OG properties and therefore, nothing is returned. New functions ensure that the full page title is selected - for example “My Website | Users” rather than just “My Website”

ogproxy/function.js at main · phenomlab/ogproxy

Open Graph Proxy. Contribute to phenomlab/ogproxy development by creating an account on GitHub.

GitHub

You will need to also restart the OGProxy service to clear the cache.

[DownPW]

test

Color Library - Coolors

Explore our collection of more than 800 colors organized by shade.

Coolors.co

[phenomlab]

@DownPW I was intrigued by this, so set about seeing why the image wasn’t rendered

After some review of the HTML stream, it appears that this specific site (along with some others I’ve seen) use Cloudflare’s Hotlink protection

Hotlinking: What Is It & How Can You Prevent It?

Learn what hotlinking is and how to prevent it on your website to save your bandwidth usage and get the traffic you deserve.

blog.hubspot.com

And the curl result

The end result is one that leaves us with a lack of cosmetic appeal, so I’ve added a function to function.js that will detect this, and if the image cannot be rendered (because of an error), it’ll return the tempImage which is the 404.

// Test to see if image is broken in the preview card. This might be the resul of hotlinking protection, so the image isn't
// rendered as a result. If this is the case, we replace it with the tempImage so keep things looking nice.
            $(document).ready(function() {
                    $('#card-image img').on('error', function() {
                        // Image failed to load
                        // Add your logic here to handle the broken image
                        console.log("OGProxy: Original image " + imageUrl + " appears to be missing. Replacing with " + tempImage);
                        $(this).attr('src', tempImage); // Replace with a placeholder image
                    });
                });

Updated full code can be found here

ogproxy/function.js at main · phenomlab/ogproxy

Open Graph Proxy. Contribute to phenomlab/ogproxy development by creating an account on GitHub.

GitHub

[crazycells]

just testing the preview… can be deleted any time…

Yeşilkart Forum

Yeşilkart Forum Sitesine Hoşgeldiniz! Yeşilkart Forum, Amerika'daki Türklerin Bilgi ve Deneyim Paylaşma Noktası'dır. Yeşilkart (Greencard), Amerika'da...(more)

Yeşilkart Forum

this is og-image link:

https://yesilkartforum.com/forum/assets/uploads/system/og-image.png

[phenomlab]

@crazycells You’re using Hotlink Protection I think?

I see this in the console log

OGProxy: Broken image https://yesilkartforum.com/forum/assets/uploads/system/og-image.png detected. Replacing with https://proxy.sudonix.org/images/404_3.webp

[crazycells]

@phenomlab hmm, I was not aware that we are using any such feature. I have to talk to our developers. But, it is still interesting to me that twitter does not have any problem, but facebook does.

Additionally, when I click the direct link here, it does not show me anything. however, if you copy and paste it as URL to your browser , it shows our logo…

[phenomlab]

@crazycells Yes, exactly what I am seeing during testing for some sites.

Have a look at this

The website looks like something out of the 90’s, but it works

Loading...

Please wait while the description loads.

Loading...