Upload
daniel-lienert
View
5.455
Download
0
Embed Size (px)
DESCRIPTION
This talk gives you an introduction to YAG - The TYPO3 Photo-Gallery Extension. You will learn about the features and adaptability of the extension.
Citation preview
TYPO3 Photo Gallery Management
Daniel Lienert Student of Computer Science University of Karlsruhe
Michael Knoll Student of Computer Science University of Karlsruhe
Introduction Concepts Extbase Missing parts Under Construction
Searching TER for „gallery“ ▪ 114 Extensions
Comprehensivecomparison: http://www.auskennbert.de/kategorien/typo3/typo3-‐extension-‐galerien-‐im-‐vergleich/
Out-‐of-‐date YAG isnotincluded worthless
PROs + SomestableExtensions + TYPO3 Look &Feel + Communitysupport
CONs -‐ TYPO3 Look &Feel -‐ Ugly Codebase -‐ PoorDocumentation -‐ No Backend Module -‐ Not suitableformanypictures -‐ Out-‐of-‐date (last update 2004...) YOU DON‘T WANT TO USE THEM!
Clean Codebase (Extbaseapproach) Extendable (Theming& API) Scalable (T3 caching) Easy to manage (BE Module) Strictseperation of gallerymanagement and FE presentation
All featuresknownfrom „Big Galleries“ EXIF, Lightbox, Multifile-‐Upload, Skinning, ...
Someinstallationswith up to 15.000 photos (and growing) on high-‐trafficsites Scalable *check*
Proof-‐of-‐conceptforSkinning (different 3-‐rd party themesavailable in TER) Extendable *check* Skinning *check*
Well-‐integrated in TYPO3 Flexible Resolution handling&caching Interfaces for Desktop Applications (e.g. Lightroom)
Flexible Filtering of images (tags, categories, EXIF data, ...)
• Gallery List • Add, edit, delete • Drag & Drop sorting
• Album List • Add, edit, delete • Drag & Drop sorting • Hide / unhide • Set as gallery thumb
• Image List • Edit title / description • Define album thumb • Drag & Drop sorting
• Import images • Flash multifile uploader
• Zip uploader • Import from Server directory
• Maintenance • All facts on one page • Clear page cache only where yag is installed
• Clear / rebuild reolution file cache
• Content element overview shows detailed info
• Maintenance • Gallery list • Specific gallery • Specific album • Specific image
• Select theme
• Item Selector • Select gallery / album / image with an easy to use JS powered selector
Yes, we have one! (60 pages)
Looks like YOU want it!
Frontend rendering is done by themes Lightwight, powerfull and easy to customize Easy to select while adding yag as content element
Later: More details about the elements of a theme
YAG provides 1½ themes out of the box
Single image with detailed view
Single image with lightbox
Several other themes are available in TER yag_themepack_jquery (galleryview / crosslide) yag_theme_simpleviewer (flash viewer) yag_theme_perfectlightbox (alternative lightbox) yag_theme_fancybox (alternative lightbox)
YAG depends on Extbase / Fluid pt_extlist (powerfull list generator)
pt_tools (some pre-‐extbase helper methods)
Extbase + Fluid
pt_extlist • Listing • Filters
pt_tools • Helper methods
YAG
Gallery Album Item
ItemMeta
Category
ResolutionFileCache
„Only“ 6 database tables
Gallery
Album 1
Image 1
Resolution 1
Resolution 2
Resolution 3
Image 2
Album 2
Image 3
Image Management (Backend) Gallery – Album – Items
Image Presentation (Frontend) ArbitraryImage-‐Collections ▪ Gallery – Album – Items ▪ Categories ▪ Tags ▪ ...
Filter Category, Album, Tags, ...
Source images
Filte
r
Image 1 Image 2
Image 3 Image 4
Imag
e Re
pository
Source images
resolutionConfigs { thumb { maxW = 150 maxH = 150 } } „thumb“,imagID
Resolution cache
Automatic Directory Structure (typo3temp)
Fixed # of Images / Folder
Original Images are not changed Structured by Album UID
One folder / album
Typoscript
• General Config • Listdefinition • Image resolution
• CSS/JS Includes
HTML
• Fluid Templates
PHP
• ViewHelper
CSS Javascript
• Effects • Lighbox
Flash
• .. maybe ..
Define the look and behaviour of the gallery / album / item view
pt_extlist configuration General configuration and
resolution definition.
AlbumList.Extlist.ts
AlbumList.ts
GalleryList.Extlist.ts
GalleryList.ts
General.ts
ItemList.Extlist.ts
ItemList.ts
Item.ts
Theme.ts
Code plugin.tx_yag.settings.themes.myFancyTheme <
plugin.tx_yag.settings.themes.default
plugin.tx_yag.settings.themes.myFancyTheme { resolutionConfigs { thumb { width = 150c height = 150c } } includeJS.fancy = EXT:myFencyTheme/Resources/…/fancy.js includeCSS.fancy = EXT:myFencyTheme/Resources/…/fancy.css aThemeSpecificVariable = 42 controller.ItemList.list { template = EXT:fancy/…/Templates/…/List.html } }
Select the theme per plugin instance Different themes on the same page posible
External Image Resource
YAG Importer
(EXIF-‐) Meta Data
Adding to Album
Filesystem-‐ Storage
Currently implemented:
Directory Importer
Multifile Uploader
ZIP File Uploader
Remote Uploader
Crawls directory and imports image files
Extractsuploaded ZIP file and imports image files
Uploads multiple Files via SWF Uploader and importsimages
Handles HTTP requests from Desktop applications, e.g. Lightroom
Used for Filtering Paging Sorting
Generates Image Collections Displayed as galleries, albums, ...
Enables developer to implement their own filters Category Filter Tag Filter EXIF Filter Image-‐Title Filter ...
Our goal: Having generic categories for multiple extensions Having (ExtJs) Tree-‐Widget for editing categories
Nested Sets approach
Category 1
Category 2
Category 4
Category 3
Category 5
Name Left Right
Category 1 1 10
Category 2 2 5
Category 3 6 9
Category 4 3 4
Category 5 7 8
PROs of Nested Sets Fast Reading No Recursive Queries Easy DB implementation
CONs of Nested Sets Slow Writing / Changing Complex INSERTs / UPDATEs Complex PHP implementation
Extbase makes the development of BE modules easy Use the same Controllers / Actions as in FE … same typoscript settings … same data models …
Modules in BE and FE only differs at the presentation layer
Extbase does not have Session Management (yet)
Came up with our own solution
Did not use Annotations / Reflection Session persistence can be part of domain logic No „generic way“ of injecting session data
Makes use of Lifecycle-‐Manager (next slides) Injects session data when starting Persists session data into session when shutting down
Extbase does not have Lifecycle Management (yet)
Came up with our own Lifecycle Management
1. TYPO3 PageRequest
2. Lifecycle Manager is started
3. Session-‐persisted object is created
3.1. Object-‐Data is injected from session
4. Object data changes
5. Lifcycle Manager gets shut down
6. Lifcycle Manager writes object data to
Session
7. Lifcycle Manager is shut down
Use Object-‐Namespace
Problem 1: Guess the key!
$settings[‘plugin‘]...[‘showPager‘]
Problem 2: Assertions (over and over)!
assert_is_integer($settings[...]);
Solution: ConfigurationObjects Keep Domain Logic and Configuration seperated Code-‐Completion for configuration settings Do Assertions only once
Code class Tx_Yag_Domain_Configuration_AlbumList_AlbumListConfig extends Tx_PtExtlist_Domain_Configuration_AbstractConfiguration {
/** * @var string */ protected $albumThumbPartial;
/* ... */
/** * @return string */ public function getAlbumThumbPartial() { return $this->albumThumbPartial; }}
Code class Tx_Yag_Domain_Configuration_ConfigurationBuilder extends Tx_Yag_Domain_Configuration_AbstractConfigurationBuilder {
/** * Holds settings to build configuration objects * @var array */ protected $configurationObjectSettings = array( 'albumList' => array( 'factory' =>
'Tx_Yag_Domain_Configuration_AlbumList_AlbumListConfigFactory'), /* ... */ ); /** * Returns (cached) instance of album configuration * * @return Tx_Yag_Domain_Configuration_AlbumList_AlbumListConfig */ public function buildAlbumListConfiguration() { return $this->buildConfigurationGeneric('albumList'); }}
Problem Folders and files for ▪ Templates ▪ Partials ▪ Layouts
can only be set for all instances of plugin (using Extbase Typoscript conventions)
Solution: Set template for each Controller/Action individually
plugin.tx_yag.settings.themes.myFancyTheme { /* ... */ controller.ItemList.list { template = EXT:fancy/…/Templates/…/List.html }
}
Extbase in frontend Extbase in backend module Extbase in flexform
Code … <settings.context.selectedAlbumUid> <TCEforms> <label>LLL:EXT:yag/Resources/Private/Language/
locallang.xml:tx_yag_flexform_gallery.selectAlbum</label> <config> <type>select</type> <form_type>user</form_type> <userFunc> user_Tx_Yag_Utility_Flexform_RecordSelector->renderAlbumSelector </userFunc> </config> </TCEforms> </settings.context.selectedAlbumUid> …
Code
public function renderAlbumSelector(&$PA, &$fobj) { $this->init(); $template = t3lib_div::getFileAbsFileName('EXT:yag/.../
FlexFormAlbum.html'); $renderer = $this->getFluidRenderer(); $renderer->setTemplatePathAndFilename($template); $renderer->assign('galleries', $galleries);
$content = $renderer->render(); return $content; }
Code protected function init() { $this->bootstrap = t3lib_div::makeInstance('Tx_Extbase_Core_Bootstrap'); $this->bootstrap->initialize($configuration); $this->objectManager = t3lib_div::makeInstance('Tx_Extbase_Object_ObjectManager'); }
protected function getFluidRenderer() { $request = $this->objectManager->get('Tx_Extbase_MVC_Request'); $request->setControllerExtensionName(self::EXTENSION_NAME); $request->setPluginName(self::PLUGIN_NAME);
$this->fluidRenderer = $this->objectManager->get('Tx_Fluid_View_TemplateView'); $controllerContext = $this->objectManager->get('Tx_Extbase_MVC_Controller_ControllerContext'); $controllerContext->setRequest($request); $this->fluidRenderer->setControllerContext($controllerContext);
return $this->fluidRenderer; }
Using „middle layer“ for Extensions of Extbase, suitable for other extensions
Usage of non-‐public-‐API
yag -‐ pt_extlist
pt_extbase
Extbase
TYPO3
Let FE Users Create / Edit / Delete ▪ Galleries ▪ Albums
Upload / Edit / Delete ▪ Images
in Frontend
Has already been implemented Changed to BE Management Dependency on Role-‐Based Access Controll (next)
Mimi
Issue: All records are stored to PID 0 Not possible to assign permission to records on page level.
Not possible to split the data between different authors
Todo Add Sysfolder / Page selector to the BE module Add Sysfolder / Page selector to the CE Keep it usable!
Issue: Add multi language support to labels and descriptions
???
We needed dynamicly generated JavaScript to set environment variables For translation
Problem: Fluid No posibility to define markers ({})
Solution: JavscriptViewhelper / JSTemplates
Code
{namespace yag=Tx_Yag_ViewHelpers} <yag:Javascript.Template templatePath="EXT:yag/Resources/…/
JSTemplates/ItemAdminList.js" arguments="{ajaxBaseURL: '{f:uri.action(controller:\'Ajax\')}'}" />
Code
$('a.album-linkbar-delete').click(function() { var albumUid = $(this).attr("albumUid"); var album = $('tr#albumUid-' + albumUid); $deleteDialog.html('###LLL:tx_yag_controller_album.deleteAlbumDescription###');
$deleteDialog.dialog({ buttons: { "Delete album": function() { $.ajax({ url: del_album_url, data: "###pluginNamespace###[album]="+albumUid, success: function(feedback) { if(feedback=='OK') { $deleteDialog.dialog('close');
Pro: Inline Javascript outsourced in separate files No weird Fluid hacks needed
Con: Markers !
Any suggestions?
Port Backend to ExtJS??? PROs and CONs of JQuery vs. ExtJS
Importer-‐Pluginsfor Desktop Image-‐Management Software (Lightroom, Aperture, iPhoto)
No LUA skills First Prototype is working
Demonstration