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
  • 2 Votes
    1 Posts
    639 Views
    No one has replied
  • Custom Page - nodebb

    Solved Customisation custom-pages nodebb
    13
    2
    5 Votes
    13 Posts
    3k Views
    DownPW
    I’m happy to see this
  • 4 Votes
    7 Posts
    3k Views
    crazycells
    @phenomlab oh no, that is 1 cent on the video, but you are right, symbols are similar… I just converted it to $1 , since it is more intuitive in daily life…
  • Q&A Plugin Changes NodeBB

    Solved Customisation nodebb q&a plugin
    25
    1
    6 Votes
    25 Posts
    11k Views
    cagatay
    @phenomlab said in Q&A Plugin Changes NodeBB: float: right; left: 10px; } worked thank you
  • Title on homepage of nodebb forum

    Solved Customisation nodebb
    2
    1 Votes
    2 Posts
    2k Views
    phenomlab
    @eveh Welcome board The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; } Note, that you will need to adjust your CSS code to suit your own site / requirements.
  • Error install plugin

    Solved Customisation plugin nodebb
    8
    1
    1 Votes
    8 Posts
    6k Views
    DownPW
    @pobojmoks Not WP plugin but nodeBB but it a known bug
  • [NodeBB] username cards

    Solved Customisation nodebb
    8
    5 Votes
    8 Posts
    3k Views
    Sampo2910
    @phenomlab Aha…nice to know. As always thank you for the reply and information.
  • 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.