sitecore 이미지 항목에서 xslt 파일의 div 배경 이미지 설정

Question

질문에 Sitecore 이메일 구성 요소의 XSL 파일에 배경 이미지를 설정하려고합니다.

변수를 이미지 소스로 하드 코딩 한 다음 스타일을 사용하여 Div의 배경을 설정하면 배경이 설정된 div가 표시됩니다.

<?xml version="1.0" encoding="UTF-8"?> 

<xsl:stylesheet version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns:sc="http://www.sitecore.net/sc" 
    xmlns:dot="http://www.sitecore.net/dot" 
    exclude-result-prefixes="dot sc"> 

<!-- output directives --> 
<xsl:output method="html" indent="no" encoding="UTF-8" /> 

<!-- parameters --> 
<xsl:param name="lang" select="'en'"/> 
<xsl:param name="id" select="''"/> 
<xsl:param name="sc_item"/> 
<xsl:param name="sc_currentitem"/> 

<!-- variables --> 
<!-- Uncomment one of the following lines if you need a "home" variable in you code --> 
<!--<xsl:variable name="home" select="sc:item('/sitecore/content/home',.)" />--> 
<!--<xsl:variable name="home" select="/*/item[@key='content']/item[@key='home']" />--> 
<!--<xsl:variable name="home" select="$sc_currentitem/ancestor-or-self::item[@template='site root']" />--> 
    <xsl:variable name="backgroundurl">-/media/Images/go-ape-forest-banner-background.ashx</xsl:variable> 

<!-- entry point --> 
<xsl:template match="*"> 
    <xsl:apply-templates select="$sc_item" mode="main"/> 
</xsl:template> 

<!--==============================================================--> 
<!-- main               --> 
<!--==============================================================--> 
<xsl:template match="*" mode="main"> 
    <div style="background:url({$backgroundurl}); background-repeat:no-repeat; background-size:100% 100%; height:200px; border-radius: 25px; border: 2px solid black; padding-left: 20px;padding-right: 20px;"> 

    </div> 

</xsl:template> 
</xsl:stylesheet> 

위의 스크린 샷에서 볼 수 있듯이,이 지금까지 이미지가 DIV의 배경 이미지로 표시됩니다로 작동하지만 난 후, 배경 이미지가해야 해요 것이 아니다 Sitecore 항목,이 경우에는 항목 배경 이미지 필드 및 하드 코딩 된 변수에 따라 설정하십시오.

구성 요소 템플릿에서 다양한 항목에 액세스 할 수 있습니다. 이 경우 우리는 다음과 같은 필드가 있습니다

• 로고 (이미지)
• 아이콘 (이미지)
• 배경 (이미지)
• 제목 (단일 라인 텍스트)
• 아이콘 텍스트 (싱글 나는 다음과 같은 sitecore 컨트롤을 사용하여 페이지에 다음 항목에 액세스 할 수

- 회선 텍스트) :

• <sc:image field="logo"/>
• <sc:image field="icon" />
• <sc:image field="background" />
• <sc:text field="headline"/>
• <sc:text field="icon text"/>

나는 그들이 아래 스크린 샷에서 볼 벌 수있는 제대로 렌더링 내 XSL 페이지에 위의 추가하는 경우 :

배경 이미지 필드를 가져 와서 src 값을 가져온 다음 div의 배경을이 값으로 설정하고 싶습니다.

어떤 아이디어로 어떻게 할 수 있습니까?

감사합니다,

만화 코더

편집 : 나는 당신이 나에게 무슨 일이 일어나고 있는지 이해하는 데 도움이 할 수 있다는 것을 뭔가 재미를 발견

.

내 XSLT 파일에 다음 사용하는 경우 :

<img src="{sc:fld('background',.,'src')}" alt="{sc:fld('background',.,'alt')}" /> 

을 그리고 난이 페이지에 렌더링 다음 얻을 소스 코드의 출력을 검사합니다.

<img src="" alt="go-ape-forest-banner-background" sc-part-of="placeholder rendering" class="scEnabledChrome"> 

src 필드가 비어있는 것을 볼 수 있는데, 이것은 문제입니다. 이 SDN

Assessing Field Values in Sitecore

내가 사용하는 경우 sitecore에 다음 링크에서 sitecore 제공하는 방법입니다 :

