Как поместить текст поверх изображения в Sitecore?

Question

Мне нужно создать пользовательский элемент управления, где элемент <sc:text/> должен отображаться поверх <sc:image>.

Я знаю, что этого можно достичь с помощью CSS, но в этом случае элемент управления не может быть настроен, поскольку мы не можем переопределить встроенные стили.

Есть какие-либо подсказки?

Answer 1

Я не понимаю проблемы. Это кажется скорее проблемой внешнего интерфейса, чем проблемой Sitecore. CSS будет работать нормально. Вот грубый пример (не проверен, но дает вам представление):

Пример 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>

Пример CSS:

.my-container {
  position: relative;
}

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

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

Answer 2

Этого можно добиться, используя функцию расширения sc:fld и оборачивая sc:text в разметку, добавляя имена классов или идентификаторы (или встроенные стили, если необходимо!).

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

Затем можно стилизоватькак обычно

img.head {}
span.txt {}