Neuigkeiten:

Privates MODX und LINUX BLOG, User Registrierung ist deaktiviert! Fragen oder Tipps? Bitte per Matrix: @jolichter:tchncs.de

Hauptmenü

MODX Galerie

Begonnen von Jo, 2015-10-12 | 23:24:36

« vorheriges - nächstes »

Jo

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.:
<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($input0$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