РЕШЕНО: круглые аватарки

Блог им. nickostyle
Задача: вывести аватарки юзера в шаблон топика и сделать их определенной формы. Аватарки я вывел

Нужно получить аватарки такого вида:


Самый простой вариант — это аватарку сделать фоном, а сверху разместить гифку с прозрачной зоной нужной формы. Но как аватарку сделать фоном — не понимаю, учитывая что код в topic_topic.tpl

<img src="{$oTopic->getAuthorAvatarPath(48)}" />


зы: мне кажется, давно пора здесь сделать сервис вопросов и ответов, а не постить все в целый блог. Есть вопрос — есть ответ. А не куча левых комментов, всякого срача, который я, как автор топика, даже удалить не могу.

18 комментариев

avatar
position: absolute
avatar
1. Оберни аватарку в ссылку на профиль юзера, чтобы получилось так:
<a href="{$oUser->getUserWebPath()}"><img src="{$oTopic->getAuthorAvatarPath(48)}" /></a>
2. Добавь перед выводом аватарки, нужное прозрачное изображение. Чтобы получилось так:
<a href="{$oUser->getUserWebPath()}" class="avatarka">
    <img src="{cfg name='path.static.skin'}/images/watermark.png" class="watermark" />
    <img src="{$oTopic->getAuthorAvatarPath(48)}" />
</a>
3. В стилях прописать:
.avatarka { position:relative }
.watermark { position:absolute }
Если что, пиши в личку.
avatar
Все получилось, спасибо большое))
avatar
в код
<div class="addotherparamshere" style="background: url({$oTopic->getAuthorAvatarPath(48)}) transparent;"></div>


в ксс
div.addotherparamshere {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 25px; // here need hacks for other browsers (-moz-, -o-, -webkit- etc)
}
avatar
А как же ИЕ :( На 9м ещё, может быть, и сработает. Но что делать с остальными?
avatar
использовать хак :) для border-radius довольно сносное решение есть для иа
avatar
так не, я ж хочу без бордер-радиуса) Именно картинку наложить сверху
avatar
а, ну тогда как описал bamboo выше с позиционированием.
avatar
6 не тяну из принципа.
даже не думаю о нем *возомнил себе что его не существует
avatar
Я не поддерживаю даже 8го. Не может — пошёл вон, надоел. В принципе, из всей поддержки делаю вот так: -moz-, -webkit-, -o-, -ms-. Ну и по мелочам смотрю, не отползло ли что куда.
avatar
Вы сайты только для себя делаете?
avatar
Документации-то по функциям нет нет, как у WP. Вот и спрашиваю у сообщества. Пролемы?
avatar
Никаких проблем, просто как вы можете «поддерживать» что-то или «не поддерживать», являясь обычным дилетантом?
avatar
Нет. Просто не работаю с мудаками.
И не надо на “вы”. Я не шизофреник.
avatar
А я с вами на брудершафт не пил — это раз, и мой сын всего на пару-тройку лет вас моложе — это два.
P.S.: Мудаки, так на секундочку, по вашей классификации — это пользователи для которых вы работаете.
avatar
может хватит флудить и засорять топик? все вопросы можно через личку решить
avatar
Скачал сегодня ЛС, вышеуказанный способ не работает!
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.