Kenitco Inline CSS

Question

Nicht sicher der beste Weg, die Folgendes zu erreichen:

Aktuell haben wir Kopf-/Billboard Grafiken Setup Hintergrundbilder zu sein, um für ein paar Vorlagen verwendet werden. Das Problem ermöglicht dem Benutzer nun, diese Hintergrundbilder im Kentico CMS zu ändern, ohne die CSS selbst aktualisieren zu müssen.

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> 

Was wir denken Willen Arbeit ist die CSS-Aufruf für das Hintergrundbild zu entfernen, und fügen Sie es als ein Inline-Stil wie zum Beispiel:

Hat jemand eine gute Methode, um dem Benutzer zu ermöglichen, das Bild aus der Bibliothek auszuwählen und die URL im Inline-Stil zu ersetzen?

Answer 1

Ihre beste Wette ist, nicht statische HTML zu verwenden. Sie müssen Seitentypen und Repeater verwenden und Ihre Seite dynamisch machen, anstatt es dem Benutzer zu erlauben, HTML und CSS zu bearbeiten. Check out the documentation zum Hinzufügen von Inhalt mithilfe von Seitentypen (Dokumenttypen in Version 7).

Answer 2

Wie von Brenden empfohlen, müssen Sie Ihrem Seitentyp Hintergrundfeld hinzufügen, damit der Editor dieses Feld auf der Registerkarte Formular auffüllt. In diesem Fall könnten Sie Makro verwenden Hintergrund Feldwert in Markup wie diese zu injizieren:

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

Answer 3

Es ist auf dem Ansatz hängt würden Sie gehen möchten (verwenden Sie Makros, benutzerdefinierte Makros, Webparts ..). Wenn Sie Portal Engine verwenden, würde ich tatsächlich empfehlen, ein Webpart für Ihr Billboard-Bild zusammen mit einem benutzerdefinierten Feld zu erstellen, das Medienauswahl Formularsteuerung verwendet, um Bild aus Medienbibliothek auszuwählen.

Schritte, dies zu tun:

1) Zum Seitentyp (Dokumenttypen für Kentico 7) Anwendung und erstellen Sie ein neues Feld „Medienauswahl“ Form-Steuerung. Verwendung z.B. MediaImage als Feldname.

2) Erstellen einer Web-Teil nach this documentation article

3) Benutzen Sie den Code folgende URL Ihrer Mediaimage Feld zu bekommen und den HTML-Code erstellen:

 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) Fügen Sie diesen HTML-Code eine Seite mit z Wörtliche Steuer

5) Platzieren Sie Ihren Web-Teil auf einer Seite, wo Sie das Bild haben wollen (ich nehme an, es Master-Seite sein würde oder eine andere Seite, von der untergeordneten Seiten erben)