Аватарки из соцсетей

ulogin подсасывает. ulogin подсасывает аватарки из соцсетей, но мне пришлось их отключить, когда я сделал авторизацию через соцсети, потому что картинки не масштабировались. Если аватарка 60 на 60 — она отображалась правильно, если она 200 на 200 например, то и в комментах она отображалась 200 на 200, причем в коде страницы ясно было прописано height 60 и width 60, и если кусок кода тупо скопипастить в отдельный html-файл и открыть его — там аватарка открывается в правильном размере 60 на 60, какой бы большой она не была.



Это меня совершенно удивляло, выглядело всё так, будто браузер просто игнорирует код. Те, кто был здесь в первый день тестирования авторизации через соцсети — помнят эту чехарду. Щас, вот, нашел минутку сесть да разобраться. Я давно уже отстал от мира html-а, в моё время, когда я его изучал, никакого CSS-а не было. Только теперь я эмпирически, не имея представления что именно я ищу, нашел таки, что style.css у моей темы для wordpress имеет параметр media-«all», который задает height и width в состояние auto, и затем параметры img-avatar, задающие 60 пикселей, тупо игнорируются, потому что противоречат all-у. Достаточно найти в самом начале style.css параметр img, он там выглядит так:

img{
max-width:100%;
height:auto;
width: auto; /* IE 8 */
}

и привезти его к следующему виду:


img{
max-width:100%;
}

И проблема решается. Теперь тут в комментариях нормально и автоматически отображаются ваши автарки из соцсетей, если вы авторизовываетесь через них. Так что если вы юзаете uLogin и у вас пробелема с размерами аватара, может быть этот пост вам поможет.

Продолжаем отгадывать загадку ниже.

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

  1. nikitaspb9 8 октября, 2015 9:19 пп  Ответить

    Вы, вероятно, без особых проблем нашли бы этот баг через инструменты разработчика того же Хрома и огнелиса, в которых можно посмотреть все стили, которые влияют на отображение элемента.

  2. Geezer341 8 октября, 2015 9:28 пп  Ответить

    Странно. Вроде не через соц. сеть зашёл, но аватарка есть! Причём непонятно из какой именно соц. сети она 😀

    • Bocha 9 октября, 2015 4:03 дп  Ответить

      Судя по логам регались вы через вконтакте, а потом получили логин и пароль по почте локальные и пользуетесь ими, но аватарка со вконтакта сохранена. Если бы я не пофиксил баг, она была бы у вас такого размера:



      • Geezer341 10 октября, 2015 2:22 дп  Ответить

        Да да, так и было, логи не врут 🙂 Просто удивился что аватарка всплыла из ниоткуда, ведь использую локальный акк.
        «Если бы я не пофиксил баг, она была бы у вас такого размера: 100х100»
        То что не 60х60 это понятно, но почему 100х100? Она же на вконтакте 200х200?

  3. ElXDi 8 октября, 2015 9:52 пп  Ответить

    В таких случаях может помочь аддон для Лисы firebug
    Нажимаете правой и появляется inspect with firebug
    А там уже будет видно какие настройки и откуда они

  4. Дмитрий Иванов 8 октября, 2015 10:25 пп  Ответить

    А ещё можно было дописать в style.css такой код:

    .avatar-60 {
    width: 60px !important;
    height: 60px !important;
    }

    Тем самым мы принудительно (!important) заставим аватарки, для которых ставится класс avatar-60, выставлять размеры в 60px.

    • Bocha 9 октября, 2015 3:59 дп  Ответить

      Спасибо, это ценная инфа.

  5. Andrey Maksimov 31 марта, 2016 11:30 дп  Ответить

    А у меня аватарки не выводит из соцсетей? Как так?

Leave a comment

Войти с помощью: 

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.