Neue TYPO3 Extension: Generic Gallery

Felix Nagel - 28. Mai 2011 - Webentwicklung, TYPO3

Bereits seit einiger Zeit ist eine neue Extension von mir im TER: Generic Gallery. Entstanden aus dem Wunsch nicht mehr für jede, wenig aber genug vom Standard abweichende, Bildergalerie, Teaser oder Visual Slide Geschichte eine neue Extension zu programmieren. Ziel war es ein einheitliches Formular im Backend und maximale Flexibilität im Forntend zu gewährleisten.

Die Extension bietet ein ausgeklügeltes, auf schnelle Frontend Entwicklung ausgelegtes Templating und ein einfaches aber funktionales Backend Layout. Das erste Bild fest im Quellcode alle weiteren per Java-Script hinzufügen? Reihen mit einer bestimmten Anzahl von Bildern? Mehrere Thumbs in verschiedener Größe und zugeschnitten? Kein Problem.

Die Extension kann mit jedem DAM Feld umgehen (und unterstützt dabei Fallback Felder), kann EXIF sowie IPTC Daten verarbeiten und hat eine AJAX Schnittstelle (XML oder JSON). Damit sollte so ziemlich jede Anforderung im Rahmen der Möglichkeiten von HTML, CSS und einem Java-Script Framework wie jQuery oder MooTools umsetzbar sein.

Gepflegt wird entweder, für eine große Anzahl von Bildern, duch einfaches hinzufügen oder jedes Bild einzeln per angenehmen AJAX gestütztem IRRE Formular. Dann kann auch für jedes Bild noch Titel, Link und per RTE gepflegter Text eingegeben werden.

Screenshots Backend

Generic Gallery Template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>generic gallery default template file</title>
  
  <!-- ###TEMPLATE_FILES### begin -->
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
    
    <script type="text/javascript" src="typo3conf/ext/generic_gallery/res/js/ui.ariaLightbox.js"></script>
    <link href="typo3conf/ext/generic_gallery/res/css/lightbox.css" rel="stylesheet" type="text/css" />  
    
    <style type="text/css">
      .tx-genericgallery-pi1 div { float: left; margin: 0 10px 10px 0;}
    </style>    
  <!-- ###TEMPLATE_FILES### end -->
  
    <script type="text/javascript">
  <!-- ###TEMPLATE_CODE### begin -->
    $(function() {  
      $(".lightbox").ariaLightbox();
    });        
  <!-- ###TEMPLATE_CODE### end -->
  </script>
</head>
<body>

<h3>content template</h3>
<!-- ###TEMPLATE_CONTENT### begin -->
  <div id="gallery###UID###">
  <!-- ###ROW### begin -->
    <!-- ###IMAGE_1### begin -->
      <div>
        <a href="###IMAGE###" class="lightbox">
          <img src="###THUMB_1###" alt="###DAM_TITLE###" title="###DAM_DESCRIPTION###" />
        </a>
        <span><a href="###LINK###">###TITLE###</a></span>
      </div>
    <!-- ###IMAGE_1### end -->    
  <!-- ###ROW### end -->    
  </div>
<!-- ###TEMPLATE_CONTENT### end -->

</body>
</html>

Beispiel Template Datei (default.html Demo): alles was HTML, CSS und Java-Script angeht kann bequem in einer HTML Datei erledigt werden.

Generic Gallery TypoScript

plugin.tx_genericgallery_pi1 {
	gallery {
		default {
			name = Default Gallery
			template = EXT:generic_gallery/res/templates/default.html
			damMarker = title, description, file_name, file_path, file_size, file_type, alt_text, caption, hpixels, vpixels, color_space
			marker {
				# multiple fields possible as backfall
				IMAGE_DESCRIPTION = description // caption // alt_text // title
			}
			range {
				content = 1-1000
				# code = 1-100
			}
			image {
				maxW = 800
				maxH = 600
			}
			thumb {
				1 {
					maxW = 200
					maxH = 100
				}
			}
		}
	}
}

Konfiguration für einen Galerie Typ, Erklärung der Einstellungen in der Dokumentation

Demo & Download

In der neuen Version 3.0.0 kamen die marker mit Backfall und die leider noch undokumentierten custom marker hinzu. Außerdem hab ich die Demos verbessert.

Zur Zeit ist die Nutzung der Extension DAM Pflicht. Zumindest sobald ich es brauche oder jemand mir einen patch zukommen lässt.

Demo Fotogalerie

TYPO3 TER

Extension-Key: generic_gallery

0 Kommentare Permalink