MODX Galerie

Jo · 2015-10-12 | 23:24:36

Tutorial für eine benutzerfreundliche Galerie mit Bootstrap 3 und blueimp 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

Vorbedingung: Bootstrap muss eingebunden sein und funktionieren - das gibt es auch als Extras (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.:

Code Auswählen

<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.:

Code Auswählen

[[$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"

Code Auswählen

<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"

Code Auswählen

<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"

Code Auswählen

<?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"

Code Auswählen

<?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

PS: Für jeden User eine eigene Media Sources? Link

BLOG

Neuigkeiten:

MODX Galerie

Jo