Comment mettre du texte sur l'image dans Sitecore?

Question

J'ai besoin de créer un contrôle utilisateur où <sc:text/> élément devrait apparaître sur le <sc:image>.

Je sais que cela peut être réalisé via CSS, mais dans ce cas, le contrôle ne peut pas être configuré car nous ne pouvons pas remplacer les styles en ligne.

Des indices?

Answer 1

Vous pouvez y parvenir en utilisant la fonction d'extension sc:fld et en encapsulant sc:text dans le balisage, en ajoutant des noms de classe ou des ID (ou des styles en ligne si vous le devez!).

<img src="{sc:fld('graphic', $sc_currentitem, 'src’)}" class="head" /> 
<span class="txt"><sc:text field="txtField" /></span> 

Vous pouvez ensuite le style de ceux-ci comme d'habitude

img.head {} 
span.txt {} 

Answer 2

Je ne comprends pas le problème. Cela ressemble plus à un problème frontal à un problème de Sitecore. CSS fonctionnera bien. Voici un exemple grossier (pas testé mais vous obtient l'idée):

Exemple HTML:

<div class="my-container"> 
    <div class="img"> 
    <sc:image Field="Bar" runat="server" /> 
    </div> 
    <div class="txt"> 
    <sc:text Field="Foo" runat="server" /> 
    </div> 
</div> 

Exemple CSS:

.my-container { 
    position: relative; 
} 

    .my-container .txt { 
    position: absolute; 
    z-index: 50; 
    top: 0px; 
    } 

    .my-container .img { 
    z-index: 10; 
    }