Как размещать картинки на сайте

24 марта 2023

Категории
Категории
Администратор
  • 2 мин
  • 289

Вкладка «Картинка» — поле для добавления изображения на сайт.

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

После загрузки изображения перед вами выводятся поля для редактирования изображения либо можно «Использовать оригинал без изменений»

Поля для редактирования:

1. Редактор:

  • Размер оригинала — используем навигацию, выделяем необходимую область;
  • Соотношение сторон — формат изображения;
  • Подогнать — увеличение области изображения:
    • По высоте —  выбор вертикального соотношения сторон;
    • По ширине — выбор горизонтального или квадратного расположения изображения.

2. Композиция — используется для вывода изображения и подписи к нему.

Веб-страница делится «незримо» на 4 колонки, и относительно этого разделения заполняются дальнейшие поля редактирования.

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

  • Ширина картинки — расположение изображения по ширине. Выбор из 2, 3, 4 колонок.
  • Положение картинки — расположение изображения отностительно экрана. Активность кнопок слайдера зависит от выбранной Ширины картинки. Если положение картинки на всю ширину, то положение картинки возможно только по центру и т. п.

    Кнопки слайдера:
    • слева
    • по центру
    • справа
  • Положение подписи — расположение описания отностительно изображения. Активность кнопок слайдера зависит от выбранной Ширины картинки и Положения картинки. Если выбрано положение картинки на всю ширину, то положение подписи возможно только снизу — под изображением.

    Кнопки слайдера:
    • слева
    • снизу
    • справа
  • Выравнивание подписи — выравнивание текста по краям левому и правому или по середине.

3. Действие — возможность при клике на изображение получить функционал:

  • Без действий — картинка статична на странице, при нажатии ничего не происходит;
  • Увеличить — при клике на картинку изображение увеличивается для просмотра;
  • Ссылка — в поле для ссылки вносим URL — внешняя или внутренняя ссылка. При клике на изображение будет осуществлен переход по ссылке.
  • Форма — поле для выбора формы. При клике на изображение откроется форма. Описание добавления формы можно посмотреть здесь.

4. Данные — раздел для внесения текстовых данных:

  • Подпись — описание изображения для композиции;
  • Всплывающия подсказка (title) — для поисковиков и пользователей, если картинка не оторбразилась;
  • Альтернативный текст (alt) — для поисковиков;
  • Путь до картинки — поле для замены изображения.

5. Статус блока:

  • Включить — вывести на страницу сайта;
  • Выключить — не выводить на страницу сайта.

Пример блока Картинка: