Skip to content
Sudonix

CSS code customization for the link preview plugin

Solved Customisation
  • crazycellsundefined

    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:
    Screenshot 2024-04-02 at 22.04.41.png

    This is how ugly it looks right now 😄

    Screenshot 2024-04-02 at 22.02.51.png

    I hope you can help with this transformation 😄
    Thanks,

    1
  • phenomlabundefined

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

    7b646096-5c21-44a1-b283-54d6f94e579b-image.png

    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

    https://community.nodebb.org/topic/17109/manual-build-a-night-mode-for-harmony

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

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    👍
    1
  • phenomlabundefined phenomlab has marked this topic as solved on
  • crazycellsundefined

    @phenomlab does OGProxy show the pdf previews as well?

    0
  • phenomlabundefined

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

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    1

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

  • phenomlabundefined

    CSS border gradients

    Blog
    10
    2 Votes
    10 Posts
    192 Views
    cagatayundefined

    ah f5 need 🙂

  • dave1904undefined

    How to style tool tip of nodebb-plugin-user-level

    Solved Customisation
    4
    5 Votes
    4 Posts
    496 Views
    phenomlabundefined

    @DownPW thanks. I forgot about that.

  • Pandaundefined

    Upgrade issues

    Solved Configure
    2
    2 Votes
    2 Posts
    137 Views
    DownPWundefined

    Use this code

    git fetch # Grab the latest code from the NodeBB repository git checkout v3.x git reset --hard origin/v3.x

    And you will have the latest version without specifying it

    https://docs.nodebb.org/configuring/upgrade/

  • Pandaundefined

    SEO and Nodebb

    Performance
    2
    2 Votes
    2 Posts
    147 Views
    phenomlabundefined

    @Panda It’s the best it’s ever been to be honest. I’ve used a myriad of systems in the past - most notably, WordPress, and then Flarum (which for SEO, was absolutely dire - they never even had SEO out of the box, and relied on a third party extension to do it), and NodeBB easily fares the best - see below example

    https://www.google.com/search?q=site%3Asudonix.org&oq=site%3Asudonix.org&aqs=chrome..69i57j69i60j69i58j69i60l2.9039j0j3&sourceid=chrome&ie=UTF-8#ip=1

    However, this was not without significant effort on my part once I’d migrated from COM to ORG - see below posts

    https://community.nodebb.org/topic/17286/google-crawl-error-after-site-migration/17?_=1688461250365

    And also

    https://support.google.com/webmasters/thread/221027803?hl=en&msgid=221464164

    It was painful to say the least - as it turns out, there was an issue in NodeBB core that prevented spiders from getting to content, which as far as I understand, is now fixed. SEO in itself is a dark art - a black box that nobody really fully understands, and it’s essentially going to boil down to one thing - “content”.

    Google’s algorithm for indexing has also changed dramatically over the years. They only now crawl content that has value, so if it believes that your site has nothing to offer, it will simply skip it.

  • Pandaundefined

    NodeBB upgrade now cant post

    Solved Bugs
    5
    2 Votes
    5 Posts
    191 Views
    phenomlabundefined

    @Panda yes, for some reason, that is the case. If you need an urgent response, it’s probably better to post here because of the time difference.

  • cagatayundefined

    Link Not Working

    Solved Customisation
    5
    1 Votes
    5 Posts
    180 Views
    phenomlabundefined

    @cagatay Good question, but one that’s likely best answered by the devs themselves. Could easily be done with a simple jQuery regex but that would really just be painting over rotten wood.

  • Pandaundefined

    Rotating homepage icons, gifs?

    Solved Configure
    2
    3 Votes
    2 Posts
    195 Views
    phenomlabundefined

    @eveh It’s not a GIF, no. It’s actually a webp file so made much smaller, and uses keyframes to control the rotation on hover. You can easily make your own though 🙂

    The CSS for that is as below

    @keyframes rotate180 { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } @keyframes rotate0 { from { transform: rotate(180deg); } to { transform: rotate(0deg); } }

    Your milage may vary on the CSS below, as it’s custom for Sudonix, but this is the class that is used to control the rotate

    .header .forum-logo, img.forum-logo.head { max-height: 50px; width: auto; height: 30px; margin-top: 9px; max-width: 150px; min-width: 32px; display: inline-block; animation-name: rotate180, rotate0; animation-duration: 1000ms; animation-delay: 0s, 1000ms; animation-iteration-count: 1; animation-timing-function: linear; transition: transform 1000ms ease-in-out; }
  • DownPWundefined

    plugin open link IMgur images

    Customisation
    7
    0 Votes
    7 Posts
    415 Views
    phenomlabundefined

    @DownPW not sure what you mean. Can you elaborate ?