Лучшее решение для создания поля изображения в фоновом режиме?

В Drupal 7 я хочу повернуть свое поле изображения в представлениях, чтобы выглядеть как-то вроде

<div style="background-image:url([field_someimgefield_image]);"></div>

, поэтому я могу применить эффект прокрутки JQuery Parallax. Тем не менее, я не могу получить полный «абсолютный путь» к моему изображению, даже я использую «абсолютный путь» на свойствах «выводить это поле как ссылку» и «разделять HTML-теги». Все, что у меня есть, это имя файла, а не полный абсолютный путь.

Еще одна проблема, с которой я столкнулся, - это «Глобальный: Пользовательский текст» в полях, у нее нет опции текстового фильтра, поэтому я не смог бы написать вышеприведенный код.

До сих пор я нашел только « BackgroundField " для замены. Кто-нибудь знает лучшее решение для фонового изображения div?

PS: трюк CSS только делает его похожим, они совершенно разные.

------ обновить информацию 2 февраля 2015 года: 12:58 вечера ---

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

------ обновление информации 2 февраля 2015: 02:46 вечера ---

Похоже, что BackgroundField "модуль, о котором я упоминал выше, похож на Фоновые изображения , который тоже не работает.

6 голосов | спросил CocoSkin 2 FebruaryEurope/MoscowbMon, 02 Feb 2015 19:20:18 +0300000000pmMon, 02 Feb 2015 19:20:18 +030015 2015, 19:20:18

4 ответа


4

Существует также Фоновый рисунок :

  

Фоновые изображения - это набор модулей, который позволяет пользователям добавлять   фоновые изображения для элементов html на страницах сайта.

Существует также подмодуль группы полей для поддержки фонового изображения, называемый Фоновый образ группы полей :

  

Этот модуль создает формулятор отображения группы полей, который состоит из    обертка с фоном.

     

Фон может быть установлен из:

     
  • Поле изображения отображаемого объекта
  •   
  • Цветовое поле (из Color Field или jQuery Colorpicker)
  •   

Этот модуль можно использовать рядом   Display Suite, и особенно полезно для создания пользовательских   Панели панелей с полевыми панелями.

Вы упомянули прокрутку параллакса ... Я знаю, что это такое, мне никогда не приходилось его реализовывать - вы можете попытаться использовать Parallex Background :

  

Это простой модуль, который позволяет установить вертикальный эффект Parallax на   фон любого элемента в DOM.

Я предлагаю вам больше работать над вашими навыками Google-fu.

ответил tenken 2 FebruaryEurope/MoscowbMon, 02 Feb 2015 20:26:05 +0300000000pmMon, 02 Feb 2015 20:26:05 +030015 2015, 20:26:05
3

Вместо использования одного из этих модулей вы можете переопределить вывод поля через функцию темы следующим образом:

    function MYTHEME_field__field_someimgefield_image($variables) {
        $output = '';

        // Render the label, if it's not hidden.
        if (!$variables['label_hidden']) {
            $output .= '<div class="field-label"' . $variables['title_attributes'] . '>' . $variables['label'] . ':&nbsp;</div>';
        }

        // Render the items.
        $output .= '<div class="field-items"' . $variables['content_attributes'] . '>';
        foreach ($variables['items'] as $delta => $item) {
            // Generate styled background image.
            $img_uri = $item['#item']['uri'];
            $img_style = $item['#image_style'];
            $bg_img = image_style_url($img_style, $img_uri);
            $classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even');
            // Write image url to inline css and drop the rendered item.
            $output .= '<div class="' . $classes . '"' . $variables['item_attributes'][$delta] . ' style="background-image:url(' . $bg_img . ')"></div>';
        }
        $output .= '</div>';

        // Render the top-level DIV.
        $output = '<div class="' . $variables['classes'] . '"' . $variables['attributes'] . '>' . $output . '</div>';

        return $output;
    }

В вашем представлении включите «Использовать шаблон поля» в настройках стиля поля. Таким образом, Views отобразит ваше поле через функцию темы выше. Конечно, вам нужно будет дать поле ширину и высоту, чтобы сделать фоновое изображение видимым.

ответил Konstantin 5 FebruaryEurope/MoscowbThu, 05 Feb 2015 20:51:09 +0300000000pmThu, 05 Feb 2015 20:51:09 +030015 2015, 20:51:09
2

Вам может понадобиться Image URL Formatter .

  

Этот модуль добавляет [s] форматировщик URL для поля изображения. Затем вы можете напрямую выводить URL-адрес изображения.

Работает с представлениями. Это даст вам дополнительный выбор «Formatter», который должен сказать что-то вроде «Путь к изображению» или «URL-адрес изображения».

Кроме того, что касается «Global: Custom text», я думаю, что это означает ПОЛНЫЙ HTML, но он запускается через filter_xss и другие различные дезинфицирующие средства. Таким образом, вы можете поместить HTML непосредственно в поле, вам не нужен текстовый фильтр ввода.

ответил Beebee 2 FebruaryEurope/MoscowbMon, 02 Feb 2015 20:43:55 +0300000000pmMon, 02 Feb 2015 20:43:55 +030015 2015, 20:43:55
0

Возможно, модуль Dynamic Background - это то, что вам нужно, поскольку оно позволяет настроить таргетинг на div? У него также есть удобный контекстный фон для настройки фонов на основе контекста для таких вещей, как даты, пути и т. Д. https://www.drupal.org/project/dynamic_background

ответил deanflory 4 FebruaryEurope/MoscowbWed, 04 Feb 2015 12:37:27 +0300000000pmWed, 04 Feb 2015 12:37:27 +030015 2015, 12:37:27

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132