Это сайт — моя персональная записная книжка. Интересна мне, по большей части, история, своя жизнь и немного программирование.

Картинки в комментариях на моём сайте

Я тут сделал на выходных, помимо кучи малозаметных улучшений, ещё одну хорошую (как мне кажется) вещь — картинки в комментариях. Пишу «как мне кажется», а не «однозначно», потому что это мне скучно делать как у всех. Я делаю, либо чтобы провести эксперимент, либо чтобы чему-то научиться. Тут и то, и другое.

Итак, вставляются картинки только из сервиса «Яндекс.Фотки». Инструкция: идёте в любой альбом, тыкаете там в публичную фотку, берёте URL, который получился, указываете его в заметке, отправляете комментарий. Всё.

Приложенная фотка в комментариях (17.90КиБ)

В это время мой сервер просматривает урлы вашего комментария, находит три первых, похожих на урлы «Яндекс.Фоток» (отсюда ограничение — вставляются так только три первых картинки, остальные будут простыми урлами), идёт с ними в API фоток, берёт из присланного обратно XML урл картинки, выставляет формат «не более 500 пискелей в любую сторону» и вставляет полученное как картинку.

Есть способ обойти ограничение, закрою позже, если кто-нибудь будет баловаться.

Принимаются советы, например, не много ли это — 500 пикселей, может сделать меньше? Доступные размеры есть на сайте документации API «Яндекс.Фоток».

P.S. Расскажу сразу почему «Яндекс.Фотки», а не любой другой сервис? Причин несколько — наличие API, которое доступно (в нужном мне функционале) без регистрации и авторизации.

Второе — неограниченный размер хранимых изображений на сервисе.

Третье — сервис закроется не раньше, чем закроется «Яндекс», то есть это маловероятное событие.

Четвёртое — кража домена исключается, взлом крайне маловероятен, значит с сервиса мне придут данные, которым я могу доверять. Это тоже важно.

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

P.P.S. Это топик добра, в нём можно тестировать как работает вставка этого добра на страницу.

61 комментарий
Евгений Степанищев (bolknote.ru) 2010

В этом топике можно тестировать как это работает. Эгегей!
http://img-fotki.yandex.ru/get/5/bolknote.32/0_2bfbb_e476e1ce_L

splurov.livejournal.com 2010

Может картинку делать ссылкой на яндекс.фотки, чтобы в оригинальном размере посмотреть или комментарии там почитать.

Евгений Степанищев (bolknote.ru) 2010

Может подумать о том, чтобы вставлять alt картинки, прилетающий из API? Кто-нибудь их читает, эти «альты»? Почему-то из API не прилетают размеры картинки, а жаль.

splurov.livejournal.com 2010

Комментарий для Евгения Степанищева:

Роботы точно читают :)

Евгений Степанищев (bolknote.ru) 2010

Комментарий для splurov.livejournal.com:

Спасибо, это очень хорошая идея! Реализую.
http://fotki.yandex.ru/calendar/users/alllebedev/view/207065/

Евгений Степанищев (bolknote.ru) 2010

Комментарий для splurov.livejournal.com:

Ну, роботы, в данном случае, наверное не важны.

Евгений Степанищев (bolknote.ru) 2010

А ещё раз котёнок с цыплёнком?
http://img-fotki.yandex.ru/get/4306/alllebedev.e9/0_328d9_a5f4d3d3_L

Евгений Степанищев (bolknote.ru) 2010

Кому-нибудь кажется, что 500 пикселей это много?

Евгений Степанищев (bolknote.ru) 2010
runmendev.livejournal.com 2010

300 Лучше, с сделай чтобы по клику отрывалась полная версия картинки, абсолютная ссылка или на я.фотки

Michael Yakovis (yakovis.com) 2010

когда будет ссылка на оригинал, 300 будет точно лучше, чем 500. я бы даже еще меньше может сделал.

Fulcrum (fulc.ru) 2010

По мне лучше 500, нечего экономить на трафике.

Евгений Степанищев (bolknote.ru) 2010

Комментарий для utochka-no4.ya.ru:

Ох, и такой URL бывает. Сделаю.

mr-simm.livejournal.com 2010

Комментарий для Евгения Степанищева:

Кто-нибудь их читает, эти «альты»?

Читаю, когда сижу с отключенной графикой и гружу только то, что нужно — вот тут-то альты и помогают определить, нужно оно тебе или нет. Если они адекватные.

Евгений Степанищев (bolknote.ru) 2010
Азат Разетдинов (razetdinov.ya.ru) 2010

Аплодирую стоя, отличное применение API.

Евгений Степанищев (bolknote.ru) 2010

Комментарий для razetdinov.ya.ru:

  • кланяеццо *

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

Евгений Степанищев (bolknote.ru) 2010

Я сделал ссылку на большое фото.

jankkhvej (jankkhvej.blogspot.com) 2010

А чего б не сделать как в Google Buzz?

Евгений Степанищев (bolknote.ru) 2010

Комментарий для jankkhvej.blogspot.com:

А как в Google Buzz?

Евгений Степанищев (bolknote.ru) 2010

Комментарий для splurov.livejournal.com:

Может картинку делать ссылкой на яндекс.фотки, чтобы в оригинальном размере посмотреть или комментарии там почитать.

Готово

Viperet (viperet.info) 2010

Кстати для еще одного популярного хостинга фото — PicasaWeb есть даже JS, просто подключив который на странице можно переобразовывать ссылки в интерактивные альбомы.
Демо — http://forum.our.cn.ua/index.php?topic=183.0
У автора http://bondariev.info/web/picasaweb/picasaweb-dlya-jquery-i-wordpress/ демка почему то не работает

Евгений Степанищев (bolknote.ru) 2010

Комментарий для ya-dobrohot.ya.ru:

Тестируем Есенина

http://img-fotki.yandex.ru/get/4313/ya-dobrohot.d/0_3d3d5_5e64e868_L.jpg

jankkhvej (jankkhvej.blogspot.com) 2010

Комментарий для Евгения Степанищева:

Не могу зарегаться на фотках.яндекса, нажимаю «согласен», страница оферты просто перегружается. Так что вот — http://picasaweb.google.com/jankkhvej/Test#5480020106944951810

Евгений Степанищев (bolknote.ru) 2010

Комментарий для viperet.info:

Кстати для еще одного популярного хостинга фото — PicasaWeb есть даже JS, просто подключив который на странице можно переобразовывать ссылки в интерактивные альбомы.

У меня в «Опере» выглядит ужасно, страница разъехалась.

Евгений Степанищев (bolknote.ru) 2010

Комментарий для jankkhvej.blogspot.com:

Не могу зарегаться на фотках.яндекса, нажимаю «согласен», страница оферты просто перегружается.

Поставлю ребятам баг.

Так что вот — (url на картинку)

Это если исходить из предположения, что человек указывает в качестве OpenID адрес на «Ярушке», а бывает не так (я так, например, никогда не делаю). И я не понял, если у меня около 2000 фотографий на «Ярушке», что я должен подгрузить на свой сайт?

100grammist.livejournal.com 2010

Комментарий для Евгения Степанищева:

На счет нововведений: новая фишка с пролистыванием до последнего комментария (#34) не понравилась.
Еще не прочитал тему, а начинаю с комментария.
Такое поведение _только_ если открывать страницу из адресной строки или с другого сайта.

Евгений Степанищев (bolknote.ru) 2010

Комментарий для 100grammist.livejournal.com:

Да, мне самому кажется, что это сомнительная фишка. Переделаю.

splurov.livejournal.com 2010

Раз речь зашла о нововведениях:

  1. В посте http://bolknote.ru/all/2546 очень неудобно, когда кликаешь на номер картинки и срабатывает ссылка на якорь — 1) страница скролится к верху картинки и 2) загрязняется история браузера.
  2. Об этом, наверное, уже шла речь — не удобно подписываться на комментарии по РСС, куда удобнее, чтобы новые комментарии приходили по почте.
Евгений Степанищев (bolknote.ru) 2010

Комментарий для splurov.livejournal.com:

В посте http://bolknote.ru/all/2546 очень неудобно, когда кликаешь на номер картинки и срабатывает ссылка на якорь — 1) страница скролится к верху картинки и 2) загрязняется история браузера.

Да уже говорили, я скоро напишу почему было сделано так и, скорее всего, переделаю.

Об этом, наверное, уже шла речь — не удобно подписываться на комментарии по РСС, куда удобнее, чтобы новые комментарии приходили по почте.

Откуда же мне взять почту человека?

jankkhvej (jankkhvej.blogspot.com) 2010

Комментарий для Евгения Степанищева:

Buzz подргужает с десяток картинок по любому URL, не только если это чей-то OpenID. Просто как только в тексте появляется URL, Buzz «в фоне» подгружает картинки и предлагает их вставить в пост.

Поставлю ребятам баг.

Достаточно ли им информации? Я пробовал из Chrome и Firefox, в хроме работает Adblock, в Firefox — нет. Не работает...

Евгений Степанищев (bolknote.ru) 2010

Комментарий для jankkhvej.blogspot.com:

Buzz подргужает с десяток картинок по любому URL, не только если это чей-то OpenID. Просто как только в тексте появляется URL, Buzz «в фоне» подгружает картинки и предлагает их вставить в пост.

Но у меня-то не просто URL, а OpenID и «Ярушка» даже не самая частая. И я не хочу вставлять картинки с хостов о которых я ничего не знаю, причины я написал в «PS» к этому посту.

Достаточно ли им информации? Я пробовал из Chrome и Firefox, в хроме работает Adblock, в Firefox — нет. Не работает…

Не знаю, пока ещё не ответили. Ответят, попробую вас связать, если информации мало будет.

Евгений Степанищев (bolknote.ru) 2010

Комментарий для zelennata.ya.ru:

Не-не, никаких XL-картинок :) Да и вообще, зачем ставить ссылку на картинку. Можно просто постить URL страницы, где ссылка находится.

