Вход • Регистрация

Прикручиваем Bootstrap к Diafan

  • 22 июня 2018 г. , редакция: 22 июня 2018 г.
  • Здравствуйте. Возник вопрос. Когда мы добавляем картинки через админку Диафана (особенно большие), то они не адаптируются под мобильные устройства, т.к. в бутстрап к тегу <img> всегда добавляется класс img-responsive для таких целей. Можно сделать как-нибудь в диафане, чтобы он автоматически вставлял этот класс всем фотографиям занесенным через контент в админке?
    Техподдержка Diafan предлагает пойти таким путём (файл /includes/template.php):
    public function htmleditor($text)
    {
    $text = $this->diafan->_route->replace_id_to_link($text);
    $text = str_replace('<img', '<img class="img-responsive"', $text);
    return $this->diafan->_parser_theme->get_function_in_theme($text);
    }

    Но как-то через раз у меня работает :)
  • 22 июня 2018 г.
  • Не проще ли прописать стиль для блока с контентом

    Например,

    .content img {
    max-width: 100%
    }
    • 22 июня 2018 г. , редакция: 22 июня 2018 г.
    • Приходило в голову, но это как-то не аккуратно . Этот глобальный CSS-код может "забрать" фоточки, которые совсем не нужно трогать. Например мы модуль закрепили в данный раздел и фоточки модуля тоже станут max-width: 100%.
      • 22 июня 2018 г.
      • Никто не мешает создать класс img-responsive и добавить его в style.css
        И вставляйте его где хотите

        в bootstrap тот же подход как написал Александр
        https://s.mail.ru/HHzt/w6r44VmTj
      • 23 июня 2018 г.
      • Есть в /themes/functions/ файл show_text.php этот шаблонный тег отвечает за вывод контента на страницу и подключается в show_body.php так вот кастомизируйте его - обрамите контент текстовый в слой допустим div.page__text, ну а потом, как писал Александр
        Код
        .page__text img {
        max-width:100%;
        height: auto;
        }
        • 04 июля 2018 г. , редакция: 06 июля 2018 г.
        • Я примерно так обычно и делаю. Но есть загвоздка.
          Допустим я пользуюсь альтернативными тегами вместо show_body вставляю по отдельности:
          <insert name="show_h1">
          <insert name="show_text">
          <insert name="show_module">

          Последний подтягивает модуль. Допустим это новости. Нельзя обрамить этот тег целиком блоком с каким-то классом, который будет фоточки адаптивить, ибо пострадают "невинные" фоточки из списка новостей (изображение новости). Нужно обрамлять только то, что подтягивается в контент из визуального редактора в админке.
          Т.е. получается мне нужно лезть в КАЖДЫЙ модуль и там обрамлять этим блоком вывод описания в КАЖДОМ view - файле. Все это как-то накладно. Но ничего больше я не придумал

          Только так у меня "невинные" фоточки не унаследуют max-width:100%; и height: auto;

          Пример файл

          Код
          Код CSS
          .page__text img {
          max-width:100%;
          height: auto;
          }


          Код в файле new.view.list.php
          Код

          //краткое описание подкатегории
          if($child["anons"])
          {
          echo '<div class="page__text">'.$child['anons'].'</div>';
          }

          И по такому принципу нужно делать в каждом модуле.

          Можно ли как-то "обрамлять" или подставлять класс img-responsive только в фотки, которые подтягиваются из визуального редактора админки?

Новости

  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 

Форум