Как добавить картинкуКак добавить картинку на блог? Вот такой, оказывается, незамысловатый вопрос, но он существует в «умах миллионов» и потому нужно дать на него ответ.

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

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

Затем нажимаете кнопку, которая изображена на картинке:

Как добавить картинку

И перед вами откроется окно, с помощью которого и вставляются картинки:

Добавить картинку на блога

Для этих же целей можно использовать плагин Fast Image Insert, который такое окно сразу выводит под полем для набора текста. Но это уже на любителя – смотрите сами.

В открывшемся окне выбираем способ загрузки – "С вашего компьютера", "С другого сайта" или «Выбрать из ранее загруженных. Как правило, выбираем первый вариант – с вашего компьютера.

После этого окно дополнится новыми полями:

Добавить картинку на блог

Заполнение полей при добавлении картинки



Как заполнять эти поля?

«Заголовок» — вводим тот текст, который будет виден при наведении мышкой на картинку

«Текст» — этот текст будет отображаться, если у пользователя не грузятся картинки

«Подпись» — текст под картинкой (я его не заполняю)

«Описание» — очень важное поле, в котором вам нужно объяснить поисковой системе, что изображено на картинке. Можно просто перечислить слова – вода, небо, дерево и т.д.

«Ссылка» — это то, куда попадет пользователь, кликнув на картинку. Есть 3 варианта – «Нет» (т.е. убрать ссылку), «Ссылка на файл» и «Ссылка на запись». Если картинка вписывается в ширину блога – я ссылку не ставлю вообще (т.е. кликаю по кнопке «Нет»). Если же картинка больше – то нужно выбрать «Ссылка на запись» (она стоит по умолчанию), а в дальнейших настройках указать ширину картинки, соответствующую вашему блогу.

Затем, при наличии определенных плагинов (например, wp-lightbox2), при нажатии на такую картинку, она «распахнется» до исходных размеров, как вот на этой картинке:

Пример большой картинки

Если такого плагина нет и указана ссылка на картинку, то при клике по ней она откроется в новом окне, что согласитесь, не совсем правильно. Именно потому, в большинстве случаев я убираю ссылку вообще.

Дальше нужно указать способ выравнивания картинки – слева, справа или по центру («нет» не рассматриваю по понятным причинам). Но в некоторых шаблонах это не помогает и картинка вставляется, «как хочет». Как этого избежать – я расскажу в конце данной статьи.

Следующим пунктом идет выбор размера картинки – «Миниатюра», «Средний», «Большой» или «Полный». Лично я этой возможностью не пользуюсь по двум причинам:

— перед добавлением картинки она уже должна иметь заданный размер;

— если вы загружаете большую картинку, а здесь задаете ей маленький размер – объем занимаемого места будет как у большой, что может сказаться на скорости загрузки такой картинки и страницы в целом.

Если вам все же нужно изменить размер – лучше это сделать в последующем.

Теперь осталось вставить картинку – для этого кликайте по кнопке «Вставить в запись». Но не забывайте, что картинка добавится в то место, где находится курсор.

Настройка картинки



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

Как редактировать картинку

После этого появится окно с двумя закладками. Первая закладка «Редактировать» вам уже знакома. А вот вторая «Дополнительно» требует некоторых объяснений:

Как редактировать картинку

Из большого количества настроек, вам следует запомнить и пользоваться лишь некоторыми:

«Размер» (в процентах) – передвигаю ползунок, вы можете быстро подогнать размер картинки. Как я уже писал выше, лучше изначально иметь правильный размер.

«Размер» (в пикселях) – здесь вы можете более точно задать размер, но помните, что высота и ширина должны быть пропорциональны. Если вы не знаете, как это сделать, лучше укажите только один размер, а вместо другого оставьте пустое поле и движок блога сам пересчитает его правильно.

«Отступ (H)» (Горизонтальный отступ) – задает расстояние между картинкой и текстом по горизонтали – я обычно указываю «10».

Остальные параметры можете не трогать. Что внести изменения – кликайте по кнопке «Обновить»

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

Первое, что можно сделать, это при указании выравнивания сначала кликнуть, например, на «нет», а затем – выбрать нужный вам тип, например «по центру». Часто такой способ помогает.

Если и после этого все остается по-прежнему, тогда переходим в html-редактор, находим то место, где выводится картинка и добавляем небольшой код (выделен красным):

<img title=“0023» src="http://www.vashinternetgid.ru/wp-content/uploads/2011/03/00231.gif" alt="« width=»128" height="100" align="left" />

В данном случае будет выравнивание по-левому краю. Если нужно по-правому – указываем «right», по-центру – «center» (для текста можно еще применить выравнивание по-ширине – «justify»)

Если вам не хочется постоянно проделывать такую операцию – тогда нужно вносить изменения в CSS-таблицы шаблона, а это уже отдельная история. Если будет такая необходимость – пишите, будем разбираться.

Чаще всего, только одно картинка выравнивается по левому краю – превьюшка (самая первая) и именно с ней и бывают проблемы. Остальные – выравниваются по-центру и там проблем на порядок меньше.

Проделав все вышеописанные действия, вы научитесь правильно добавлять картинку на свой блог.

На сегодня это все.

Желаю удачи!