Регистрация Войти
Вход на сайт
» » DLE - обтекание текстом картинки в новостях

DLE - обтекание текстом картинки в новостях

Просмотров: 8419
Комментариев: 2
Версия для печати

При написании и редактировании новостей в системе DataLife Engine для красивого оформления часто требуется сделать так,чтобы текст обтекал картинку справа. Согласитесь, что визуально статья с подобным выводом материала смотриться доволно красиво. Разумеется, текст не должен быть вплотную  приближен к картинке. Для красивого оформления новости между картинкой и текстом должен быть какой-то промежуток (пробел в 3, 5, 10 px). Вывод картинки в статье осуществим с помощью тега движка [thumb], т.е при нажатии на уменьшенную копию картинки открывается ее увеличенный вариант, что достаточно удобно для пользователей сайта. Иными словами, задача сводится к следующему (см. рисунок ниже):

DLE - обтекание текстом картинки в новостях

К сожалению, с помощью стандартного редактора WYSIWYG сделать подобное в DataLife Engine не получится. Текст вплотную "прилипнет" к картинке без каких-либо отступов. Смотрится это весьма некрасиво. Решение проблемы таково:
При выставке картинки выбирайте выравнивание по левому краю, т.е. [thumb=left]. Отступы между картинкой и текстом настраиваются в CSS файле Вашего шаблона.
Для примера:
Шаблон "Pisces", класс, отвечающий за оформление картинки в статье ".maincont img".
В CSS шаблона (styles.css, строка 281) было:

.maincont img { padding: 5px;border: none; }

Добавляем свойство margin:
.maincont img { padding: 5px;border: none; margin: 0 10px 10px 0; }

здесь отступ между картинкой (правый и нижний край) равен 10px, соответственно отступы вверху и слева равны 0.
Уменьшенную копию в статье выравниваем по левому краю:

[thumb=left]
Адрес_картинки
[/thumb]

Получаем:
Интерны 10 сезон

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


Рейтинг статьи:
  
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.
Комментарии (2)
Алексей 17 августа 2016 06:49
Спасибо вам огромное, очень помогли. Удачи!
Цитировать          1
SL595 5 мая 2017 14:15
Спасибо! помог...
Цитировать          2
Оставить комментарий
Ваше имя: *
Ваш e-mail: *
Текст комментария:
Полужирный Наклонный текст Подчёркнутый текст Зачёркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите проверочный код (защита от спама):
код: ----