Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Хаки Аватар по первой букве имени?

Аватар по первой букве имени?


     12.11.2014    Хаки    1314

вопрос
Как можно реализовать.
Пользователь без аватара -> присваивать аватар по первой букве имени.
Фото A .... Z, если Pavel, то берем картинку P.png.

Ответил: D0Gmatist


Примеры вставки
<img data-login="{login}" data-url="http://сайт.ру/uploads/fotos/">
<img data-login="{login}" data-url="http://сайт.ру/uploads/fotos/">

JS код
$(document).ready(function () {
    $('img[data-login]').each(function () {
        var a = $(this).data('login'),
            b = $(this).data('url');
        $(this).attr({
            'src': b + a[0] + '.png'
        })
    });
});

В результате JS при разгрузке страницы получит атрибут data-login ( первый символ ) и data-url и сформирует url на картинку и вставит создав атрибут src
В результате будет
<img data-login="abc" data-url="http://сайт.ру/uploads/fotos/" src="http://сайт.ру/uploads/fotos/a.png">
<img data-login="cba" data-url="http://сайт.ру/uploads/fotos/" src="http://сайт.ру/uploads/fotos/c.png">

Комментарии пользователей (4)

D0Gmatist
225

794 | 281

D0Gmatist - 12 ноября 2014 22:44 - Местный

Можно ещё так
$(document).ready(function () {

    $('img[data-login]').each(function () {
        var a = $(this).data('login'),
            b = $(this).data('url');

        $(this).attr({
            'src': b + a[0] + '.png'
        });

        $(this).removeAttr('data-login').removeAttr('data-url');

    });

});
по итогу после вставки src удалит атрибуты data-login и data-url

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

vitnet
218

2171 | 930

vitnet - 13 ноября 2014 11:10 - Эксперт

+ чтобы не плодить кучу аватарок (a-z, A-Z) можно перевести первую букву в верхний регистр
$(document).ready(function () {
    $('img[data-login]').each(function () {
        var a = $(this).data('login'),
            b = $(this).data('url');

        $(this).attr({
            'src': b + a[0].toUpperCase() + '.png', 'alt': a
        });

        $(this).removeAttr('data-login').removeAttr('data-url');
    });
});

insauce
2 | 1

insauce - 13 ноября 2014 11:26 - Юзер

А если аватарка есть у пользователя, он будет подставлять по букве всё равно?

код ещё не проверял

D0Gmatist
225

794 | 281

D0Gmatist - 13 ноября 2014 15:27 - Местный

Цитата: insauce
А если аватарка есть у пользователя, он будет подставлять по букве всё равно?
Можно добавить условие
<img data-login="abc" data-url="http://сайт.ру/uploads/fotos/" src="/templates/madison2/dleimages/noavatar.png">
<img data-login="cba" data-url="http://сайт.ру/uploads/fotos/" src="/templates/madison2/dleimages/noavatar.png">

$(document).ready(function () {
    $('img[data-login]').each(function () {
        var a = $(this).data('login'),
            b = $(this).data('url'),
            c = $(this).attr('src'),
            cs = c.split('/');

        if (cs[cs.length - 1] == "noavatar.png") {

            $(this).attr({
                'src': b + a[0].toUpperCase() + '.png',
                'alt': a
            }).removeAttr('data-login').removeAttr('data-url');

        }

    });
});
получаем src разбиваем строку по слешу на массив и получаем последнюю запись (название картинки с расширением), если запись равна картинке по умолчанию "noavatar.png" заменяем

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы