web-dev-qa-db-ja.com

画像フィールドをdiv背景にするより良い解決策は？

Drupal 7では、ビューの画像フィールドを次のようにしたい

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

jQueryパララックススクロール効果を適用できます。ただし、「このフィールドをリンクとして出力する」機能と「HTMLタグを取り除く」機能で「絶対パス」を使用しても、画像の完全な「絶対パス」を取得できません。取得したのは、絶対パスではなくファイル名だけです。

私のもう1つの問題は、フィールドの「グローバル：カスタムテキスト」で、テキストフィルターオプションがないため、上記のコードを記述できません。

これまでのところ、交換用の " BackgroundField "モジュールのみを見つけました。誰かがdiv背景画像のより良い解決策を知っていますか？

PS：CSSトリックは、それを同じように見えるようにするだけで、完全に異なります。

------ 2015年2月2日の更新情報：午後12時58分---

私が持っているビューは、タイトルとその他のフィールドを含むノードのリストです。したがって、各ノードには画像フィールドからの独自の背景が必要です。

------ 2015年2月2日の更新情報：02:46 pm ---

上記の " BackgroundField "モジュールは Background Images に似ているように見えますが、これも機能しません。

viewsentitiesmedia
6
CocoSkin

Background Images モジュールスイートもあります。

背景画像は、ユーザーがサイトのページのhtml要素に背景画像を追加できるようにするモジュールのコレクションです。

Field Group Background Image と呼ばれる背景画像サポート用のField Groupサブモジュールもあります。

このモジュールは、背景付きのラッパーで構成されるフィールドグループ表示フォーマッターを作成します。

背景は次から設定できます：

  • 表示されているエンティティの画像フィールド
  • 色フィールド（色フィールドまたはjQuery Colorpickerモジュールの）

このモジュールはDisplay Suiteと一緒に使用でき、カスタムFieldable Panels Panesバンドルを作成する場合に特に役立ちます。

あなたは視差スクロールについて言及しています...私はそれが何であるか知っています、私はそれを実装する必要がありませんでした-あなたは使用を試みたいかもしれません Parallex Background ：

これは、DOMの要素の背景に垂直視差効果を設定できるようにする単純なモジュールです。

Google風のスキルをさらに磨くことをお勧めします。

4
tenken

これらのモジュールのいずれかを使用する代わりに、次のようなテーマ関数を介してフィールド出力をオーバーライドできます。

    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;
    }

ビューで、フィールドのスタイル設定の[フィールドテンプレートを使用]を有効にします。したがって、ビューは上記のテーマ関数を介してフィールドをレンダリングします。もちろん、背景画像を表示するには、フィールドに幅と高さを指定する必要があります。

4
Konstantin

おそらく Image URL Formatter モジュールが必要です。

このモジュールは、画像フィールドのURLフォーマッターを追加します。次に、画像のURLを直接出力できます。

ビューで動作します。 「画像へのパス」や「画像へのURL」のような「フォーマッター」の選択肢が追加されます。

また、「グローバル：カスタムテキスト」についても、これは完全なHTMLを意図していると思いますが、filter_xssやその他のさまざまなサニタイザを介して実行されます。したがって、HTMLをフィールドに直接配置できます。テキスト入力フィルターは必要ありません。

2
Beebee

おそらく、Divをターゲットにできるので、Dynamic Backgroundモジュールが必要ですか？また、日付、パスなどのコンテキストに基づいて背景を設定するための便利なコンテキスト背景もあります https://www.drupal.org/project/dynamic_background

0
deanflory