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
  • Please help me, I can't install nodebb

    Locked Solved Customisation nodebb
    7
    5 Votes
    7 Posts
    2k Views
    phenomlab
    Installation completed, verified, and tested. Correct installation methodology is below https://docs.nodebb.org/installing/os/ubuntu/
  • Spam spam spam

    Solved Configure nodebb
    6
    2 Votes
    6 Posts
    3k Views
    phenomlab
    @Panda said in Spam spam spam: ok, yes Ive seen the queue, it shows IP, but doesnt have a field for comments from registrant. It’s not designed for that. It merely serves as a gateway between posts appearing on your form or not. @Panda said in Spam spam spam: It would be better if nodebb had this plugin included in ACP list, as not only then do you know its approved and should work, but many people cant or dont want to use CLI on the server That’s a question for the NodeBB devs but in all honesty you can’t not use the CLI when installing nodebb so to be this isn’t a big deal.
  • Opening links in nodebb widget

    Solved Configure nodebb
    6
    4 Votes
    6 Posts
    3k Views
    phenomlab
    A more efficient way of including this would be to not over complicate it and leverage a standard iframe (providing the CSP headers of the remote site permit this) like below <iframe src="https://www.classmarker.com/online-test/start/?quiz=gag66aea7922f0a5" width="700" height="800"></iframe> This works first time every time on your site as intended.
  • 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
  • NodeBB inline videoplayer

    Solved Customisation nodebb
    12
    3 Votes
    12 Posts
    5k Views
    Panda
    @phenomlab YAY! It works Thanks so much
  • [NODEBB] Scroll Button

    Solved Customisation css javascript html scroll button
    7
    1
    0 Votes
    7 Posts
    3k Views
    phenomlab
    @downpw ooops. Forgot that. Thanks for adding.
  • NodeBB Discord Plugins

    Unsolved Customisation nodebb discord plugin
    7
    0 Votes
    7 Posts
    4k Views
    phenomlab
    @RiekMedia hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?
  • Customising NodeBB

    Locked Customisation nodebb
    3
    0 Votes
    3 Posts
    3k Views
    phenomlab
    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation