Добавление картинок и файлов в DLE
работа с картинками в DLE

Добавление картинок и файлов в DLE

Nikel, 05.11.2013

Как загружать картинки в DLE и вставлять их в статью

Заходим в редактирование статьи, нажимаем кнопку с изображением папки(загрузка файлов на сервер) .

папка загрузки

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

загрузка картинок

Также стоит отметить еще один интересный вариант загрузки из папки uploads/files, так можно переместить ваши файлы в другую папку(/uploads/posts/).

Ниже расположены некоторые настройки, которые мы можем менять прямо из этого окна, они дублируют основные настройки картинок, расположенные в админпанели (Главная –список всех разделов-настройки системы-Настройка работы с изображениями) и по умолчанию имеют параметры, указанные там. Однако, использование этих настроек дает нам определенные преимущества, так как позволяет задавать отдельные настройки для каждой группы уменьшенных картинок.

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

оригинальное изображение

Также можно здесь скопировать ссылку на картинку для каких-то своих целей, можем например вставить ее в шаблон. Рассмотрим такую ссылку/uploads/posts/2013-05/1368699738_flaer-02.jpg

Все картинки движок загружает в папку /uploads/posts/, можно сказать, что это папка специально для картинок, в ней создается подпапка, именем которой будет дата загрузки картинок, а в этой папке будут полноразмерные картинки и папка с их уменьшенными копиями thumbs.

Аналогично загружаются и другие типы файлов(если они разрешены в настройках), кроме картинок, dle автоматически перенаправляет их в папку uploads/files, только они отображаться будут в виде вложений (аттачментов) и пользователи увидят ссылку на скачивание этого файла.

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

Теперь настало время рассмотреть какие параметры мы можем задавать для картинок и файлов из административной панели.

Заходим (Главная –список всех разделов-настройки системы-Настройка работы с изображениями)

И смотрим настройки (некоторые мы уже видели в окне загрузки файлов и картинок)

  • Максимально допустимые размеры оригинального изображения – DLE может автоматически уменьшать оригинальный размер картинки до заданного. Этого можно добиться двумя способами, первый — указать требуемый размер любой стороны, второй — задать ширину и высоту оригинального изображения в формате ширина x высота, 0 – размер картинки не изменяется.
  • Параметры по умолчанию для оригинального изображения – т.е. по какой стороне будет проверка(и соответственно уменьшение) размеров изображения – по наибольшей стороне, по ширине, по высоте
  • Максимально допустимый вес изображений, загружаемых для публикаций – какой максимальный вес картинки в килобайтах допустим для загрузки.
  • Автоматическое удаление изображений – через сколько дней картинки, загруженные на сайт для статьи будут удалены, в случае если она не будет опубликована. Если ничего не указано, изображения удаляться не будут.
  • Размер уменьшенной копии загруженного изображения – есть два варианта задания размера: указать требуемый размер любой стороны, второй — задать ширину и высоту в виде ширина x высотаПараметры по умолчанию для создания уменьшенной копии изображения – по какой стороне будет производится ресайз уменьшенной копии изображения (наибольшей стороне, ширине,высоте)Качество сжатия .jpg изображения – в каком качестве картинка будет скопирована на серверМаксимально допустимый вес аватаров, загружаемых пользователем в профиле – сколько в килобайтах будет допустимый вес аватаров.0- ограничение снимается, 1 – запрет на загрузку аватаров.

Настройки водяных знаков

  • Разрешить наложение водяных знаков – нужно ли накладывать водяные знаки на изображение
  • Минимальный размер для накладывания водяного знака – для картинок со стороной меньше какого размера водяной знак накладываться не будет

Наложение водяного знака в DLE

Как задать водяной знак? Стандартные водяные знаки с логотипом DLE находятся в папке dleimages по адресу ваш_сайт.ru/templates/имя_вашего_шаблона/dleimages. Здесь нам нужно заменить два файла watermark_dark.png и watermark_light.png на свои собственные картинки, предварительно нарисованные в каком-либо текстовом редакторе, например в Adobe Photoshop. Они будут лучше смотреться, если сделать их полупрозрачными. Можно сделать их такого же размера как водяные знаки по умолчанию, либо задать свой размер, важно только соблюсти следующие правила: размер водяного знака не должен превышать размер картинки и оба наших вновь созданных водяных знака должны быть одинакового размера.

Настройки показа увеличенных изображений из миниатюр

  • Автоматическое затемнение сайта при показе оригинального изображения – будет ли затемняться фон сайта при показе большого изображения(при нажатии на миниатюру)
  • Вид оригинального изображения при увеличении из уменьшенной копии – оригинальное изображение показывается в браузере виде модального окошка (c помощью js-плагина Highslide, подключаемого в DLE по умолчанию, он существует и отдельно от нашего движка, распространяется бесплатно, это своего рода аналог lightbox), здесь можно задать некоторые визуальные эффекты для этого изображения ( тень, рамка, закругленные края).
  • Режим галереи при просмотре уменьшенных изображений – да/нет ( включено или выключено) при просмотре больших изображений из уменьшенных копий, на изображениях будет выводится навигация, будет режим слайдшоу.

Иногда можно столкнутся с проблемой, что режим галереи в DLE не работает — не выводится панель навигации на всплывающей картинке. Дело в том, что скрипт highslide.js подключается автоматически (можно обнаружить, если открыть исходный код в браузере) , кроме того должны проинициализироваться его некоторые параметры, они приведены ниже. Проверьте, что это присутствует в коде вашей страницы.

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

Если покопаться в файлах движка, то мы обнаружим, что вывод этих параметров определяется такими строчками кода в файле index.php, расположенном в корне сайта.

Теперь можем, изменяя этот код, настроить вывод картинок на свой вкус.

  • hs.align отвечает за позицию полноразмерной картинки, может принимать параметры center (по центру в браузере) либо auto (центр большой картинки при ее открытии совпадает с центром маленькой).
  • hs.dimmingOpacity — создает популярные лайтбокс эффект затемнения / осветления фона. По умолчанию прозрачность .75.
  • hs.numberPosition — показывает номер текущего изображения в последовательности (например, Изображение 1 из 5) Может принимать значения ‘heading’ — отображается вверху, caption -отображается внизу. Точная строка задается в объекте hs.lang(он содержит строки локализации). В том же файле index.php находим строку hs.lang = { и дописываем в конец параметр — number : ‘Изображение %1 из %2’ (после предыдущего параметра не забываем ставить запятую);
  • hs.addSlideShow — функция задающая параметры для режима галереи(картинки сгруппированы и имеют общую панель навигации)
  • interval — количество миллисекунд, которое будет показываться каждый слайд. (по умолчанию 4000)
  • repeat — повторение (начинать с первого слайда после перехода к последнему) (по умолчанию false)
  • useControls — разрешить Highslide создать панель управления слайдшоу (true или false)
  • fixedControls -если истинно, панель управления зафиксирована, элементы управления находятся в одном положении в течение просмотра всех картинок и пользователь может просматривать изображения с помощью кнопки Далее не перемещая мышь (true или false)
  • overlayOptions -параметры наложения для панели управления (объект)
  • opacity -прозрачность панели(по умолчанию .75),
  • position -положение панели управления по вертикали (top, middle, bottom) и горизонтали (left, center,right) (по умолчанию ‘bottom center’)
  • hideOnMouseOut — скрывать панель управления, когда мышка не находится на картинке (по умолчанию true)

Далее меняем внешний вид панели навигации. Для этого открываем файл engine.css ( templates/Default/style/engine.css, вместо Default подставьте при необходимости имя вашего шаблона). Ищем строки 423, 432, 447 (.highslide-controls, .highslide-controls ul, .highslide-controls a соответственно) и заменяем в background url controlbar-black-border.gif (по умолчанию черная панель управления) на controlbar-white.gif — белая контрольная панель.

Способы задать миниатюру для статьи

Миниатюру для статьи можно задать просто вставив картинку в начале текста статьи. Однако нужно следить, чтобы везде было одинаково, применены одинаковые стили и если нужно например заключить миниатюру в ссылку на статью, адрес статьи придется указать вручную.

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

Сначала укажем в шаблоне shortstory.tpl нашу миниатюру

где [full-link] — ссылка на полную статью

{title} — заголовок статьи

[xfvalue_thumbinail] — дополнительное поле для задания миниатюры

Настройка загрузки файлов на сервер

Тут настроек не так уж много.

Разрешить загрузку файлов на сервер – разрешено ли загружать на сервер другие типы файлов помимо изображений(Да/Нет).

Раньше можно было перечислить типы файлов, разрешенных к загрузке, теперь(в новых версиях) эта возможность перенесена в раздел Настройка групп пользователей и задается отдельно для каждой группы пользователей. Подробнее читайте в статье Управление пользователями DLE.

Максимальное количество файлов при массовой загрузке – сколько одновременно файлов разрешено выбрать и поставить в очередь на скачивание

Включить поддержку докачивания файлов при скачивании – разрешена ли докачка файлов при разрыве соединения

Включить счетчик скачиваний файла – отображение информации: сколько человек скачали этот файл.

Ну пожалуй на этом все! Спасибо, что дочитали до конца. До новых встреч!
Как обычно, смотрим видео

2 комментариев


    • Дима
      Cancel Replay
    • Октябрь 27, 2015

    Здравствуйте. Спарсил сайт, страниц 150.Закинул на сайт DLE 9.8.На главной странице всё нормально: изображение, описание.Но с 11 новости,т.е. со 2-й страници нигде изоб. нет. В чём может быть причина.Пробывал местами менять,стоит только у тех, которые на главной.В редакторе, у всех новостей всё нормально, проверил. DLE с рабочим RSS нашёл только для 9.8, на остальных через этот модудь ничего не загружает. Какие настройки исправить?

    • Дмитрий
      Cancel Replay
    • Март 30, 2016

    Как убрать отображение размера загруженного файла например: dohod-2014.rar [12,86 Kb]