Возможность публикации картинок в комментариях

Очень часто, при общении с читателями, бывает необходимо обменяться графической информацией. И если мы, авторы, можем донести ее до читателей при помощи своих статей, то обратный процесс затруднен, поскольку разработчики Blogger (Blogspot) заблокировали возможность публикации картинок в комментариях. Между тем, и авторам, порой, не помешала бы возможность добавить фотографию/скриншот в комментарий, чтобы проиллюстрировать читателю какое-то действие/событие в ответ на его вопрос.

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

Можно, конечно, опубликовать ссылку, при нажатии на которую открывается страница с картинкой. Но это не слишком эстетично и не всегда удовлетворяет нашим потребностям. Исправим это недоразумение!

Что вы в итоге получите:

1. Возможность публиковать картинки в комментариях с помощью псевдотэгов, задействованных по этой схеме: [img]ссылка на картинку[/img]
2. Автоматическое уменьшение размеров изображения (с сохранением пропорций), если они превышают заданные вами максимальные значения.
3. Автоматическое подведение под картинку ссылки на полноразмерное изображение, если эта картинка была уменьшена согласно п.2.

Пример работы вышеописанного виджета вы можете лицезреть в первом комментарии к данной статье.

Итак, для начала задействуем таблицу стилей. Для этого открываем редактор шаблона (Дизайн->Изменить HTML) и под строкой "/* Comments" и вставляем следующий код:

/* Comments
----------------------------------------------- */
#comment-img {
  max-width: 100%;
  max-height: 500px;
}

Что это за код? Это ограничители для п.2, который я обозначил выше. Не забывайте, что картинки в комментарии будете вставлять не только вы, но и ваши читатели, и если картинка окажется, к примеру, шире интерфейса вашего блога, то она просто этот интерфейс перекорежит! Именно поэтому я задал максимальную ширину картинки равной максимальной ширине поля комментария и ограничил максимальную высоту пятьюстами пикселями. Впрочем, вы можете использовать другие цифры. Но мой вам совет, для ширины используйте именно проценты. Иначе на старых версиях Internet Explorer у вас будут проблемы.

Идем дальше... Добавляем перед закрывающим тэгом </head> следующую строку:

<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'/>
</head>

* Если перед тэгом </head> уже имеется ссылка на скрипт jquery.min.js, то дублировать ее не стоит. Достаточно одного указания на библиотеку jQuery.

Теперь установим основной скрипт. В зависимости от того, какой формат комментариев - линейный или иерархический - вы используете, под тот спойлер и заглядываете:

Перед закрывающим тэгом </body> добавляем следующую строку:

  <script type='text/javascript'>
    var cimw = 658;
    var cimh = 500;
  </script>
  <script src='https://drive.google.com/uc?export=download&amp;id=0B3_dGXEjBVdPOTN3N0pGNnJJUm8' type='text/javascript'/>
</body>

Перед закрывающим тэгом </body> добавляем следующую строку:

  <script type='text/javascript'>
    var cimw = 658;
    var cimh = 500;
  </script>
  <script src='https://drive.google.com/uc?export=download&amp;id=0B3_dGXEjBVdPQW5GVnRXeWN1NEk' type='text/javascript'/>
</body>

Вы, полагаю, заметили, что двум переменным присваивается значение за пределами основного скрипта. Это переменные cimw и cimh. Это снова ограничители. Только уже для п.3. Если размер исходной картинки превышает значение, заданное ограничителем, то под картинку подводится ссылка, при нажатии на которую откроется новое окно/вкладка, с полноразмерной, неуменьшенной картинкой.

Переменная cimh отвечает за критическую высоту картинки и должна быть равна параметру max-height, заданному нами ранее в таблице стилей. С переменной же cimw - критической шириной - все несколько сложнее. Параметр max-width в таблице стилей задан у нас в процентах, а переменная cimw должна быть в пикселях. Как быть? Нам нужно вычислить, какой же ширине в пикселях соответствуют эти самые 100%.

С браузером Firefox это довольно легко: добавляем в комментарий картинку, которая заведомо шире выделенного для нее поля комментария. Потом нажимаем на опубликованной, автоматически уменьшенной картинке правой кнопкой мыши и выбираем "Информация об изображении". В открывшемся окне, кроме всего прочего, вы увидите что-то типа "Размер: 1 920px × 1 200px (в масштабе 658px × 411px)". Первая пара цифр - реальные размеры картинки, вторая пара - размеры, с которыми картинка сейчас отображается на экране. Значение ширины из отображаемых размеров и нужно присвоить переменной cimw.

Увы, другие браузеры не показывают нужную нам цифру, и чтобы получить значение для cimw не имея под рукой Firefox, придется повозиться. Добавляем в комментарий картинку, которая заведомо шире выделенного для нее поля комментария. Запоминаем, насколько уменьшенная виджетом картинка отстоит от правой границы поля комментария. Теперь навскидку присваиваем параметру max-width из таблицы стилей, о которой я писал выше, скалярное (задавать в пикселях) значение. Присвоили? Перезагружаем страницу с картинкой в комментарии. Расстояние от правой границы поля комментария отличается от того, что мы запоминали? Снова меняем значение max-width. И так, пока мы не подберем нужную ширину. Вот эту цифру и следует присвоить переменной cimw, а max-width снова вернуть процентный формат.

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