silverstripe-gallery 

silverstripe-gallery Commit Details

Date:2014-09-25 19:02:57 (6 years 27 days ago)
Author:Nicola Fontana
Branch:dev, master
Commit:2c5a2639cbfb4e8da760a1fa9af56b62547cb86f
Parents: 99c81a44d62dca81c2279821ea57e3080785d375
Message:Support sortable and zoomable features

Updated the module to be able to sort the images with drag&drop: now
there is an hard dependency on sortablefile [1] and a soft dependency on
colorbox [2].

Rewrote and improved the overall design.

[1] https://github.com/bummzack/sortablefile
[2] http://www.jacklmoore.com/colorbox/
Changes:
M_config.php (1 diff)
Mcode/GalleryPage.php (2 diffs)
Mcss/jquery.ad-gallery.css (1 diff)
Mjavascript/gallery.js (1 diff)
Mlang/en.yml (1 diff)
Mlang/it.yml (1 diff)
Mtemplates/Includes/ContentGallery.ss (1 diff)

File differences

_config.php
11
2
3
2
3
4
5
6
7
8
9
10
<?php
// Extend image class
Object::add_extension('Image', 'GalleryImage');
/**
* @package silverstripe-gallery
*
* Requires sortablefile:
* https://github.com/bummzack/sortablefile
*/
Image::add_extension('GalleryImage');
code/GalleryPage.php
11
22
3
4
5
6
7
8
9
310
411
512
613
7
14
15
16
817
918
10
19
20
21
22
23
24
25
26
27
28
29
1130
1231
1332
1433
1534
35
1636
1737
18
38
1939
2040
2141
......
2343
2444
2545
26
27
28
29
30
46
47
48
49
50
51
52
3153
3254
3355
3456
57
58
59
3560
3661
3762
38
39
40
41
42
43
44
45
46
4763
48
64
65
4966
5067
<?php
class GalleryImage extends DataExtension {
private static $belongs_many_many = array(
'Gallery' => 'GalleryPage',
);
}
class GalleryPage extends Page {
private static $icon = 'gallery/images/gallery.png';
private static $db = array(
'HideDescription' => 'Boolean'
'Captions' => 'Boolean',
'ImageHeight' => 'Int',
'StripHeight' => 'Int',
);
private static $many_many = array(
'Images' => 'Image'
'Images' => 'Image'
);
private static $many_many_extraFields = array(
'Images' => array(
'SortOrder' => 'Int'
)
);
private static $defaults = array(
'ImageHeight' => 400,
'StripHeight' => 64,
'Captions' => true
);
public function getCMSFields() {
$fields = parent::getCMSFields();
$field = new SortableUploadField('Images', _t('GalleryPage.UPLOAD'));
$fields->findOrMakeTab('Root.Gallery')
->setTitle(_t('GalleryPage.SINGULARNAME'))
->push(UploadField::create('Images', _t('GalleryPage.UPLOAD')));
->push($field);
return $fields;
}
public function getSettingsFields() {
$fields = parent::getSettingsFields();
$gallery = FieldGroup::create(
CheckboxField::create('HideDescription', _t('GalleryPage.HIDE_DESCRIPTION'))
)->setTitle(_t('GalleryPage.SINGULARNAME'));
$fields->addFieldToTab('Root.Settings', $gallery);
$fields->addFieldToTab('Root.Settings',
FieldGroup::create(
TextField::create('ImageHeight', _t('GalleryPage.db_ImageHeight')),
TextField::create('StripHeight', _t('GalleryPage.db_StripHeight')),
CheckboxField::create('Captions', _t('GalleryPage.db_Captions'))
)->setTitle(_t('GalleryPage.SINGULARNAME'))
);
return $fields;
}
public function getCMSValidator() {
return new RequiredFields(array('ImageHeight', 'StripHeight'));
}
}
class GalleryPage_Controller extends Page_Controller {
public function init() {
parent::init();
}
public function Gallery() {
$vars = array(
'HideDescription' => $this->HideDescription,
'Images' => $this->Images()->sort('Sort','DESC')
);
return $this->renderWith('Gallery',$vars);
public function SortedImages() {
return $this->Images()->Sort('SortOrder');
}
}
css/jquery.ad-gallery.css
174174
175175
176176
177
178
179
left: -9000px;
top: -9000px;
}
.colorbox-enabled.ad-image {
cursor: pointer;
}
javascript/gallery.js
1
2
3
4
5
6
7
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(function($) {
$(document).ready(function() {
var ad_galleries = $('.ad-gallery').adGallery({
loader_image: 'gallery/images/loader.gif'
});
});
})(jQuery)
$(document).ready(function () {
var subject = $('.ad-gallery');
if (subject.length) {
subject.adGallery({
loader_image: 'gallery/images/loader.gif',
width: false,
height: false
});
if ($.isFunction($.colorbox)) {
// Enable ColorBox support for the gallery
subject.addClass('colorbox-enabled');
subject.on('click', '.ad-image', function () {
$.colorbox({
href: $(this).find('img').attr('src'),
title: $(this).find('.ad-image-description').text()
});
});
}
}
});
lang/en.yml
44
55
66
7
8
7
8
9
PLURALNAME: 'Galleries'
DESCRIPTION: 'Page with image gallery bound to it'
UPLOAD: 'Images to appear in gallery'
HIDE_DESCRIPTION: 'Hide the description of each image?'
PRIORITY: 'Prioritise (higher numbers first)'
db_Captions: 'Show image captions'
db_ImageHeight: 'Image height'
db_StripHeight: 'Strip height'
lang/it.yml
44
55
66
7
8
7
8
9
PLURALNAME: 'Gallerie'
DESCRIPTION: 'Pagina con galleria di immagini abbinata'
UPLOAD: 'Immagini da mostrare nella galleria'
HIDE_DESCRIPTION: 'Nascondi la descrizione di ogni immagine?'
PRIORITY: 'Priorità (valore più grande in cima)'
db_Captions: 'Mostra didascalia immagini'
db_ImageHeight: 'Altezza immagine'
db_StripHeight: 'Altezza striscia'
templates/Includes/ContentGallery.ss
1
2
1
2
33
44
55
66
77
8
8
99
1010
1111
1212
13
13
1414
15
15
1616
1717
1818
<% if $Images %>
<%-- The following line force the inclusion of JQuery before ad-gallery --%>
<% if $SortedImages %>
<%-- The following line force the inclusion of JQuery *before* ad-gallery --%>
<% include JQuery %>
<% require css(gallery/css/jquery.ad-gallery.css) %>
<% require javascript(gallery/javascript/jquery.ad-gallery.min.js) %>
<% require javascript(gallery/javascript/gallery.js) %>
<div class="row">
<div id="gallery" class="ad-gallery">
<div id="ss-gallery" class="ad-gallery" style="height:$ImageHeight">
<div class="ad-image-wrapper"></div>
<div class="ad-controls"></div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list"><% loop $Images %>
<ul class="ad-thumb-list"><% loop $SortedImages %>
<li>
<a href="$Link"><img src="$CroppedImage(60,60).Link" <% if not Top.HideDescription %>alt="$Title"<% end_if %> class="image{$Pos}"></a>
<a data-target="$Link" href="$Link"><% with $SetHeight($Top.StripHeight) %><img src="$Link" width="$Width" height="$Height"<% if $Top.Captions %> alt="$Title"<% end_if %>><% end_with %></a>
</li><% end_loop %>
</ul>
</div>

Archive Download the corresponding diff file