<img src="{sc:field('background',.,'src')}" alt="{sc:fld('background',.,'alt')}" /> 

공지 사항의 src 필드에 FLD 이제 필드로 변경하고 나는 소스를 조사 할 때 다음과 같은 것을 얻는다.

<img src="&lt;input id='fld_B9ACE161A86D474390C7DA8308D79278_4C5D9258F7CF44B8A073A078CAEC08B0_en_1_00a4e02d3315484a8da1a756f2ef2d69_6759' class='scFieldValue' name='fld_B9ACE161A86D474390C7DA8308D79278_4C5D9258F7CF44B8A073A078CAEC08B0_en_1_00a4e02d3315484a8da1a756f2ef2d69_6759' type='hidden' value=&quot;&amp;lt;image mediapath=&amp;quot;&amp;quot; alt=&amp;quot;go-ape-forest-banner-background&amp;quot; width=&amp;quot;600&amp;quot; height=&amp;quot;108&amp;quot; hspace=&amp;quot;2&amp;quot; vspace=&amp;quot;2&amp;quot; showineditor=&amp;quot;&amp;quot; usethumbnail=&amp;quot;&amp;quot; src=&amp;quot;&amp;quot; mediaid=&amp;quot;{EE47E80F-DE1E-4FDD-B5D8-ACA473B52A9C}&amp;quot; /&amp;gt;&quot; /&gt;&lt;code id=&quot;fld_B9ACE161A86D474390C7DA8308D79278_4C5D9258F7CF44B8A073A078CAEC08B0_en_1_00a4e02d3315484a8da1a756f2ef2d69_6759_edit&quot; sc_parameters=&quot;format&quot; type=&quot;text/sitecore&quot; chromeType=&quot;field&quot; scFieldType=&quot;image&quot; class=&quot;scpm&quot; kind=&quot;open&quot;&gt;{&quot;commands&quot;:[{&quot;click&quot;:&quot;chrome:field:editcontrol({command:\&quot;webedit:chooseimage\&quot;})&quot;,&quot;header&quot;:&quot;Choose Image&quot;,&quot;icon&quot;:&quot;/sitecore/shell/themes/standard/custom/16x16/photo_landscape2.png&quot;,&quot;disabledIcon&quot;:&quot;/temp/photo_landscape2_disabled16x16.png&quot;,&quot;isDivider&quot;:false,&quot;tooltip&quot;:&quot;Choose an image.&quot;,&quot;type&quot;:&quot;&quot;},{&quot;click&quot;:&quot;chrome:field:editcontrol({command:\&quot;webedit:editimage\&quot;})&quot;,&quot;header&quot;:&quot;Properties&quot;,&quot;icon&quot;:&quot;/sitecore/shell/themes/standard/custom/16x16/photo_landscape2_edit.png&quot;,&quot;disabledIcon&quot;:&quot;/temp/photo_landscape2_edit_disabled16x16.png&quot;,&quot;isDivider&quot;:false,&quot;tooltip&quot;:&quot;Modify image appearance.&quot;,&quot;type&quot;:&quot;&quot;},{&quot;click&quot;:&quot;chrome:field:editcontrol({command:\&quot;webedit:clearimage\&quot;})&quot;,&quot;header&quot;:&quot;Clear&quot;,&quot;icon&quot;:&quot;/sitecore/shell/themes/standard/custom/16x16/photo_landscape2_delete.png&quot;,&quot;disabledIcon&quot;:&quot;/temp/photo_landscape2_delete_disabled16x16.png&quot;,&quot;isDivider&quot;:false,&quot;tooltip&quot;:&quot;Remove the image.&quot;,&quot;type&quot;:&quot;&quot;},{&quot;click&quot;:&quot;chrome:common:edititem({command:\&quot;webedit:open\&quot;})&quot;,&quot;header&quot;:&quot;Edit the related item&quot;,&quot;icon&quot;:&quot;/temp/iconcache/office/16x16/cubes.png&quot;,&quot;disabledIcon&quot;:&quot;/temp/cubes_disabled16x16.png&quot;,&quot;isDivider&quot;:false,&quot;tooltip&quot;:&quot;Edit the related item in the Content Editor.&quot;,&quot;type&quot;:&quot;common&quot;},{&quot;click&quot;:&quot;chrome:rendering:personalize({command:\&quot;webedit:personalize\&quot;})&quot;,&quot;header&quot;:&quot;Personalize&quot;,&quot;icon&quot;:&quot;/temp/iconcache/office/16x16/users_family.png&quot;,&quot;disabledIcon&quot;:&quot;/temp/users_family_disabled16x16.png&quot;,&quot;isDivider&quot;:false,&quot;tooltip&quot;:&quot;Create or edit personalization for this component.&quot;,&quot;type&quot;:&quot;sticky&quot;},{&quot;click&quot;:&quot;chrome:rendering:editvariations({command:\&quot;webedit:editvariations\&quot;})&quot;,&quot;header&quot;:&quot;Edit variations&quot;,&quot;icon&quot;:&quot;/temp/iconcache/office/16x16/windows.png&quot;,&quot;disabledIcon&quot;:&quot;/temp/windows_disabled16x16.png&quot;,&quot;isDivider&quot;:false,&quot;tooltip&quot;:&quot;Edit the variations.&quot;,&quot;type&quot;:&quot;sticky&quot;}],&quot;contextItemUri&quot;:&quot;sitecore://master/{B9ACE161-A86D-4743-90C7-DA8308D79278}?lang=en&amp;ver=1&quot;,&quot;custom&quot;:{},&quot;displayName&quot;:&quot;Background&quot;,&quot;expandedDisplayName&quot;:null}&lt;/code&gt;&lt;img src=&quot;/sitecore/shell/-/media/Images/go-ape-forest-banner-background.ashx?h=108&amp;amp;la=en&amp;amp;w=600&amp;amp;hash=B3D30A69E02A5C0AC47D2475FF85DFA166768C40&quot; hspace=&quot;2&quot; vspace=&quot;2&quot; alt=&quot;go-ape-forest-banner-background&quot; width=&quot;600&quot; height=&quot;108&quot; /&gt;&lt;code class=&quot;scpm&quot; type=&quot;text/sitecore&quot; chromeType=&quot;field&quot; kind=&quot;close&quot;&gt;&lt;/code&gt;" alt="go-ape-forest-banner-background" sc-part-of="placeholder rendering" class="scEnabledChrome"> 

