Tutorial für eine benutzerfreundliche Galerie mit Bootstrap (http://getbootstrap.com/) 3 und blueimp Gallery (https://blueimp.github.io/Gallery/)*** getestet mit MODX 2.4.x bis 3.0.2 ***
Das schöne an MODX ist, dass sich jede javascript (z.B. jquery) Galerie sich via Chunks und TV's leicht einbauen lässt.
Ziel:- Bilder in ein Verzeichnis hochladen und den Pfad dazu in einer TV angeben
- beim hochladen sollen Bilder die zu groß sind verkleinert werden
- Text zum Bild wird aus dem Dateinamen erstellt (das "zwingt" ordentliche Dateinamen zu verwenden)
Benötigtes Snippet: pThumb (http://modx.com/extras/package/pthumb)
Vorbedingung: Bootstrap muss eingebunden sein und funktionieren - das gibt es auch als Extras (http://modx.com/extras/package/theme.bootstrap) (meines ist manuell eingebunden). Die css und js Dateien von
blueimp Gallery müssen im entsprechenden Ordner liegen.
1. Im Template <head> Bereich, die gallery CSS-Links hinter bootstrap.min.css hinzufügen (Pfad und Name müsst ihr natürlich eurer Umgebung anpassen) z.B.:
<link rel="stylesheet" href="assets/templates/bs3/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/templates/bs3/css/blueimp-gallery.min.css">
<link rel="stylesheet" href="assets/templates/bs3/css/bootstrap-image-gallery.min.css">
2. Im Template <body> Bereich, Chunk "bs3Gallery" einfügen und hinter jquery.min.js und bootstrap.min.js die gallery JS-Links hinzufügen (Pfad und Name müsst ihr natürlich eurer Umgebung anpassen). Hinter dem "content" das Snippet "getImagesFolder" einfügen, z.B.:
[[$bs3Gallery]]
<script src="assets/templates/bs3/js/jquery.min.js" type="text/javascript"></script>
<script src="assets/templates/bs3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/templates/bs3/js/jquery.blueimp-gallery.min.js" type="text/javascript"></script>
<script src="assets/templates/bs3/js/bootstrap-image-gallery.min.js" type="text/javascript"></script>
<div class="container">
[[- z.B. $pdoCrumbs]]
<div id="content">[[*content]]
[[!*tvBS3Gallery:notempty=`[[!getImagesFolder? &path=`assets/files/webXYZ/[[*tvBS3Gallery]]` &extensions=`jpg` &tpl=`tplBS3Gallery`]]`]]
</div>
[[- z.B. $Footer]]
</div>
3. Chunk "bs3Gallery"
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"> </h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title"> </h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev"><i class="glyphicon glyphicon-chevron-left"></i>Zurück</button>
<button type="button" class="btn btn-default play-pause">Slideshow</button>
<button type="button" class="btn btn-default next">Vor<i class="glyphicon glyphicon-chevron-right"></i></button>
</div>
</div>
</div>
</div>
</div>
4. Template Chunk "tplBS3Gallery"
<a data-gallery="gallery" class="img-thumbnail" title="[[+filename:stripGalleryTitle]]" href="[[+path]][[+filename]]"><img style="margin: 3px;" src="[[+path:cat=`[[+filename]]`:phpthumbof=`w=120&h=120&zc=1`]]" alt="[[+filename]]" title="klick für großes Bild" /></a>
5. eine TV "tvBS3Gallery" anlegen:
- Input Type "Text"
- Description "Galerie Verzeichnis (Pfad zu den Bildern ohne / am Anfang und Ende!), z.B.: 2015/ostern"
- Allow Blank "YES", Max Length "100", Min Length "4"
6. Snippet "getImagesFolder"
<?php
// e.g. [[!getImagesFolder? &path=`path/to/images` &extensions=`jpg` &tpl=`colorboxTpl` &class=`group1` &sort=`desc`]]
# V 22.12.003
$path = trim($modx->getOption('path', $scriptProperties, ''), '/').'/';
$class = $modx->getOption('class', $scriptProperties, "");
$sort = $modx->getOption('sort', $scriptProperties, "asc");
$extensions = explode(',', str_replace(' ', '', $modx->getOption('extensions', $scriptProperties, "jpg,png")));
$tpl = $modx->getOption('tpl', $scriptProperties, '<img src="[[+path]][[+filename]]" width="[[+width]]" height="[[+height]]" alt="[[+filename]]" /><br />'.PHP_EOL);
if (($path === '') || !is_dir($path))
return;
$output = '';
$count = 0;
$files = array();
$fields = array();
$fields['path'] = $path;
$fields['class'] = $class;
if (!($handle = opendir($path)))
return "Error: Unable to open directrory '$path'!<br />".PHP_EOL;
while(($file = readdir($handle)) !== false) {
if (is_file($path.$file) && (($pos = strrpos($file, ".")) !== false) && in_array(substr($file, $pos + 1), $extensions))
$files[] = $file;
}
closedir($handle);
if (is_array($files))
{
if (($sort = strtolower(trim($sort))) === "asc")
sort($files);
elseif ($sort === "desc")
rsort($files);
foreach ($files as $file) {
list($fields['width'], $fields['height']) = getimagesize($path.$file);
$fields['filename'] = $file;
$fields['count'] = ++$count;
$chunk = $modx->getChunk($tpl, $fields);
if (!strlen($chunk)) {
$new_tpl = $modx->newObject('modChunk');
$new_tpl->setCacheable(false);
$new_tpl->setContent($tpl);
$chunk = $new_tpl->process($fields);
}
$output .= $chunk;
}
}
return $output;
7. Snippet "stripGalleryTitle"
<?php
$exts = !empty($options) ? explode(',', $options) : array('gif','png','jpeg','jpg');
$exts = array_map('strtolower', $exts);
$extPos = strrpos($input, '.');
if ($extPos !== false && in_array(substr($input, $extPos + 1), $exts)) {
$input = substr($input, 0, $extPos);
}
$strSearch = array('Ae', 'Oe', 'Ue', 'ae', 'oe', 'ue');
$strReplace = array('Ä', 'Ö', 'Ü', 'Ä', 'Ö', 'Ü');
$input = str_replace($strSearch, $strReplace, $input);
$input = str_replace('_',' ',$input);
$input = strtoupper($input);
#$input = ucwords(strtolower($input));
#Besonderheiten
$strSearch = array("BRAÜREI", "BAÜR");
$strReplace = array("BRAUEREI", "BAUER");
$input = str_replace($strSearch, $strReplace, $input);
return $input;
8. Plugin cleanUpload (https://secure.jolichter.de/smf/index.php/topic,228.0.html)
PS: Für jeden User eine eigene Media Sources? Link (https://secure.jolichter.de/smf/index.php/topic,209.0.html)