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
  • NodeBB recent cards customisation

    Solved Customisation nodebb recent cards
    3
    1
    2 Votes
    3 Posts
    1k Views
    JAC
    @phenomlab thank you very much for the assistance Mark, massively appreciated as always. The great thing about this is it’s all documented for other NodeBB users that come looking for solutions . Looks far better .
  • Fixed background to nodebb forum

    Solved Configure nodebb
    25
    4 Votes
    25 Posts
    10k Views
    phenomlab
    @Panda said in Fixed background to nodebb forum: Chatgpt told me the ::before method. Go figure
  • Further Widgets question

    Solved Configure nodebb
    4
    1
    1 Votes
    4 Posts
    2k Views
    phenomlab
    @Panda category is for a category in its own, so for example, “fruit” whereas categories is the page that contains all categories as a list.
  • Changing Background on NodeBB

    Solved Customisation background image nodebb
    4
    0 Votes
    4 Posts
    2k Views
    phenomlab
    @cagatay You’d target the body tag and use the below line of CSS background: url(/assets/customcss/backgrounds/default/default.png) no-repeat center center fixed; Obviously, you need to change the path to suit where your image is being stored. More info around the background property can be found here https://www.w3schools.com/cssref/css3_pr_background.php
  • [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
  • IRC Server/Client - Chat App with NodeBB

    Linux nodebb irc server client
    6
    1 Votes
    6 Posts
    3k Views
    phenomlab
    @Hari not sure from the consumer perspective, but Skype has been all but completely consumed by Microsoft Teams when it comes to business usage.
  • 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 ?
  • How to set a signature in NodeBB?

    Solved Customisation
    4
    2 Votes
    4 Posts
    2k Views
    JAC
    @phenomlab said in How to set a signature in NodeBB?: @jac No issues at all with copying. This is set using the signature for the user you are posting as. In the case of Hostrisk, it’s set like the below [image: 7bf04183-f6e8-4d72-b0eb-c9a05c9cd24b-image.png] You can set the signature by using https://domain.com/user/theuser/edit Mamy thanks Mark, I’ll set this up later .