Skip to content

How to fix size of photos & videos NodeBB

Solved Customisation
7 3 2.7k 1
  • wrote on last edited by
    #1

    hi
    how we can fix size of shared photos and videos ?

  • hi
    how we can fix size of shared photos and videos ?

    wrote on last edited by
    #2

    @cagatay Can you give me a bit more information? It’s not entirely clear what you are looking for from your post.

  • @cagatay Can you give me a bit more information? It’s not entirely clear what you are looking for from your post.

    wrote on last edited by
    #3

    @phenomlab my forum showed posts which has photos and youtube videos are very big size. i want to fix it for example 100x100px not more then it.

    this is mine
    473961b5-fd7b-4d9a-8d03-06579b53cb4c-image.png

    this is yours 🙂
    1c5ed719-f5e4-433a-b8bc-a48d320e61cb-image.png

  • @phenomlab my forum showed posts which has photos and youtube videos are very big size. i want to fix it for example 100x100px not more then it.

    this is mine
    473961b5-fd7b-4d9a-8d03-06579b53cb4c-image.png

    this is yours 🙂
    1c5ed719-f5e4-433a-b8bc-a48d320e61cb-image.png

    wrote on last edited by
    #4

    @cagatay @phenomlab Actually, this is something we are having a problem with.

    picture/photo is transformed, but, it does not look good either on mobile or on a computer. Usually, the scale is huge for the desktop view but good for the mobile view, or ok with the desktop view, but the quality of the photo is significantly dropped on mobile.

    How can you achieve good scaling with max quality for both mobile and desktop views?

  • @cagatay @phenomlab Actually, this is something we are having a problem with.

    picture/photo is transformed, but, it does not look good either on mobile or on a computer. Usually, the scale is huge for the desktop view but good for the mobile view, or ok with the desktop view, but the quality of the photo is significantly dropped on mobile.

    How can you achieve good scaling with max quality for both mobile and desktop views?

    wrote on last edited by
    #5

    @crazycells @cagatay I’d suggest something like the below - essentially using percentages, as they will scale much better

    @media (min-width: 1200px) {
    .topic .posts .content .img-responsive {
        max-width: 25%;
        width: auto;
        padding: 20px;
    }
    }
    
  • cagatay cagatay has marked this topic as solved on
  • @crazycells @cagatay I’d suggest something like the below - essentially using percentages, as they will scale much better

    @media (min-width: 1200px) {
    .topic .posts .content .img-responsive {
        max-width: 25%;
        width: auto;
        padding: 20px;
    }
    }
    
    wrote on last edited by
    #6

    @phenomlab said in How to fix size of photos & videos NodeBB:

    @crazycells @cagatay I’d suggest something like the below - essentially using percentages, as they will scale much better

    @media (min-width: 1200px) {
    .topic .posts .content .img-responsive {
        max-width: 25%;
        width: auto;
        padding: 20px;
    }
    }
    

    thanks 👍 this is a very smart solution…

  • @phenomlab said in How to fix size of photos & videos NodeBB:

    @crazycells @cagatay I’d suggest something like the below - essentially using percentages, as they will scale much better

    @media (min-width: 1200px) {
    .topic .posts .content .img-responsive {
        max-width: 25%;
        width: auto;
        padding: 20px;
    }
    }
    

    thanks 👍 this is a very smart solution…

    wrote on last edited by phenomlab
    #7

    @crazycells pleasure. Using percentages makes much more sense in this case. It’s the same argument with px vs pt vs em with fonts, margins, padding, etc., in the sense that em is generally preferred over px and pt

    https://stackoverflow.com/questions/609517/why-em-instead-of-px


Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • Bug in Nodebb route when clicking title

    Moved Configure nodebb
    3
    2 Votes
    3 Posts
    1k Views
    Panda
    Ah silly me, thanks for finding that!
  • Unable to change icon in NodeBB navigation

    Tips navigation nodebb
    1
    7
    1 Votes
    1 Posts
    896 Views
    No one has replied
  • who is read NodeBB

    Customisation read post nodebb
    6
    0 Votes
    6 Posts
    3k Views
    phenomlab
    @cagatay You should ask in the NodeBB forums. Perhaps reference this post https://discuss.flarum.org/d/23066-who-read
  • Forum Icons NodeBB

    Solved Customisation icons forum nodebb
    13
    0 Votes
    13 Posts
    5k Views
    phenomlab
    @cagatay That matches what I see [image: 4f0f858d-9812-42b1-9f61-ffb13d31dccd-image.png]
  • Rotating homepage icons, gifs?

    Solved Configure nodebb
    2
    3 Votes
    2 Posts
    1k Views
    phenomlab
    @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; }
  • [NodeBB] greeting message

    Solved Customisation css nodebb javascript
    2
    1
    3 Votes
    2 Posts
    2k Views
    phenomlab
    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    4k Views
    phenomlab
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.
  • [NodeBB] Creating new user to auto post content

    Solved Customisation
    3
    0 Votes
    3 Posts
    2k Views
    JAC
    @phenomlab many thanks Mark .