2016-04-04 16 views
0

チームからHTMLデザインを受け取り、Sitecore 8プロジェクト(ASP.NET)に統合しました。SitecoreでCSSクラスを編集する方法

重要な要素の画像は、CSSクラス内で宣言されています。

例については

:ページ内のセクションヘッダーの2つのタイプがあります - &短い長いが、そのクラスは次のとおりです。

.title-long{ 
    background:url('/images/bg-long.jpg'); 
    width:700px; 
    height:80px; 
} 

.title-short{ 
    background:url('/images/bg-short.jpg'); 
    width:300px; 
    height:50px; 
} 

をそして、これは、彼らが使用されている方法です。

<h3 class=".title-long">A very long header</h3> 
<h3 class=".title-short">short header</h3> 

ヘッダーのタイトルが長い場合は、title-longクラスが使用されます。 enter image description here

コンテンツ作成者(CA)は、ヘッダーと画像を編集できる必要があります。 私は経験編集者から編集可能な画像(CSSクラスから参照される)の作り方を知らない。

だから、私はこの画像がコンテンツエディタからのみ編集することができ、その後、私のコードがなることをCAに通知します:

ASCX

<h2 id="sectionHeader" runat="server" class="title-long"> 
    <sc:Text ID="txtHeader" runat="server" Field="Section Header" />  
</h2> 

ascx.cs

//add background image to header 
sectionHeader.Style.Add("background", "url(" + MediaManager.GetMediaUrl(headerImage.MediaItem) + ") no-repeat center center"); 

このアプローチはうまくいきますが、ここでは心配です。

CAが「ショートイメージ」をアップロードしても、クラスは常にtitle-longになります。

このような状況の標準的な方法は何ですか。つまり、CAが優れた編集経験を持ち、CSSクラス内にある画像を変更する必要があります。

+0

あなたのニーズに合った答えが見つかった場合は、回答としてマークしてください。私はあなたが尋ねた多くの質問を見ていますが、いくつかの回答がありますが、答えが記されていないものはありません。 –

答えて

4
  1. テンプレート(またはデータソースのテンプレート)にbackground imagecss classフィールドを作成します。

  2. background imagecss classフィールドの両方に使用してください。

これだけです。作成者はエクスペリエンスエディタから直接編集することができます。

編集フレームの詳細はUsing Sitecore EditFrame in PageEditまたはhttps://www.google.com/search?q=sitecore+edit+frameです。

1

この種のメタコンテンツには、常に最適な場所としての取引があります。おそらく本当に「コンテンツ」ではなく、コンポーネントとコンテンツをどのようにレンダリングするかの設定です。

これに基づいて、レンダリングパラメータを使用することもできます。これらは、コンポーネントの設定を可能にするフィールドを定義する機能を提供し、コンテンツエディタまたはエクスペリエンスエディタを使用して設定することができます。詳細はこちらをご覧くださいhttps://www.captechconsulting.com/blogs/sitecore-rendering-parameters-part-1--how-and-why-to-use-rendering-parameters

関連する問題