Give users alternative/second avatar that is rectangle sized

Question

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.

Answer 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.

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.