Евгений Степанищев (bolknote.ru) 2010

Комментарий для zelennata.ya.ru:

Вот, так — ня!
http://img-fotki.yandex.ru/get/4301/zelennata.98/0_449d2_115ad54a_L.jpg

zelennata (zelennata.ya.ru) 2010

ааааааа.ясн

splurov.livejournal.com 2010

Комментарий для Евгения Степанищева:

Откуда же мне взять почту человека?

Спросить, конечно. Мне не сложно её ввести, как в форме комментирования, так и вне её.

splurov.livejournal.com 2010

Почему после добавления комментария в адресе якорь #46, а под ссылкой «#46» #n12065?

И ещё такой баг(?): когда только добавишь комментарий с цитатой, в хтмл-коде будет <blockquote class=«bq»><tt id=«46»>Откуда же мне взять почту человека?<br></tt></blockquote> — тег tt здесь явно лишний. После обновления страницы всё нормально.

Евгений Степанищев (bolknote.ru) 2010

Комментарий для splurov.livejournal.com:

Спросить, конечно. Мне не сложно её ввести, как в форме комментирования, так и вне её

Это превращает сайт в отличную, дешёвую спам-машину. Добавляем комментариями людей с почтой, а потом начинаем сообщениями рассылать им спам.

И ещё такой баг(?)

Посмотрю, спасибо!

Евгений Степанищев (bolknote.ru) 2010

Комментарий для splurov.livejournal.com:

когда только добавишь комментарий с цитатой, в хтмл-коде будет <blockquote class=«bq»><tt id=«46»>Откуда же мне взять почту человека?<br></tt></blockquote> — тег tt здесь явно лишний. После обновления страницы всё нормально.

Не вижу ничего такого в коде.

splurov.livejournal.com 2010

Комментарий для Евгения Степанищева:

Это превращает сайт в отличную, дешёвую спам-машину. Добавляем комментариями людей с почтой, а потом начинаем сообщениями рассылать им спам.

Ты не сильно преувеличиваешь?

  1. Сильно сложно, зачем спамерам так заморачиваться?
  2. Всегда можно отписаться.
  3. Можно просить подтверждение — зайти на почту и кликнуть по ссылке не сложно.
  4. Делать такое спамеру руками, без автоматизации — слишком трудно, а с автоматизацией можно бороться и самим спамом тоже.

Не вижу ничего такого в коде.

Да, проблема в чем-то другом. Смотри скрин: http://img692.imageshack.us/img692/6602/s20100608004340.png
При этом баг не постоянно проявляется, я сейчас перезагрузил страницу и стало всё нормально. Может, как-то зависит от последний комментарий с цитатой или без, а может от чего-то ещё.

Евгений Степанищев (bolknote.ru) 2010

Комментарий для splurov.livejournal.com:

Ты не сильно преувеличиваешь?

Это было одной из причин, по которым я отключил комментарии на этом блоге на полгода (а то и больше, не помню). Я думаю, что можно было бы сделать отправку на мыло, если OpenID (через SRE) указывает это мыло.

Смотри скрин

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

splurov.livejournal.com 2010

Комментарий для Евгения Степанищева:

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

С багом, смотри фаербаг и отступы у цитат в #48.

Евгений Степанищев (bolknote.ru) 2010

Комментарий для splurov.livejournal.com:

Ага, спасибо! Попробую разобраться как время будет.

Евгений Степанищев (bolknote.ru) 2010

Комментарий для Евгения Степанищева:

Достаточно ли им информации? Я пробовал из Chrome и Firefox, в хроме работает Adblock, в Firefox — нет. Не работает...

Ребята спрашивают какой логин.

Евгений Степанищев (bolknote.ru) 2010

Комментарий для jankkhvej.blogspot.com:

Ребята спрашивают какой логин.

olegakhmetov.ru 2010

Проверка...

olegakhmetov2.ru 2010

Проверка-2...

ufasite.ru 2010

Проверка-3... (опен-айди)