Silverstripe Bild hochladen als Javascript Variable

Question

Versuchen Sie, die Vegas-Schieberegler http://vegas.jaysalvat.com/ in einem Silverstripe-Projekt zu verwenden, und ich habe Probleme beim Einrichten der Bilder über das CMS hinzugefügt werden.

 $vars = array(
     'Slideshow1' => $this->Slideshow1, 
     'Slideshow2' => $this->Slideshow2, 
     'Slideshow3' => $this->Slideshow3, 
     'Slideshow4' => $this->Slideshow4, 
     'Slideshow5' => $this->Slideshow5, 
     'Slideshow6' => $this->Slideshow6, 
     'Slideshow7' => $this->Slideshow7 
    ); 

    Requirements::javascriptTemplate("themes/mysite/javascript/vegas1.js", $vars); 

auf der Seite Controller versucht.

Und dann in meiner Skript-Datei hatten

$('body').vegas({ 
    delay: 7000, 
    timer: false, 
    shuffle: true, 
    transition: 'fade2', 
    transitionDuration: 3000, 
    slides: [ 
     { src: "$Slideshow1"}, 
     { src: "$Slideshow2"}, 
     { src: "$Slideshow3"}, 
     { src: "$Slideshow4"}, 
     { src: "$Slideshow5"}, 
     { src: "$Slideshow6"}, 
     { src: "$Slideshow7"} 
    ], 
    overlay: '/themes/mysite/images/overlays/01.png' 
}); 

In meiner Seitenvorlage Ich habe

public static $has_one = array(
    'Slideshow1' => 'Image', 
    'Slideshow2' => 'Image', 
    'Slideshow3' => 'Image', 
    'Slideshow4' => 'Image', 
    'Slideshow5' => 'Image', 
    'Slideshow6' => 'Image', 
    'Slideshow7' => 'Image', 
); 

    $fields->addFieldToTab('Root.Slides', new UploadField('Slideshow1', 'Slideshow Background Image:')); 
    $fields->addFieldToTab('Root.Slides', new UploadField('Slideshow2', 'Slideshow Background Image:')); 
    $fields->addFieldToTab('Root.Slides', new UploadField('Slideshow3', 'Slideshow Background Image:')); 
    $fields->addFieldToTab('Root.Slides', new UploadField('Slideshow4', 'Slideshow Background Image:')); 
    $fields->addFieldToTab('Root.Slides', new UploadField('Slideshow5', 'Slideshow Background Image:')); 
    $fields->addFieldToTab('Root.Slides', new UploadField('Slideshow6', 'Slideshow Background Image:')); 
    $fields->addFieldToTab('Root.Slides', new UploadField('Slideshow7', 'Slideshow Background Image:')); 

Die Variablen in den HTML-Code übergeben werden immer, aber es zeigt, wie

<div class="vegas-slide-inner" style="background-image: url($Slideshow1); background-color: rgba(0, 0, 0, 0); background-position: center center; background-size: cover;"></div> 

anstelle des Ladens von Bildern aus dem Ordner "Assets". Gerade jetzt ist es fest in die Slides eingearbeitet, aber in Zukunft würden gerne Bilder über das CMS hinzufügen können. Vielen Dank!

Answer 1

Gute Frage! Verwenden Sie nicht javascriptTemplate. Das ist ein alter Hack, der schlechte Praktiken fördert. Ich wäre nicht überrascht, wenn es bald veraltet ist.

Die Art, wie Sie Variablen normalerweise vom Controller zur Vorlage übergeben, erfolgt über einfache data- Attribute.

<div class="my-slideshow" data-some-var="$SomeVar" data-some-other-var="$SomeOtherVar"> 

Und die Daten geholt $('.my-slideshow').data('some-var') usw. verwendet

Wenn Sie eine Menge von Variablen haben, können Sie das Ganze in JSON Serialisierung. Denken Sie daran, es ist vollkommen kompatibel, JSON in einen Attributwert zu setzen.

php:

public function SlideshowConfig() 
{ 

    $myJSVars = [ 
    'foo' => 'bar', 
    'qux' => [ 
     'biz' => 'boz', 
    ] 
    ]; 

    return Convert::array2json($myJSVars); 
} 

ss:

<div class="slideshow-wrapper" data-slideshow-config="$SlideshowConfig"> 

js:

const slideshowConfig = $('.slideshow-wrapper').data('slideshow-config'); 
$(...).slideshow(JSON.parse(slideshowConfig)); 

Eine Einschränkung über diesen zweiten Ansatz ist, dass es nicht XSS sicher, so sicher sein, dass alle Variablen Sie durchlaufen den Controller nicht aus Benutzereingaben stammen.

Answer 2

Während @UncleCheese einige Anweisungen gab, wie man config an den Javascript Slicer übergibt, bleibt ein Problem: Man versucht, das Image Object an die Config zu übergeben, wo es die Zeichenkette der Image URL erwartet.

am Image Sehen in Silvers können Sie es sehen

1. ist eine Unterklasse von File
2. hat es Methoden für

File Ändern der Größe einige Methoden hat die URL der bekommen Objekt, getURL() und getAbsoluteURL().So in einer Vorlage (ss oder JavaScript-Vorlage, nicht in PHP-Code) können Sie überspringen die „get“ in dem Methodennamen und verwenden Sie so etwas wie:

{ src: "$Slideshow1.AbsoluteURL"} 

die folgende Ausgabe die URL zum hochgeladen, nicht geändert Bild . Wenn es die richtige Auflösung hat, können Sie hier aufhören.

Aber SilverStripe kommt mit einer Menge von ready-to-use image manipulating functions, die Sie verwenden können, um Ihr Bild zu beschneiden oder seine Größe anzupassen. Wenn Ihr Slider z.

{ src: "$Slideshow1.Fill(600,300).AbsoluteURL"} 

PS: 600x300px können Sie so etwas wie verwenden zur Lösung des „Porträtbild in einer Landschaft Diashow“ Problem, das ich den Mittelpunkt des Bildes zu definieren, für das Zuschneiden immer Jonom's great focuspoint module benutzen, die mit einigen zusätzlichen Funktionen kommt.