ПромоТуризмИскусство

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

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

Перед Вами появится окно менеджера изображений.

menedjer kart

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

Давайте попробуем загрузить новое изображение, для этого кликнем по иконке "Загрузить" в окне менеджера изображений.

Перед нами появится новое окно, в поле которого ("Перетащите файлы сюда") можно перетащить желаемые для загрузки изображение (Ваш браузер должен поддерживать AJAX технологии) или нажать на кнопку "Обзор" и выбрать нужные изображения в проводнике Вашей операционной системы.

menedjer kart2

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

Важно: не используйте для загрузки файлы с не латинскими символами, а так же не используйте пробелы (рекомендуется использовать латинские буквы, цифры, а так же символы "-" и "_").

Для того, что бы вставить изображение - выберите его в браузере файлов и нажмите кнопку "Вставить".

Но помните, что изображение будет вставлено в его оригинальном размере и с настройками форматирования по-умолчанию.

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

Рассмотрим основные варианты свойств в менеджере изображений.

  • Ссылка - относительное расположение изображения, файла, статьи или документа (например: image.jpg).
  • Текст - краткое описание изображения (нужно для поисковых систем для поиска по картинкам).
  • Размеры - ширина и высота элемента в пикселях (если стоит галочка "пропорционально" то изменив величину одного из полей и нажав enter - значение во втором поле подсчитывается автоматически пропорционально первому). Также в это поле можно добавить значение с процентом, например: 100%. Перед этим предварительно снимините замочек. Нужно для длинных изображений в высоту.
  • Выравнивание - позиция элемента на странице или в связи с другими элементами.
  • Отступ - пространство между элементом и соседними элементами или текстом (если снять гаочку "равны" то можно задать значение для каждой стороны индивидуально).
  • Границы - создает рамки вокруг элементов с выбранными параметрами.

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

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

Что бы изменить настройки или заменить изображение - кликните по нему (при этом загорится иконка "Добавить / Изменить изображение") и нажмите на уже знакомую иконку 61 вставки изображения. Перед Вами снова откроется менеджер изображений, в котором Вы сможете изменить настройки.

Так же, кликнув по вставленному в текст изображению в визуальном редакторе - вокруг изображения появится рамка с квадратиками, потянув за один из квадратиков - Вы можете менять размер изображения в реальном времени (что бы размер менялся пропорционально - зажмите клавишу Shift на клавиатуре).

Для каждого пользователя автоматически создаётся отдельная личная папка. К Вашей личной папке доступ есть только у Вас и администратора сайта. 

Внимание: Не удаляйте изображения загруженные ранее для другой статьи, которая уже опубликована! Картинки не дублируются и так же будут хранится в вашей папке даже после публикации.

Внимание: не загружайте на сайт через чур большие изображения, перед загрузкой на сайт - изображения лучше всего уменьшить на компьютере. Рекомендуемый размер 900*600px, в противном случае ваша статья не пройдет модерацию!

Для физического уменьшения размера изображений на компьютере Вы можете воспользоваться бесплатной утилитой Light Image Resizer или стандартным "Paint"-ом.

 

Альтернатива (динамичная картинка)

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

Альтернативное изображение является изображение, которое изменяется, когда курсор мыши находится над ним. Вот пример:

Rollover

Окно настройки альтернативного изображения

tabl5

  • "Курсор мыши +" - Представляет атрибут события Mouseover. Это изображение отображается, когда курсор мыши находится над изображением.
  • "Курсор мыши -" - Представляет атрибут события MouseOut. Это изображение отображается, когда курсор мыши уходит за его пределы.

Как создать:

  1. Выберите изображение, которое должно быть изображением по умолчанию, то есть то, которое отображается в статье.
  2. Перейдите на вкладку "Альтернатива".
  3. Выберите изображение, которое вы хотели бы видеть при наведение мыши.
  4. Теперь вы можете вернуться на вкладку "Изображение" и настроить параметры этого изображения.
  5. Нажмите кнопку "Вставить".

Чтобы удалить Альтернативное изображение, удалите содержимое поля "Курсор мыши +" на вкладке "Альтернатива".

Расширенные настройки

Вкладка "Расширенные" содержит дополнительные атрибуты изображения.

tabl6

  • Стиль - Представляет атрибут стиля. Будет заполняться стилями, установленными на вкладке "Изображение" (margin, float и т.д.). Дополнительные стили могут быть добавлены с помощью синтаксиса элемента, например (выравнивания текста): text-align:right;vertical-align:middle;
  • Классы - Дополнительные CSS классы, чтобы применить к изображению. Это поле оставляйте пустым.
  • Название - Представляет атрибут заголовка. Используется в качестве описания изображения.
  • Id - уникальный идентификатор для изображения. Оставляйте это поле пустым.
  • Направление - Направление текста элемента, например в названии. Оставляйте это поле без изменений.
  • Код языка - код языка элемента, для мультиязычности статьи. Оставляйте это поле пустым.
  • Карта изображения - Идентификатор связанного карты изображения, например #map. Оставляйте это поле пустым.
1 1 1 1 1 1 1 1 1 1 Рейтинг 0.00 [0 Голоса (ов)]
Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Случайные статьи

{kavatar)

Подборка юмористических мини комиксов от Лося(losj) Выпуск №3

Подборка оригинальных сатирических мини комик...

Подробнее...
{kavatar)

Подборка видео уроков по рисованию

Смотрим и рисуем! ...

Подробнее...
{kavatar)

Талантливый человек талантлив во всем: Лоренцо Бернини

«Я победил мрамор и сделал его гибким, как во...

Подробнее...
{kavatar)

Подборка косплея Katyuskamoonfox

Подборка фотографий косплейщицы Katyuska Moon...

Подробнее...
{kavatar)

Комикс "Tales of Pestilence" или "Чумной доктор" Выпуск №3

Третья часть странного и жуткого комикса, пов...

Подробнее...
{kavatar)

Притча о заносчивости: «Горы у моря»

Тысячи ручьёв, рек, потоков и водопадов берут...

Подробнее...
{kavatar)

Альбом от R-khan - "Великая Степь: Дешт-И-Кипчак"

Треки реп-исполнителя R-Khana из альбома "Вел...

Подробнее...
{kavatar)

Косплей по А2(NieR) от Оли Баль

Страница её ВК тут ...

Подробнее...
{kavatar)

Слепи себя сам: история Анны Марии Тюссо.

12 декабря (в других источниках 1 или 7 декаб...

Подробнее...

Поиск

Счетчики

 

 

Яндекс.Метрика