記事を画像の上に表示

モジュール(Background Images Formatter)を利用して、記事にアップロードした画像を記事のバックグランドにすることができます。本サイトでは、何らかの原因でBackground Images Formatterの表示設定時にエラーが発生して（Ajaxの設定なのでエラーメッセージも表示されなかった）、このモジュールの利用はできませんでした。

モジュールを利用せず、簡単なCSSとJavaScriptで対応することになりました。

やりたい事

• Nodeタイプの記事にイメージフィールドを必須入力項目として定義します。
• 記事ごとにアップロードしたイメージをバックグランドにセットして表示します。
  
• どんなイメージがアップロードされるのは予測できないので、文書をはっきり読めるため、画像レイヤーと文書レイヤーの間に、半透明（25%の透明度）のレイヤーを入れます。

画像をバックグランドに

• コンテンツのImageフィールド表示設定で、このフィールドのラッパーcssクラス名(例：content-background-div)を設定します
• ページのcssファイル(style.css)で上記Imageフィールドを非表示(例：content-background-div{ display:none } )に設定します
• 文書を表示するエリアのdivのcssにjQuieryでbackgroundを設定します
  • Panelsで以下のJSコードをこのページに追加します(JSコード追加にはPanels CSS & JSモジュールが必要です)

      var img_url = $('#content-background-div img').attr('src');
      $('.page-content #block-system-main').css({     // 記事を表示するエリア
        'background-image': 'url("'+img_url+'")',
        'background-repeat': 'no-repeat',
        'background-size': '100% auto',
        '-moz-background-size': '100% auto',
        '-webkit-background-size':'100% auto' 
      });
    

  • Panelsを利用しなければ、Display Suiteモジュールのダイナミックフィールドを利用して、JSコードをパスすることができます

半透明なレイヤー追加

• 上記バックグランド画像設定したdivの子divにbackground-colorをcssファイル(style.css)で設定します

  #node.node-article{
      background-color:        rgba(255,255,255,0.75);
  }
  

文書レイヤー

• 文書フィールドはそのまま表示します
• フィールドの表示に必要に応じて、cssて調整します