0

I am searching on and off for years. There are solutions so "crop" the avatar to rectangle.

I want to have a second (alternative) avatar for my users to show on particular places on the site where the square avatar won't fit;

  • Let's say in a message from user XYZ, his avatar is square (or round - doesn't matter).

  • on his profile page, the alternative avatar is shown - the rectangle one

To be clear: I need two different avatars/images; a square and a rectangle one. They should be uploaded separately.

1

If I understand correctly, you want 2(two) different shapes, and actualy not 2 different images?!
If so, this answer below is a solution which you can use.

But when I am wrong, my answer is probably useless.

I personally would do such with CSS.
I am not saying that it always works/is the solution, but for avatars it sure is the (imho) most fastest simple solution without the need to replace/edit/add another image.

Below an example, by just using css code, to achieve your goal.
I used your own avatar(from SE). It is a square img and by using CSS code the shapes are changed.

enter image description here
The CSS-code I used to make it possible: Demo with the HTML/CSS to 'play with'.

.original {
   margin:  10px;
   width:  128px;
   height: 128px;
   border: 0px;
   }
.skew {
   margin: -10px 10px;
   width:  128px;
   height: 128px;
   border: 0px;
   transform: skewY(30deg);
   }
.scale {
   margin: 35px 10 0;
   width:  128px;
   height: 128px;
   border: 0px;
   transform: scale(0.6);
}
.round {
   margin:  10px;
   width:  128px;
   height: 128px;
   border: 0px;
   border-radius: 200px 200px 200px 200px;
   -moz-border-radius: 200px 200px 200px 200px;
   -webkit-border-radius: 200px 200px 200px 200px;  
   }
.no2 {
   margin:  10px;
   width:  128px;
   height: 128px;
   border: 0px;
   border-radius: 200px 200px 0px 0px;
   -moz-border-radius: 200px 200px 0px 0px;
   -webkit-border-radius: 200px 200px 0px 0px;
   }
.no3{
  margin:  10px;
  width:  128px;
  height: 128px;
  border: 0px;
  border-radius: 200px 0px 200px 0px;
  -moz-border-radius: 200px 0px 200px 0px;
  -webkit-border-radius: 200px 0px 200px 0px;
  }
.no4{
  margin:  10px;
  width:  128px;
  height: 128px;
  border: 0px;
  border-radius: 200px 10px 200px 200px;
  -moz-border-radius: 200px 10px 200px 200px;
  -webkit-border-radius: 200px 10px 200px 200px;
  }
.stretch01 {
  width:  100px;
  height: 200px;
} 
.stretch02 {
  width:  228px;
  height: 128px;
} 

To use CSS-code as used here, you can add it to your style.css in your theme folder.
(Please make first a backup from the file ...)

You can use above in functions or templates, here an example:
(please adjust the code where needed, I did not test it!!!),

echo '<p class="no4">' . bp_displayed_user_avatar( 'type=small' ) . '</p>';

I hope it makes sence and is one possible solution which you can use in your project.

  • Hi! I'm so sorry buddy, but you're wrong :D I edited my question. I want/have to upload two different images.. I think sometimes I'm too stupid to explain myself right, sorry. Not an native speaker though. Givin' you a vote up :) edit can't vote -_- – ezkay Aug 19 '15 at 19:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.