Whitesquare logo

Как добавить изображение на статическую страницу или в новость

23.05.2024

Как добавить изображение на статическую страницу или в новость

При работе с сайтом есть возможность добавлять изображения несколькими способами. Например, через поля "Детальное изображение" или "Изображение для анонса" при добавлении новости. Или, в том случае если изображений много и они подходят под общую тематику - через раздел Фотогалерея или галерею под новостью. Метод добавления описанный ниже подходит для иных случаев.

  1. Перейдите на сайт imgbb.com, пройдите регистрацию по ссылке
  2. Нажмите на кнопку "Загрузка" и выберите изображение для загрузки. Загрузите выбранное изображение.

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

  3. На следующей странице необходимо выбрать данный вариант получения ссылки на изображение

    В полученном HTML-коде нужно скопировать строку, подчёркнутую красным.

    Для дальнейшей вставки на Ваш сайт нам необходимо скопировать только её (например, https://i.ibb.co/mhVHnYz/image.jpg), притом сами кавычки копировать не надо
  4. Перейдём на ту страницу, где необходимо разместить изображение. Выберите изменение страницы в режиме визуального редактора

  5. В появившемся окне нажмите на пиктограмму изображения

  6. Вставьте в строку "Источник изображения" ссылку на изображение из пункта 3, которая помечена зелёным

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

    Рассмотрим эти настройки более подробно:

    Поле Описание поля
    Источник изображения То место, где физически находится изображение. В представленном примере изображение находится на сайте imgbb.com, но при необходимости источник может располагаться в ином месте. Поле обязательно для заполнения
    Размер (100%, 90% и т.д.) Вы можете уменьшить изображение пропорционально указанным процентным показателем. По умолчанию - 100%
    Ширина и высота Вы можете указать свои собственные параметры ширины и высоты изображения. Однако необходимо сохранять осторожность - неправильно указанные размеры приведут к перекосу изображения - оно будет или "растянутым", или "сплюснутым". По умолчанию показатели ширины и высоты соответствуют значениям изображения загруженного на сайт imgbb.com
    Выравнивание Позволяет выровнять изображение на странице и, соответственно, настроить его "обтекание текстом". Для примера: если поставить параметр выравнивание: слева, то изображение "прижмётся" к левой части страницы, а имеющийся текст на странице будет "обтекать" изображение справа
    Атрибут Alt Вы можете указать текст, который будет отображаться при наведении курсора "мыши" на изображение
    CSS класс Данный атрибут позволяет настроить особые параметры отображения картинки на сайте, отличающиеся от общих стилей сайта. Заполнение этого поля не рекомендуется, просим оставить его пустым
    Ссылка на изображении Вы можете в данном поле указать ссылку на иную страницу сайта или на другой сайт. При нажатии на изображение пользователь сайта перейдёт на эту страницу в сети Интернет. При нажатии на пиктограмму со ссылкой (), вы можете настроить параметры перехода на иной сайт. Но в подавляющем большинстве случаев это не требуется.

    После завершения редактирования изображения нажмите на зелёную кнопку "Сохранить" для сохранения настроек или нажмите на кнопку "Отменить" для удаления внесённых правок


Возврат к списку