Skip to content

How to fix size of photos & videos NodeBB

Solved Customisation
7 3 2.8k 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
  • 2 Votes
    1 Posts
    648 Views
    No one has replied
  • Planned sunset of NTFY plugin

    Pinned Announcements push nodebb ntfy
    7
    1
    8 Votes
    7 Posts
    4k Views
    phenomlab
    I’ve noticed that I’m the only one subscribed to the push notifications on this site. If you were using NTFY previously, and have noticed that you’ve not had any alerts for a while, it’s because this feature has been disabled. You’ll now need to use the push notification to replace NTFY as mentioned in the first post.
  • Sidebar Widget is no longer on the side!

    Moved Solved General nodebb
    4
    2
    2 Votes
    4 Posts
    1k Views
    phenomlab
    @Panda said in Sidebar Widget is no longer on the side!: Ah, so sidebar wont work on mobile? Correct. If you review the docs on bootstrap, you’ll notice that it is designed on a grid system https://getbootstrap.com/docs/5.0/layout/grid/ What I mean by changing the category is moving it on here to general as you posted it in bugs, when it isn’t.
  • what does sound/mute button do?

    Solved Customisation nodebb
    20
    1
    9 Votes
    20 Posts
    6k Views
    phenomlab
    @crazycells Yeah, looking at the plugin itself, that’s a hard coded limit [image: 3d6dbc10-185b-4102-9470-0c2731a10750-image.png] I’ll probably remove that… eventually…
  • [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 templates

    Locked Chitchat themes templates nodebb
    12
    4 Votes
    12 Posts
    5k Views
    phenomlab
    Placing this here for reference https://sudonix.com/topic/216/nodebb-js-script-css-theme-switcher Further information and posts can be found at this link
  • 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 ?
  • 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.