Question

尝试在Silverstripe项目中使用拉斯维加斯滑块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对象，您可以看到它

是File
它有调整大小的方法

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

{ src: "$Slideshow1.AbsoluteURL"}

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

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

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

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

Silverstripe图像上传为javascript变量

2 个答案: