シルバーストライプ画像アップロードjavascript変数

Question

シルバーストライププロジェクトでvegasスライダーhttp://vegas.jaysalvat.com/を使用しようとしましたが、CMS経由で画像を追加できるように設定する際に問題があります。

は、ページコントローラ内

 $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); 

を使用してみました。

そして、私のスクリプトファイルに私のページテンプレートでは

$('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' 
}); 

を持っていた私は

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:')); 

変数をHTMLに渡さ取得されてきたが、それは

<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> 

として示しアセットフォルダからの画像の読み込みの代わりに

現在はスライドが動作するようにハードコードされていますが、将来はCMS経由で画像を追加したいと考えています。ありがとう！

Answer 1

良い質問！ javascriptTemplateは使用しないでください。それは悪い習慣を奨励する古いハックです。すぐに廃止されたら驚かないだろう。

通常、コントローラからテンプレートへ変数を渡す方法は、単純なdata-属性を使用する方法です。

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

とデータが$('.my-slideshow').data('some-var')を使用して取得され、など

あなたは多くの変数がある場合は、JSONに全体をシリアライズすることができます。 JSONを属性値に入れることは完全に遵守しています。

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)); 

1つの警告は、それが安全なXSSは、そのいずれかの変数ことを確認することはないということですあなたはコントローラを通過しているが、ユーザーの入力から供給されていません。

Answer 2

@UncleCheeseがjavascriptスライサーに設定を渡す方法をいくつか教えてくれましたが、1つの問題がまだ残っています。Image URLの文字列が必要なconfigにImage Objectを渡そうとします。あなたは

1. はそれが

Fileのサイズを変更する方法はいくつかの方法がのURLを取得する必要がありありFile

のサブクラスでそれを見ることができますSilverstripeでImageオブジェクトを見てみると

オブジェクト、getURL()およびgetAbsoluteURL()。アップロードさへの出力URLは、画像をリサイズしません

{ src: "$Slideshow1.AbsoluteURL"} 

：だから（ないPHPコードでのSSやJavaScriptテンプレート、）テンプレートに次のようなメソッド名に「取得」し、使用何かをスキップすることができます。適切な解決策がある場合は、ここで停止できます。

しかし、SilverStripeには多くの画像が収まるように画像をトリミングまたはサイズ変更するためのready-to-use image manipulating functionsが付属しています。スライダーがたとえば私はいつもトリミング用の画像の中心点を定義するために、いくつかの追加機能が付属していますJonom's great focuspoint moduleを使用する「風景スライドショーに人物画像」の問題を解決するための：

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

PS：600x300pxは、あなたのようなものを使用することができます。