Дайте пользователям альтернативный / второй аватар размер прямоугольника

Я ищу в течение многих лет. Есть решения, чтобы «обрезать» аватар прямоугольником.

Я хочу, чтобы второй (альтернативный) аватар для моих пользователей показывал в определенных местах на сайте, где квадратный аватар не подходит;

  • Скажем, в сообщении пользователя XYZ, его аватар квадратный (или круглый – не имеет значения).

  • на его странице профиля отображается альтернативный аватар – прямоугольник один

Чтобы быть ясным: мне нужны два разных аватара / изображения; квадрат и прямоугольник. Они должны загружаться отдельно .

Solutions Collecting From Web of "Дайте пользователям альтернативный / второй аватар размер прямоугольника"

Если я правильно понимаю, вы хотите две (две) разные формы, а на самом деле не 2 разных изображения ?!
Если это так, этот ответ ниже – это решение, которое вы можете использовать.

Но когда я ошибаюсь, мой ответ, вероятно, бесполезен.

Я лично сделал бы это с помощью CSS .
Я не говорю, что он всегда работает / является решением, но для аватаров он является самым быстрым простым решением (imho) без необходимости замены / редактирования / добавления другого изображения.

Ниже пример, просто используя код CSS, для достижения вашей цели.
Я использовал свой собственный аватар (от SE). Это квадрат img, и, используя CSS-код, формы изменяются.

введите описание изображения здесь
CSS-code я использовал, чтобы сделать это возможным: Демо с HTML/CSS чтобы «играть с».

 .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; } 

Чтобы использовать CSS-code используемый здесь, вы можете добавить его в свой style.css в папку темы.
(Сначала сделайте резервную копию из файла …)

Вы можете использовать выше в functions или templates , вот пример:
( пожалуйста, отрегулируйте код там, где это необходимо, я его не тестировал !!! ),

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

Надеюсь, что это создаст смысл и станет одним из возможных решений, которые вы можете использовать в своем проекте.