Kenitco Встроенного CSS

Question

Не уверен, что лучший способ сделать следующее:

В настоящее время у нас есть заголовок/щиты графики установки быть фоновые изображения, которые будут использоваться для нескольких шаблонов. Теперь проблема позволяет пользователю изменять эти фоновые изображения в Kentico CMS без необходимости обновления самого CSS.

CSS

.billboard.landing-page { 
    background-image: url("../img/billboard-sub-page.jpg"); 
    background-size: cover; 
    background-position: 50% 50%; 
    height: 35.3125rem; 
    position: relative; 
    margin-bottom: 4.0625rem; 
    color: #fff; 
    text-align: left; 
    padding-top: 21.875rem; } 

HTML

<div class="wrapper billboard landing-page"> 
<!-- Billboard Heading & Lead in --> 
<div class="row"> 
    <div class="small-11 medium-9 columns"> 
    <div class="billboard-heading"> 
     <h1>Lorem Ipsum Dolor Sit</h1> 
    </div> 
</div> 

Что мы думаем, будет работать, чтобы удалить вызов CSS для фона изображения и добавить его в качестве встроенный стиль, такой как:

<div class="wrapper billboard landing-page" style="background-image:url(KENTICO-CODE-HERE);"> 
... 
</div> 

У кого-нибудь есть хороший метод, позволяющий пользователю выбрать изображение из библиотеки и заменить URL-адрес в встроенном стиле?

Answer 1

Ваш лучший выбор - не использовать статический html. Вам нужно использовать типы страниц и повторители и сделать вашу страницу динамической, а просто позволяя пользователю редактировать html и css. Check out the documentation о добавлении контента с использованием типов страниц (типы документов в версии 7).

Answer 2

Как и Бренден, вам необходимо добавить фоновое поле к типу вашей страницы, поэтому редактор заполнит это поле на вкладке формы. В этом случае вы можете использовать макрос, чтобы ввести значение поля фона в разметке, как это:

<div class="wrapper billboard landing-page" style="background-image:url({%Background%});"> 
... 
</div> 

Answer 3

Это зависит от того, какой подход вы хотели бы пойти (использовать макросы, пользовательские макросы, веб-частей ..). Если вы используете движок портала, я бы рекомендовал создать веб-часть для вашего рекламного щита вместе с настраиваемым полем, используя выбор носителя элемент управления форматом для выбора изображения из медиа-библиотеки.

шаги, чтобы сделать это:

1) Перейти к типам страниц (типы документов для Kentico 7) приложения и создать новое поле с помощью «выбора» Медиа-контроля формы. Использовать, например. MediaImage как поле name.

2) Создание веб-части в соответствии с this documentation article

3) Используйте следующий код, чтобы получить адрес вашего MediaImage поле и построить HTML код:

 var mediaImage = CurrentDocument.GetStringValue("MediaImage", null); // image from custom field using "MediaSelection" form control 
     if (!String.IsNullOrEmpty(mediaImage)) 
     { 
      // continue only if image is set 
      var url = URLHelper.GetAbsoluteUrl(mediaImage); 
      var html = String.Format("<div class=\"wrapper billboard landing - page\" style=\"background - image:url({0}); \">", url); 
     } 

4) Добавить HTML в страницу с использованием, например, Буквальное управление

5) Поместите веб-часть на странице, где вы хотите, чтобы это изображение (я предполагаю, что это будет главная страница или какая-либо другая страница, с которой дочерние страницы наследуют)