Вордпресс: как добавить изображение

urok-3В этом посте Самоделкин познакомит нас как вставить в пост изображение. Часто возникают вопросы по вставке изображения, то картинка не в то место стала, то размер надо изменить, то отступа от текста нет, то рамку вставить не получается, то анимированное изображение — выглядит как обычная jpeg-картинка.

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

Поэтому сегодня начнём с того, как правильно добавлять изображения в посты на   WordPress-блог.

Итак, мы с вами в админке, в  визуальном режиме , в  WYSIWYG-редакторе. И в левом верхнем углу, рядом с надписью «Загрузить/вставить», мы видим 4 иконки. Сейчас нас будет интересовать — первая из них — добавить изображение:ikonka

После нажатия на эту иконку открывается окно нагрузки файла:

s-kompyutera

При загрузки с компьютера, нажимаем на кнопку «Выбрать файл» и находим на компьютере необходимое изображение. После загрузки изображения на наш хостинг, мы можем его редактировать и менять положение в материале. Если  надо откорректировать уже загруженное в пост изображение, наводим курсор на него, и видим две иконки. Первая — редактировать изображение,  вторая — удалить из статьи:

redaktirovanie

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

redaktor

Заголовок —  этот текст отображается в виде всплывающей подсказки, при наведении мыши на опубликованное изображение.

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

Подпись — заголовок изображение отображается непосредственно под изображением (также служить в качестве альтернативного текста).

Не забываем сохранять/обновлять.

В раскладке «дополнительно«, мы можем изменить размер не только в процентном соотношении, но и в ручную поменять ширину и высоту. А также поменять свойства картинки, при необходимости довавить рамку, и задать отступ текста по вертикали и горизонтали, чтобы изображение не сливалось с текстом. Я обычно отступы задаю — 15 пикселей, рамку — 1. Экспериментируйте, смотрите что вам надо, и как больше нравится.Dopolnitelno

Обратите внимание на окно «источник», данное изображение gif-формата. И при загрузки самодельных анимированных изображений у меня периодически  в «хвостик», перед расширением добавляется размер изображения. Скажите: «Ну и что здесь такого?» Вот этот самый размерчик в хвосте ссылки не дает gif-изображение отображаться в анимированном виде, картинка становится статичной. Чтобы исправить ошибку, достаточно просто удалить этот самый хвостик, который выделен желтой рамкой. Подробнее это рассматриваю здесь.

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

s-sayta

При загрузки с библиотеки мультимедиа, этим способом можно пользоваться, если изображение уже выло ранее закачено на хостинг.biblioteka-faylov

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

Смотрим видео каст «Блог на WP: вставляем изображение»:

Здоровья и процветания.

С уважением, Ольга Батырева

Вордпресс: как добавить изображение: 5 комментариев

  1. Оля, спасибо за подробный урок! Хочу добавить также, что при установке изображения я всегда прописываю и описание, и альтернативный текст — желательно с каким-то ключевым словом. Подпись — это по желанию, это использую редко.
    Картинки с анимацией пока не ставила, поэтому спасибо за фишки, пригодятся!

  2. Ольга, а подскажите, пожалуйста, как сделать, чтобы изображение не открывалось в новом (или этом же) окне, а его можно было увеличить, наведя на него мышку?
    Заранее СПАСИБО!!!
    Подписалась на бесплатную книгу, жаль по срокам не успела получить бесплатное видео…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *