Урок 4 — Добавляем картинку

Запись создавать вы научились (времени было достаточно). Теперь разберем, как в нее добавлять картинку.

Изображения — важнейшая деталь любой записи. Посетители не читают, а просматривают сайт! Голый текст скучно читать.

Убедил? Тогда приступим.

Вы написали запись (пост) и хотите добавить картинку.

Начнем с того, что ее нужно подготовить и перевести в формат JPEG, GIF или PNG.

Это «сжатые» форматы, сделанные специально для снижения размера файла и повышения скорости его скачивания.

JPEG — подходит для фотографий и многоцветных изображений.

GIF — удобен для схем, карт (где мало цветов и оттенков). Позволяет делать картинки с прозрачным фоном.

PNG — позволяет делать многоцветные изображения с прозрачным фоном, но при этом размер файла обычно больше, чем у JPEG.

Где, чем и как подготовить изображение — на этом уроке рассказывать не буду. Сам использую удобный и бесплатный GIMP. Про него буду писать отдельный курс.

Сегодня для примера возьмем любую картинку. Например эту.

Скачайте изображение на рабочий стол. Кликните по картинке правой кнопкой мыши и в выпавшем контекстном меню выберите «Сохранить как…» (надпись может отличаться).

Запись у вас уже есть. Если нет — создайте.

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

В записи ствим курсор туда  куда поставим картинку.

Теперь все готово для добавления изображения.

Между полем с заголовком и полем с текстом нашей записи есть строчка «Загрузить/вставить». Правее мы видим 4 пиктограммы. Наведите на них мышкой и прочитайте всплывающие подсказки.

Как видите самая первая и есть то, что нам нужно — «Добавить изображение». Три остальных пока оставим в покое (я ими не пользуюсь и вам не советую).

Кликаем по пиктограмме «Добавить изображение».

В появившемся окошке остановимся на вкладке «С компьютера» (остальные пока оставим в покое).

Выбираем файл с нашей картинкой (если вы брали из примера — она на рабочем столе и называется primer.gif), кликаем «Открыть».

Теперь мы видим свойства изображения.

Перечислю:

1. Имя файла. С этим все ясно. Не заполняется.

2. Тип файла. В нашем случае image (т.е. картинка)  / gif (писал о нем выше). Не заполняется.

3. Дата загрузки. Тоже понятно. Не заполняется.

4. Размеры. Ширина x Высота. Не заполняется.

5. Заголовок. Выводится во всплывающей подсказке при наведении. Заполняйте обязательно!

6.  Текст — отображается если показ картинок отключен.

7. Подпись — выводится под картинкой.

8. Описание. Ясно из названия.

9. Ссылка. Тут есть 3 варианта:

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

10. Размер. Тут есть 4 варианта:

• Миниатюра. Сильно уменьшеный и обрезаный до квадрата вариант загруженой картинки. Если и использовать, то с пунктом «Ссылка на файл» (см. п.9).
• Средний. Уменьшеный (обычно до размеров хорошо вписывающихся в страницу по ширине) вариант картинки.
• Большой. Не рекомендую. Вариант расчитаный по ширине на «влезание» в стандартный экран. На сегодня это 1024 px., но рекомендую ставить 1000 px.
• Полный. Тот вариант, в котором загрузили. Если больше Среднего — используйте Средний с пунктом «Ссылка на файл»(см. п.9).

Когда все нужные свойства заполнены — жмем кнопку «Вставить в запись».

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

Выравнивание вправо или влево прижмет картинку к соответствующему краю страницы и заставит текст обтекать ее.

Выравнивание по центру кроме всего запрещает ее обтекание текстом (как на этой странице).

Вот и все. Сам процесс занимает несколько секунд.

PS Картинку при подготовке лучше отмасштабировать не более 1000px в ширину. И хотя это можно сделать потом, уже средствами WordPress, лучше все-таки заранее в хорошем редакторе.