Silverstripe 图像上传为 javascript 变量

Question

尝试在 Silverstripe 项目中使用 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));

关于第二种方法的一个警告是它不是 XSS 安全的，因此请确保您通过控制器传递的任何变量都不是来自用户输入。

Answer 2

虽然@UncleCheese 给出了一些如何将配置传递给 javascript 切片器的说明，但仍然存在一个问题：您尝试将图像对象传递给它期望图像 URL 字符串的配置。

在 Silverstripe 中查看 Image 对象可以看到它

1. 是File 的子类
2. 它有调整大小的方法

File 有一些方法可以获取对象的 URL，getURL() 和 getAbsoluteURL()。因此，在模板（ss 或 javascript 模板，而不是 PHP 代码）中，您可以跳过方法名称中的“get”并使用如下内容：

{ src: "$Slideshow1.AbsoluteURL"}

这会将 URL 输出到上传的、未调整大小的图像。如果它有正确的分辨率，你可以在这里停下来。

但是 SilverStripe 附带了很多 ready-to-use image manipulating functions，您可以使用它来裁剪或调整图像大小以适合。如果您的 Slider 应该是例如600x300px 你可以使用类似的东西：

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

PS：为了解决“横向幻灯片中的纵向图像”问题，我总是使用Jonom's great focuspoint module，它带有一些附加功能来定义图像的中心点以进行裁剪。