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