Your SlideShare is downloading. ×
0
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
YAG - Yet Another Gallery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

YAG - Yet Another Gallery

5,513

Published on

This talk gives you an introduction to YAG - The TYPO3 Photo-Gallery Extension. You will learn about the features and adaptability of the extension.

This talk gives you an introduction to YAG - The TYPO3 Photo-Gallery Extension. You will learn about the features and adaptability of the extension.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
5,513
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. TYPO3  Photo  Gallery  Management  
  • 2. Daniel  Lienert     Student  of  Computer  Science     University  of  Karlsruhe  Michael  Knoll     Student  of  Computer  Science     University  of  Karlsruhe  
  • 3.   Introduction    Concepts    Extbase    Missing  parts    Under  Construction  
  • 4.   Searching  TER  for  „gallery“   ▪  114  Extensions  
  • 5.   Comprehensivecomparison:     http://www.auskennbert.de/kategorien/typo3/ typo3-­‐extension-­‐galerien-­‐im-­‐vergleich/     Out-­‐of-­‐date     YAG  isnotincluded  worthless    
  • 6. PROs  +  SomestableExtensions  +  TYPO3  Look  &Feel  +  Communitysupport  
  • 7. 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!  
  • 8.   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,  ...  
  • 9.   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*  
  • 10.   Well-­‐integrated  in  TYPO3    Flexible  Resolution  handling&caching    Interfaces  for  Desktop  Applications  (e.g.   Lightroom)    Flexible  Filtering  of  images  (tags,  categories,   EXIF  data,  ...)  
  • 11. •  Gallery  List   •  Add,  edit,  delete   •  Drag  &  Drop  sorting  
  • 12. •  Album  List   •  Add,  edit,  delete   •  Drag  &  Drop  sorting   •  Hide  /  unhide   •  Set  as  gallery  thumb  
  • 13. •  Image  List   •  Edit  title  /  description   •  Define  album  thumb   •  Drag  &  Drop  sorting  
  • 14. •  Import  images   •  Flash  multifile   uploader   •  Zip  uploader   •  Import  from  Server   directory  
  • 15. •  Maintenance   •  All  facts  on  one  page   •  Clear  page  cache   only  where  yag  is   installed   •  Clear  /  rebuild   reolution  file  cache  
  • 16. •  Content  element   overview  shows   detailed  info  
  • 17. •  Maintenance   •  Gallery  list   •  Specific  gallery   •  Specific  album   •  Specific  image  •  Select  theme  
  • 18. •  Item  Selector   •  Select  gallery  /   album  /  image  with   an  easy  to  use  JS   powered  selector  
  • 19.   Yes,  we  have  one!  (60  pages)  
  • 20. Looks  like  YOU  want  it!  
  • 21.   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  
  • 22.   YAG  provides    1½   themes  out  of  the   box  
  • 23.   Single  image   with  detailed   view  
  • 24.   Single  image  with   lightbox  
  • 25.   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)  
  • 26. Extbase  +     YAG  depends  on     Fluid     Extbase  /  Fluid     pt_extlist  (powerfull   list  generator)  pt_extlist  • Listing  • Filters   YAG     pt_tools  (some  pre-­‐ extbase  helper   methods)  pt_tools  • Helper   methods  
  • 27. Category   Gallery   Album   Item   ItemMeta   ResolutionFileCache  „Only“  6  database  tables  
  • 28. Gallery   Album  1   Album  2   Image  1   Image  2   Image  3  Resolution   Resolution   Resolution   1   2   3  
  • 29.   Image  Management  (Backend)     Gallery  –  Album  –  Items    Image  Presentation  (Frontend)     ArbitraryImage-­‐Collections   ▪  Gallery  –  Album  –  Items   ▪  Categories   ▪  Tags   ▪  ...  
  • 30. Source   images   Filter   Filter   Category,   Album,   Tags,   ...  Image  1   Image  2  Image  3   Image  4  
  • 31. resolutionConfigs  {  thumb  {  maxW  =  150  maxH  =  150     }  }   „thumb“,imagID   Image  Repository   Source   Resolution   images   cache  
  • 32.   Automatic  Directory  Structure  (typo3temp)    Fixed  #  of  Images  /  Folder  
  • 33.   Original  Images  are  not  changed    Structured  by  Album  UID     One  folder  /  album  
  • 34. Typoscript   HTML   PHP  • General  Config   • Fluid   • ViewHelper  • Listdefinition   Templates  • Image   resolution  • CSS/JS   Includes   CSS   Javascript   Flash   • Effects   • ..  maybe  ..     • Lighbox  
  • 35. AlbumList.Extlist.ts  AlbumList.ts  GalleryList.Extlist.ts  GalleryList.ts  General.ts   Define  the  cook  and  behaviour   General   l onfiguration  and   pt_extlist  configuration   of  the  resolution  definition.   view   gallery  /  album  /  item  ItemList.Extlist.ts  ItemList.ts  Item.ts  Theme.ts  
  • 36. 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 } }
  • 37.   Select  the  theme  per  plugin  instance     Different  themes  on  the  same  page  posible  
  • 38. (EXIF-­‐)   Meta  Data   YAG   Adding  to  Album   Importer  External  Image  Resource   Filesystem-­‐   Storage  
  • 39.   Currently  implemented:   Crawls  directory  and   Uploads  multiple  Directory   imports  image  files   Multifile   Files  via  SWF  Uploader  Importer   Uploader   and  importsimages   Extractsuploaded  ZIP   Handles  HTTP  requests   ZIP  File   file  and  imports  image   Remote   from  Desktop  Uploader     files   Uploader   applications,  e.g.   Lightroom  
  • 40.   Used  for     Filtering     Paging     Sorting    Generates  Image  Collections     Displayed  as  galleries,  albums,  ...  
  • 41.   Enables  developer  to  implement  their  own   filters     Category  Filter     Tag  Filter     EXIF  Filter     Image-­‐Title  Filter     ...  
  • 42.   Our  goal:     Having  generic  categories  for  multiple  extensions     Having  (ExtJs)  Tree-­‐Widget  for  editing  categories  
  • 43.   Nested  Sets  approach   Category   Name   Left   Right   1   Category  1   1   10   Category  2   2   5   Category   Category   2   3   Category  3   6   9   Category  4   3   4   Category   Category   Category  5   7   8   4   5  
  • 44.   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  
  • 45.   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  
  • 46.   Extbase  does  not  have  Session  Management   (yet)    Came  up  with  our  own  solution  
  • 47.   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  
  • 48.   Extbase  does  not  have  Lifecycle   Management  (yet)    Came  up  with  our  own  Lifecycle   Management  
  • 49. 1.  TYPO3  PageRequest   7.  Lifcycle  Manager  is   2.  Lifecycle  Manager   shut  down   is  started  6.  Lifcycle  Manager   3.  Session-­‐persisted    writes  object  data  to   Use  Object-­‐ object  is  created   Session   Namespace   3.1.  Object-­‐Data  is   5.  Lifcycle  Manager  gets   injected  from  session   shut  down   4.  Object  data  changes  
  • 50.   Problem  1:  Guess  the  key!   $settings[‘plugin‘]...[‘showPager‘]
  • 51.   Problem  2:  Assertions  (over  and  over)!     assert_is_integer($settings[...]);
  • 52.   Solution:  ConfigurationObjects     Keep  Domain  Logic  and  Configuration  seperated     Code-­‐Completion  for  configuration  settings     Do  Assertions  only  once  
  • 53. 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; } }
  • 54. 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); } }
  • 55.   Problem     Folders  and  files  for   ▪  Templates   ▪  Partials   ▪  Layouts     can  only  be  set  for  all  instances  of  plugin     (using  Extbase  Typoscript  conventions)  
  • 56.   Solution:  Set  template  for  each  Controller/ Action  individually  plugin.tx_yag.settings.themes.myFancyTheme  {         /*  ...  */         controller.ItemList.list  {       template  =  EXT:fancy/…/Templates/…/List.html     }  }  
  • 57.   Extbase  in  frontend    Extbase  in  backend  module    Extbase  in  flexform        
  • 58. 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> …
  • 59. 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; }
  • 60. 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; }
  • 61.   Using  „middle  layer“  for       Extensions  of  Extbase,  suitable  for  other   extensions     Usage  of  non-­‐public-­‐API   yag  -­‐  pt_extlist   pt_extbase   Extbase   TYPO3  
  • 62.   Let  FE  Users     Create  /  Edit  /  Delete   ▪  Galleries   ▪  Albums     Upload  /  Edit  /  Delete   ▪  Images     in  Frontend  
  • 63.   Has  already  been  implemented    Changed  to  BE  Management    Dependency  on  Role-­‐Based  Access  Controll   (next)  
  • 64.   Mimi  
  • 65.   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!  
  • 66.   Issue:  Add  multi  language  support  to  labels   and  descriptions  
  • 67.   ???  
  • 68.   We  needed  dynamicly  generated  JavaScript     to  set  environment  variables     For  translation    Problem:  Fluid     No  posibility  to  define  markers  ({})    Solution:       JavscriptViewhelper  /  JSTemplates  
  • 69. Code   {namespace yag=Tx_Yag_ViewHelpers} <yag:Javascript.Template templatePath="EXT:yag/Resources/…/ JSTemplates/ItemAdminList.js" arguments="{ajaxBaseURL: {f:uri.action(controller:Ajax)}}" />
  • 70. 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);
  • 71.   Pro:     Inline  Javascript  outsourced  in  separate  files     No  weird  Fluid  hacks  needed    Con:     Markers  !    Any  suggestions?  
  • 72.   Port  Backend  to  ExtJS???     PROs  and  CONs  of  JQuery  vs.  ExtJS  
  • 73.   Importer-­‐Pluginsfor  Desktop  Image-­‐ Management  Software  (Lightroom,  Aperture,   iPhoto)    No  LUA  skills    First  Prototype  is  working  
  • 74.   Demonstration  

×