Announcement

Collapse
No announcement yet.

Change avatar size on post bit?

Collapse
X
Collapse
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    Change avatar size on post bit?

    First, I apologize if these kind of threads are either not allowed or posted in the inappropriate section.

    How can I change the avatar size in postbit?

    However, I do not want a "fixed" size if that makes sense. As in, it's basically free form, but it can't be bigger than x dimensions depending on the width and height

    For example, http://imgur.com/a/MhEhO

    Notice how the width seems to be the same, but height for every single one varies

    #2
    Moved to the appropriate forum.

    I'll take a look if that's possible.

    Comment


      #3
      Originally posted by glennrocksvb View Post
      Moved to the appropriate forum.

      I'll take a look if that's possible.
      Sorry and thank you very much.

      The forum I was directing to is http://www.kanyetothe.com/forum/ (I do not believe they're on vBulletin, but I've seen it done on vB, MyBB, etc)

      Comment


        #4
        Having a rectangular avatar can be easily accomplished in CSS but the problem here is the avatar is always cropped as a square when you upload it. The upload script needs to be modified to allow rectangular cropping.

        Comment


          #5
          Originally posted by glennrocksvb View Post
          Having a rectangular avatar can be easily accomplished in CSS but the problem here is the avatar is always cropped as a square when you upload it. The upload script needs to be modified to allow rectangular cropping.
          Ah so it isn't too simple to code?

          Comment


            #6
            This may require hacking the PHP code which is not recommended but is unavoidable. This means you would have to apply the PHP changes every time you upgrade.

            I haven't looked into the PHP code yet to see what to change to implement this feature.

            Comment


              #7
              Originally posted by glennrocksvb View Post
              This may require hacking the PHP code which is not recommended but is unavoidable. This means you would have to apply the PHP changes every time you upgrade.

              I haven't looked into the PHP code yet to see what to change to implement this feature.
              If you think it'll be too difficult and way out of the box, it isn't a huge deal, but how could I increase the size of avatars?

              Comment


                #8
                Actually, if you think it is possible, I could possibly pay u to find it for me via PM?

                Comment


                • glennrocksvb
                  glennrocksvb commented
                  Editing a comment
                  Let me check first if it's possible and then I'll let you know.

                • Dyno
                  Dyno commented
                  Editing a comment
                  Ok thank you. If needed, I could throw a few bucks if it is a difficult coding.

                #9
                Would not a css image fill function handle this?

                Comment


                  #10
                  What did you exactly mean? And how?

                  Comment


                    #11
                    Ah, yes. Not meaning the colour FILL function, rather the filling of an image to an area.

                    If you want to use the image as a CSS background, there is an elegant solution. Simply use cover or contain in the background-size CSS3 property.
                    This will fill the background without stretching it.
                    Code:
                     
                     <div class="container"></div>​  .container {     width: 150px;     height: 100px;     background-image: url("http://i.stack.imgur.com/2OrtT.jpg");     background-size: cover;     background-repeat: no-repeat;     background-position: 50% 50%; }​
                    While cover will give you a scaled up image, contain will give you a scaled down image. Both will preserve the pixel aspect ratio.
                    Also, you can use the css property object-fit.
                    Code:
                     
                     <img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />  .cover {   object-fit: cover;   width: 50px;   height: 100px; }
                    As the postbit avatar is contained within a divider, this approach should give the desired effect.

                    Another solution is to put the image in a container with the desired width and height. Using this method you would not have to set the image as a background image of an element.

                    Then you can do this with an img tag and just set a max-width and max-height on the element.

                    CSS:
                    Code:
                     
                     .imgContainer {     display: block;     width: 150px;      height: 100px; }  .imgContainer img {     max-width: 100%;     max-height: 100%; }
                    HTML:
                    Code:
                     <div class='imgContainer'>     <img src='imagesrc.jpg' /> </div>
                    Now when you change the size of the container the image will automatically grow as large as it can without going outside the bounds or distorting.

                    If you want to center the image vertically and horizontally you can change the container css to:
                    Code:
                     
                     .imgContainer {     display: table-cell;     width: 150px;      height: 100px;     text-align: center;     vertical-align: middle; }
                    My earlier CSS and image mixed menu (before going all CSS) used buttons with background image fill using this function-
                    Code:
                     
                     img{    background: url(images/bg.jpg) no-repeat center center fixed;    -webkit-background-size: cover;   -moz-background-size: cover;   -o-background-size: cover;   background-size: cover; }
                    So, there are a number of ways one could control the avatar image size. It just needs to be applied against the CLASS b-avatar b-avatar--m b-avatar--thread h-margin-bottom-l

                    Comment


                      #12
                      Originally posted by Felix2 View Post
                      Ah, yes. Not meaning the colour FILL function, rather the filling of an image to an area.

                      If you want to use the image as a CSS background, there is an elegant solution. Simply use cover or contain in the background-size CSS3 property.
                      This will fill the background without stretching it.
                      Code:
                      <div class="container"></div>​ .container { width: 150px; height: 100px; background-image: url("http://i.stack.imgur.com/2OrtT.jpg"); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; }​
                      While cover will give you a scaled up image, contain will give you a scaled down image. Both will preserve the pixel aspect ratio.
                      Also, you can use the css property object-fit.
                      Code:
                      <img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" /> .cover { object-fit: cover; width: 50px; height: 100px; }
                      As the postbit avatar is contained within a divider, this approach should give the desired effect.

                      Another solution is to put the image in a container with the desired width and height. Using this method you would not have to set the image as a background image of an element.

                      Then you can do this with an img tag and just set a max-width and max-height on the element.

                      CSS:
                      Code:
                      .imgContainer { display: block; width: 150px; height: 100px; } .imgContainer img { max-width: 100%; max-height: 100%; }
                      HTML:
                      Code:
                       <div class='imgContainer'> <img src='imagesrc.jpg' /> </div>
                      Now when you change the size of the container the image will automatically grow as large as it can without going outside the bounds or distorting.

                      If you want to center the image vertically and horizontally you can change the container css to:
                      Code:
                      .imgContainer { display: table-cell; width: 150px; height: 100px; text-align: center; vertical-align: middle; }
                      My earlier CSS and image mixed menu (before going all CSS) used buttons with background image fill using this function-
                      Code:
                      img{ background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
                      So, there are a number of ways one could control the avatar image size. It just needs to be applied against the CLASS b-avatar b-avatar--m b-avatar--thread h-margin-bottom-l
                      So should I add the first two codes into additional_css?

                      Comment


                        #13
                        No.
                        Add this to css_additional.

                        Code:
                        /* Start over-ride postbit avatar size */
                        .b-avatar--m > img {
                            max-height: 128px;
                            max-width: 128px !important;
                        }
                        /* Stop over-ride postbit avatar size */
                        You can use percentage values. max-width: 100% You will need to play around with values until it fits your theme.
                        Last edited by Felix2; 10-20-2016, 04:40 PM.

                        Comment


                          #14
                          Originally posted by Felix2 View Post
                          No.
                          Add this to css_additional.

                          Code:
                          /* Start over-ride postbit avatar size */
                          .b-avatar--m > img {
                          max-height: 128px;
                          max-width: 128px !important;
                          }
                          /* Stop over-ride postbit avatar size */
                          You can use percentage values. max-width: 100% You will need to play around with values until it fits your theme.
                          Thanks for that. Only problem is that it doesn't center

                          Comment


                            #15
                            add these elements
                            Code:
                            margin-left: auto;
                            margin-right: auto;

                            Comment

                            Working...
                            X