Setup OGProxy for use in NodeBB

[phenomlab]

@DownPW what’s the bug? CSS?

[DownPW]

[phenomlab]

@DownPW no, that’s URL encoding and supposed to look like that. If it were truly an issue, nothing would render.

[DownPW]

I don’t know my friend.

[phenomlab]

@DownPW I’ll check on your Dev server

[DownPW]

resolve my problem with add this to my custom CSS for rendering in the chat on smartphone :

@media (max-width: 1010px) {
    [component="chat/message"] .card.card-preview {
    margin: 20px 0 20px 0;
    width: 100%;
    }
}

And I add this custom css code for fix a bug (for me ) when you do a mouse hover on the image and the edges are not rounded. This bug is seen much more on clear themes :

.card-image-container {
    max-width: 500px;
    max-height: 250px;
    overflow: hidden;
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
}

Edit:

And same things for rendering in posts on smartphone:

@media (max-width: 1010px) {
    .card.card-preview {
    margin: 20px 0 20px 0;
    width: 100%;
    }
}

[phenomlab]

@DownPW Good point ref the missing radius on image hover - I’ve updated the original post. Good spot !

I’d actually go one step further and change the width to 100% otherwise on the light themes you land up with an odd looking space between the card frame and the image

.card-image-container {
    max-width: 100%;
    max-height: 250px;
    overflow: hidden;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

[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

https://www.canal-u.tv/chaines/utls

[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

https://github.com/phenomlab/ogproxy/blob/main/function.js

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