Вставка изображений в блоги и комментарии

Версия: 1.0
Дата последнего редактирования: 11.03.2015

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

Ответ на этот вопрос состоит из двух частей:

1. Как загрузить картинку с компьютера в Интернет?

2. Как вставить картинку в нужное место?

Разберем оба вопроса отдельно.

 

1. Как загрузить картинку с компьютера в Интернет?

В настоящий момент на сайте реализована загрузка изображений только к страницам населённых пунктов, к другим типам материалов и комментариям изображения загружать пока нельзя. Поэтому для размещения изображения на сайте необходимо воспользоваться сторонним хостингом картинок.

Разберем пример для хостинга картинок radikal.ru

При входе на указанный сайт отображается следующее меню:

  • Снимите галочку «показывать картинку всем».
  • Если файл изображения слишком большой, поставьте галочку «Уменьшить до» и укажите желаемую ширину изображения (в примере 800 px). В зависимости от желаемого размера изображения можно указывать разную величину. Для больших фото рекомендуемое значение – 1000-1200px.

Нажмите кнопку «Выберите файл» и откройте нужный файл на вашем компьютере. Изображение появится на экране:

Вы можете заполнить поле «Надпись на фото». Можете использовать эту функцию, но имейте в виду, что надпись появится прямо на фотографии и может ухудшить её художественную ценность. Лучше расскажите о изображении в тексте.

В полях «Теги», «Альбом», «Описания» можно ничего не писать.

Далее необходимо нажать кнопку «Загрузить». В результате будет отображено примерно следующее окно:

В графе «1. Ссылка» то, что нам нужно – ссылка на изображение.

Примечание 1.

Удобным сервисом для хранения фотографий является picasaweb.google.com. Если у вас есть аккаунт Google (Gmail), то вы можете воспользоваться этим сервисом.

Принцип прост – вы создаете альбом, и в него загружаете изображения. А затем эти изображения открываете, кликаете правой кнопкой, копируете ссылку. Преимущество этого сервиса в том, что размером изображения можно управлять через адресную строку. Когда вы вставляете ссылку на изображение, она выглядит примерно так:

https://lh6.googleusercontent.com/-UCiKO3HbsUQ/VQCf8dAEtZI/AAAAAAAADvM/QTQ3b8bmGHo/s720/radikal-7.jpg

В ней есть фрагмент, что-то вроде s720 (цифры могут быть другие). Просто замените это на w800 и получите изображение шириной 800 пикселов. Таким образом, загрузив одно изображение, можно создавать разные ссылки на уменьшенное и полноразмерное (большое) фото.

Зачем это нужно? Задавая размер изображения, вы «экономите» трафик пользователей - страницы загружаются быстрее. Удобно задавать для предварительного просмотра небольшой размер, соответствующий размеру отображаемой картинке (например, шириной 700 пикселов), а по ссылке открывать полноразмерное изображение (например, шириной 1200 пикселов).

Примечание 2. Не следует использовать ссылки на изображения из социальных сетей  («Одноклассники», «Вконтакте», «Facebook») – эти изображения, скорее всего, не смогут увидеть многие пользователи.

 

2. Как вставить изображение в нужное место (в блог, в комментарий)?

При создании/редактировании записи в панели инструментов выберите значок «Изображение»:

В открывшемся окне вставьте ссылку в поле «Ссылка» на вкладке «Данные об изображении».

Если у вас разные ссылки для уменьшенного и полноразмерного изображения, то сюда следует вставить ссылку на уменьшенное изображение, размер которого должен соответствовать параметрам «Ширина» и «Высота»

В поле «Альтернативный текст» можно написать краткое описание изображения.

В поле «Ширина» и «Высота» укажите желаемые параметры отображения картинки. В примере указан размер 800x600. Кнопка «Замочек» поможет сохранить пропорции.

Далее перейдите на вкладку «Ссылка».

В поле «Ссылка» вставьте ссылку на изображение. Это позволит по клику мышью на изображении открывать его крупно во всплывающем окне (если не надо - не делайте). Если у вас разные ссылки для уменьшенного и полноразмерного изображения, то сюда следует вставить ссылку на полноразмерное (большое) изображение. 

Завершите действие нажатием кнопки «ОК».

Всё получилось!

Комментарии

Аватар пользователя татива

Спасибо! Надо попробовать.

Аватар пользователя Дмитрий Лысов

Спасибо, Денис!

Аватар пользователя allaburdina

Спасибо за ценную информацию.

Аватар пользователя Родыгина Анна

В комментарии к блогам тоже можно вставлять изображение (фото) с компьютера!