Скачать плагин для аватарок. Чтобы изменить аватар по умолчанию или пресеты измените в файле плагина картинки в папке assets
Плагин создаёт кастомный размер для изображений 240 на 240px. При загрузке аватара, фото кропается до квадрата 240 на 240px
Вывести форму загрузки аватара в личном кабинете можно шорткодом [ avs_user_avatar ]
Код css для шорткода
#avatarForm{
display:flex;
flex-direction:column;
align-items:center;
width:100%;
}
selector .avatar-img{
width:90px;
height:90px;
border-radius:50%;
object-fit:cover;
border:3px solid #FFB829;}
selector .avatar-upload-form{
background:#fff;
border:1px dashed #A4A4A4;
padding:14px;
text-align:center;
position:relative;
display:flex;
flex-direction:column;
align-items:center;
border-radius:20px;}
selector .addfile{
padding:5px 10px;
background-color:#FFD580;
font-size:13px;
font-weight:400;
border-radius:5px;
margin-top:8px;
margin-bottom:12px;}
selector .file-upload__input{ display:none; }
selector .default-button{
margin-top:14px;
background-color:transparent;
font-size:13px;
text-decoration:underline;
color:#a1a1a1;
padding:4px 4px;
margin-left:10px;
}
selector .error-message{
font-size:14px;
color:#E87B37;
}
selector .spinner{
display:inline-block;
width:18px;
height:18px;
border:2px solid #FFB829;
border-radius:50%;
border-right-color:transparent;
animation:spin 0.8s linear infinite;
vertical-align:middle;
margin-left:8px;
}
@keyframes spin { 100% { transform: rotate(360deg);}}
selector .avs-presets {margin-bottom:14px;max-width:350px;}
/* Заголовок над пресетами */
.avs-avatar-upload-form .avs-presets-label {
display: block;
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;}
/* Сетка миниатюр */
.avs-avatar-upload-form .avs-presets-grid {
display: flex;
gap:6px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
/* Кнопка-пресет (контейнер картинки) */
.avs-avatar-upload-form .avs-preset-avatar {
width: 60px;
height: 60px;
padding: 0;
border: 0;
background: transparent;
border-radius: 100px;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;}
/* Внутренняя картинка */
.avs-avatar-upload-form .avs-preset-avatar .avs-preset-img,
.avs-avatar-upload-form .avs-preset-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 100px;}
.avs-avatar-upload-form .avs-presets-status {
font-size: 13px;
color: #4b5563;
margin-top: 6px;
}
selector #avs-avatar-form{
display:flex;
flex-direction:column;
align-items:center;
width:100%;
}