CSS code customization for the link preview plugin

[crazycells]

Hi @phenomlab ,

I am working on CSS codes to customize the link-preview plugin for some time, but I was unsuccessful so, I wanted to consult you in case I am missing an important line…

Unfortunately, normal previews of this plugin are too big for our taste, just like how iframely used to be…

https://sudonix.org/post/4083

I ended up something like this:

.post-container .content .card {
    display: contents !important;  
}
 
.link-preview {
    
    .card-img-top {
        height:120px !important;
        width: auto !important;
        overflow: hidden !important;        
        float: left !important;
        padding: 0 5px 0 0 !important;      
    }
    
    .card-body {
        padding: 1px 1px 1px 1px !important;
    }
    
    .card-footer {
        position: relative !important;    
    }
}

But this is nowhere near close to what I was aiming…

This is how it used to be with iframely and what we are aiming:

This is how ugly it looks right now

I hope you can help with this transformation
Thanks,

[phenomlab]

@crazycells technically possible, yes - I can get somewhere near the desired layout as below

However, this isn’t great from the CSS perspective as it’s something of a hack, and will not look good on mobile devices. Here’s the CSS for that if you want to use it.

.post-container .content .card {
    display: contents !important;  
}
.link-preview .card-title {
    margin-left: -238px;
    float: left;
}
.link-preview .card-img-top {
    height: 120px !important;
    width: auto !important;
    overflow: hidden !important;
    float: left !important;
    padding: 0 5px 0 0 !important;
    margin-top: 35px;
}
.link-preview .card-text {
    margin-top: 20px;
    padding-left: 15px;
}
.link-preview .card-footer {
    position: relative !important;
    margin-top: 70px;
}
.link-preview .card-body {
    padding: 1px 1px 1px 1px !important;
}
.link-preview .card-text {
    margin-top: 35px;
    padding-left: 15px;
}
 

The real issue with nodebb-plugin-link-preview is that it has no flexibility in terms of HTML layout meaning you have to get clever with CSS (and even then, it’s not clever at all).

Using my OGProxy function, it would look like this by default

[manual] Build a Night Mode for Harmony

Hi everybody, On this tutorial I want to show you, how to create a Night Mode on you're forum, to do this we need use a HTML widget in the Brand Head...(more)

NodeBB Community

However, because you have control over the HTML, you can simply rearrange it to suit your own needs.

[crazycells]

@phenomlab does OGProxy show the pdf previews as well?

[phenomlab]

@crazycells said in CSS code customization for the link preview plugin:

does OGProxy show the pdf previews as well?

Not yet, but it could with a bit of additional code.

[kadir ay 0]

How can I remove the white space at the top? I set html and body to black in CSS, but it didn’t work. Is there another solution?

[phenomlab]

@kadir-ay-0 marking as resolved based on

[manual] Build a Night Mode for Harmony

That looks like it's part of your phones UI, so setting css on html or body won't affect it. You can try setting in the ACP custom header section an...(more)

NodeBB Community

Please do not raise requests in two places - here and the NodeBB forums. All this does is create unnecessary load for both parties.