Hi,
I am still a beginner with silverstripe, php et javascript but I am making progress. At the moment I am trying to write a module for an image browser of my own, mostly as a learning experience as there are a lot of existing modules.
The module seems to work fine locally (I mean on a localhost server). I have a customizable thumbails carrousel at the bottom of the page and a correctly displaying auto/manu slideshow at the top.
Now, as I would like to start dealing with ajax problem, I moved the module onto a remote server. I could create an ImageBrowserPage and uploads all the images. But what I don't understand is why my ImageBrowserPage.ss seems to be ignored on the remote server (the page use the standard page layout) and taken into account when working on the local server.
The module is called imagebrowser. The ImageBrowserPage.php is placed under imagebrowser/code and the ImageBrowserPage.ss is placed under imagebrowser/templates/Layout. The mechanics imagebrowser.js (that is still embryonary — no ajax) is placed under imagebrowser/js.
Thank you for help.
Relevant files:
ImageBrowserPage.php
<?php
class ImageBrowserPage extends Page {
private static $many_many = array ('BrowserImages' => 'Image');
function getCMSFields () {
$fields = parent:: getCMSFields();
$fields->addFieldToTab (
'Root.Upload',
$uploadField = new UploadField (
$name = 'BrowserImages',
$title = 'Upload one or more images'
)
);
$uploadField->setAllowedMaxFileNumber(1000);
$uploadField->setFolderName('ImageBrowser'.$this->ID);
return $fields;
}
}
class ImageBrowserPage_Controller extends Page_Controller{
function getImages(){
return $this->BrowserImages;
}
}
ImageBrowserPage.ss
<% require javascript("/imagebrowser/thirdparty/jquery-1.11.0.js") %>
<% require javascript("/imagebrowser/js/imagebrowser.js") %>
<script src="/imagebrowser/thirdparty/jquery-1.11.0.js"></script>
<script src="/imagebrowser/js/imagebrowser.js"></script>
<% require css("imagebrowser/css/carrousel.css") %>
<div class="content-container unit size3of4 lastUnit">
<article>
<div>
<div id="param" data-options = '{
"nbThumbPerRow":"20",
"nbThumbRows":"2",
"imageBaseName" : "image",
"imageExt" :".JPG"}'>
</div>
<div id="conteneur">
<div id="carrousel">
<% loop $BrowserImages %>
<div class="slide">
<div class="visu">
<img src="$Filename" />
</div>
<div class="title">
$Title
</div>
</div>
<% end_loop %>
</div>
</div>
</div>
</article>
</div>