css - Adobe cq - 背景画像 / CSS

Question

たとえば、通常、クラスを介して背景画像をスタイルシートに追加する場合、作成者が cq で画像を指定し、cq 自体が CSS を修正してクラスと背景画像の仕様を追加することは可能ですか。もう 1 つの方法は、sling リソースがインライン スタイルシートを追加することだと思います。最良の方法は何ですか？

Answer 1

インライン スタイルシートを使用して CRX(DE) のコンポーネントを変更し、ダイアログ ウィンドウにユーザーが入力できる追加のフィールドが表示されるようにしました。画像コンポーネントに、クリックしたときにターゲット用の DAM からターゲット画像を選択するためのフィールドを追加しました。

これに沿って何かを行うことができます：

コンポーネントのプロパティ

/yoursite/components/content/-yourcomponent-/dialog/items/bgImage (your component tree may vary slightly)

fieldLabel : String = Image to Link to
jcr:primaryType : Name = cq:Widget
name : String = ./bgImage
xtype : String = pathfield

以下を /yoursite/components/content/-yourcomponent-/yourcomponent.jsp に追加します

<%
String bgImage = properties.get("bgImage", "");
String cssStyle = "";
if (bgImage != null) {
  cssStyle = "background:url(" + bgImage + ") no-repeat;";
}
%>

<div style="<%= cssStyle %>">
  // Other output here
</div>

これは非常にラフなドラフトですが、アイデアを得る必要があります。

更新: CSS クラスを外部に追加し、それらをコードで参照する場合。ただし、ユーザーが選択した画像をインラインとして、または内部的に追加する必要があります。

• CRX(DE) で、development/author インスタンスの /etc/designs/-yoursite-/styles.css/files を展開します。
• それに応じて新しい CSS ファイルを追加するか、コードを既存のファイルに追加します。
• システムは、すべての CSS ファイルを 1 つの巨大な styles.css ファイルにマージします。
• styles.css はシステムによってキャッシュされるため、アプリケーションの設定によっては変更がすぐに反映されない場合があります。

<div class="imageDiv" style="<%= cssStyle %>"> </div>