는 또한 예상대로 작동하지 않는 XSLHelper.fld 방법의 사용에 관한이 문제에 관련된 질문을했다. 당신은 여기에 질문을 볼 수 있습니다 내가 대답하기 전에

Sitecore XSLHelper.fld Method not working as expected

Answer 1

을, 나는 당신이 XSLT 사용을 중지하는 것이 매우 좋습니다 것이라고 말해야한다. 자신의 코드를 포함 해 미래의 관리자는 MVC로 이동하면 감사 할 것입니다. 컴파일 할 필요가 없도록하려면 View rendings을 사용할 수 있습니다.

다음 코드는 Sitecore 6의 이전 프레젠테이션 구성 요소 참조 문서에서 수정되었습니다. XSLT를 다시 터치 할 의사가 없기 때문에 8에서 테스트하지 않았지만 여전히 작동해야한다고 생각합니다. 추가 정보

당신이 링크 된 기사에 응답

<xsl:variable name="mediaid" select="sc:fld('Background',$sc_currentitem,'mediaid')" /> 
<xsl:if test="$mediaid"> 
    <xsl:variable name="mediaitem" select="sc:item($mediaid,.)" /> 
    <xsl:if test="$mediaitem"> 
    <div style="background:url({sc:GetMediaUrl($mediaitem)}); background-repeat:no-repeat; background-size:100% 100%; height:200px; border-radius: 25px; border: 2px solid black; padding-left: 20px;padding-right: 20px;"> 
    </xsl:if> 
</xsl:if> 

업데이트 오래된이다. 이미지 필드에는 더 이상 src 속성이 없습니다. 이미지의 속성을 수정하는 경우 (예 : 대체 텍스트 또는 치수를 설정) 당신이 뭔가를 볼 수

<image mediaid="{094AED03-02E7-4868-80CB-19926661FB77}" /> 

: 당신은 그냥 이미지를 선택하면 필드의 원시 값을 볼 경우는 다음과 같이 표시됩니다 다음과 같이하십시오 :

<image mediaid="{094AED03-02E7-4868-80CB-19926661FB77}" alt="alt text" height="" width="150" hspace="" vspace="" /> 

URL을 얻으려면 위와 같이 mediaid 속성을 사용해야합니다.