YAG - Yet Another Gallery / T3CON11

5,167 views

Published on

TYPO3 Photo Gallery Management with YAG - Yet Another Gallery. The slides give you a brief overview on the concepts behind yag, the look and functionalities of our backend module and a small tutorial on how you can build your own YAG frontend theme.

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

No Downloads
Views
Total views
5,167
On SlideShare
0
From Embeds
0
Number of Embeds
2,754
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

YAG - Yet Another Gallery / T3CON11

  1. 1. YAG – YetAnother Gallery<br />TYPO3 Photo Gallery Management<br />
  2. 2. Who weare<br />Daniel Lienert<br /> Student of Computer Science<br /> University of Karlsruhe<br />Michael Knoll<br /> Student of Computer Science<br /> University of Karlsruhe<br />
  3. 3. Outline<br />Introduction<br />Concepts<br />Backend / Frontend<br />Buildyourowntheme<br />UnderConstruction<br />
  4. 4. Introduction<br />
  5. 5. Before YAG<br />Searching TER for „gallery“<br />114 Extensions<br />
  6. 6. Before YAG<br />Comprehensivecomparison:<br />http://www.auskennbert.de/kategorien/typo3/typo3-extension-galerien-im-vergleich/<br />Out-of-date<br />
  7. 7. Gallery Extension Comparison<br />
  8. 8. Do wereallyneedanothergallery ??<br />
  9. 9. CurrentExtensions<br />PROs<br />+ SomestableExtensions<br />+ TYPO3 Look & Feel<br />+ Community support<br />
  10. 10. CurrentExtensions<br />CONs<br />- TYPO3 Look & Feel<br />- Ugly Codebase<br />- Poor Documentation<br />- No Backend Module<br />- Not suitableformanypictures<br /><ul><li>Out-of-date (last update 2004...)</li></ul> YOU DON‘T WANT TO USE THEM!<br />
  11. 11. YAG Goals<br />Clean Codebase (Extbaseapproach)<br />Extendable (Theming & API)<br />Scalable (T3 caching)<br />Easy to manage (BE Module)<br />Strictseperationofgallerymanagementandfrontendrepresentation<br />All featuresknownfrom„Big Galleries“<br />EXIF, Lightbox, Multifile-Upload, Skinning, ...<br />
  12. 12. Wherewearetoday<br />Someinstallationswithup to 15.000 photos (and growing) on high-trafficsites<br /> Scalable *check*<br />Skinning (different themepackagesavailable in TER)<br /> Extendable *check*<br /> Skinning *check*<br />
  13. 13. Further Goals<br />Well-integrated in TYPO3<br />Flexible Resolution handling & caching<br />Interfaces for Desktop Applications (e.g. Lightroom)<br />Flexible Filtering of images (tags, categories, EXIF data, ...)<br />
  14. 14. Concepts<br />behind YAG<br />
  15. 15. Underthehood<br />YAG depends on <br />Extbase / Fluid<br />pt_extlist (powerfulllistgenerator)<br />pt_extbase (someextbase / pre-extbasehelpermethods)<br />
  16. 16. Image Organization<br />
  17. 17. Image Organization<br />Image Management (Backend)<br />Gallery -> Album -> Items<br />Image Presentation (Frontend)<br />Arbitrary Image-Collections<br />Gallery – Album – Items<br />Categories<br />Tags<br />...<br />
  18. 18. Image Organization<br />Source images<br />Filter<br />Category,Album, Tags,...<br />Filter<br />
  19. 19. Image Resolutions<br />A typoscript-definedrepresentationof an image<br />Defineasmanyasyouwant<br />
  20. 20. Image Repository<br />resolutionConfigs {<br />thumb {<br />maxW = 150<br />maxH = 150<br /> }<br />}<br />Image Repository<br />imagID, „thumb“<br />Source images<br />Resolution cache<br />
  21. 21. Hash File System<br />Automatic Directory Structure<br />Fixed # of Images / folder<br />-> extremlyscalable<br />
  22. 22. Original Images Management<br />Original Images areneverchanged<br />UploadedimagesstructuredbyalbumUid<br />One folder / album<br />
  23. 23. Importer<br />(EXIF-)Meta Data<br />YAGImporter<br />Adding to Album<br />External Image<br />Resource<br />Filesystem-Storage<br />
  24. 24. Importer<br />Currentlyimplemented:<br />Uploads multiple<br />Files via SWF Uploader<br />Crawls directory and<br />imports image files<br />Extractsuploaded ZIPfile and imports imagefiles<br />Handles HTTP requests<br />from Desktop applications, e.g. Lightroom<br />
  25. 25. YAG Backend Module<br />
  26. 26. Backend Module<br /><ul><li>Gallery List
  27. 27. Add, edit, delete
  28. 28. Drag & Drop sorting</li></li></ul><li>Backend Module<br /><ul><li>Album List
  29. 29. Add, edit, delete
  30. 30. Drag & Drop sorting
  31. 31. Hide / unhide
  32. 32. Set gallerypreviewalbum</li></li></ul><li>Backend Module<br /><ul><li>Album Edit List
  33. 33. Batch editingofalbums
  34. 34. Reassignalbumsto galleries</li></li></ul><li>Backend Module<br /><ul><li>Image List
  35. 35. Edit title / description
  36. 36. Definealbumthumb
  37. 37. Drag & Drop sorting
  38. 38. Change defaultsortingto title / capturedate / filename</li></li></ul><li>Backend Module<br /><ul><li>Image Edit List
  39. 39. Batch editingofimages</li></li></ul><li>Backend Module<br /><ul><li>Import images
  40. 40. Flash multifileuploader
  41. 41. Zipuploader
  42. 42. Import from Server directory</li></li></ul><li>Backend Module<br /><ul><li>Maintenance
  43. 43. All facts on onepage
  44. 44. Clear pagecacheofpages on whichyagisinstalled</li></li></ul><li>Backend Module<br /><ul><li>Maintenance
  45. 45. Clear / rebuildtheresolutionfilecache</li></li></ul><li>Backend / Content Element<br /><ul><li>Content elementoverviewshowsdetailedinfo</li></li></ul><li>Backend / Content Element<br /><ul><li>Maintenance
  46. 46. Gallery list
  47. 47. Specific gallery
  48. 48. Specific album
  49. 49. Specific image
  50. 50. Select theme</li></li></ul><li>Backend / Content Element<br /><ul><li>Item Selector
  51. 51. Select gallery / album / imagewith an easy touse JS poweredselector</li></li></ul><li>Documentation?<br />Sure! (60+ pages)<br />
  52. 52. Frontend<br />YAG looks like YOU want it!<br />
  53. 53. Frontend / Themes<br />Frontend renderingisdonebythemes<br />Lightwight, powerfulland easy tocustomize<br />Easy toselectwhileaddingyagascontentelement<br />
  54. 54. Frontend / Themes<br />YAG provides 1½ themes out ofthe box<br />
  55. 55. Frontend / Themes<br />Single imagewithdetailedview<br />
  56. 56. Frontend / Themes<br />Single imagewithlightbox<br />
  57. 57. Frontend / Themes<br />Several other themes are available in TER<br />yag_themepack_jquery<br />Galleryview<br />Crosslide<br />Isotope<br />superSized<br />yag_theme_simpleviewer (flashviewer)<br />yag_theme_perfectlightbox (alternative lightbox)<br />yag_theme_fancybox (alternative lightbox)<br />
  58. 58. Themes / Selection<br />Select thetheme per plugininstance<br />Different themes on the same pagearepossible<br />
  59. 59. Frontend / Themes<br />Someexamples .. <br />
  60. 60. tt_news Integration<br />Demonstration<br />
  61. 61. Theming<br />
  62. 62. Themes<br />
  63. 63. pt_extlistconfiguration<br />Definethelookandbehaviour<br />ofthegallery / album / item view<br />General configurationandresolutiondefinition.<br />Themes / Typoscript<br />
  64. 64. So easy tobuildyourowntheme!<br />Typoscript<br />plugin.tx_yag.settings.themes {<br />myFancyTheme < plugin.tx_yag.settings.themes.default<br />myFancyTheme {<br />resolutionConfigs { <br />thumb {<br />width = 150c<br />height = 150c<br /> }<br /> }<br />includeJS.fancy = EXT:myFencyTheme/Resources/…/fancy.js<br />includeCSS.fancy = EXT:myFencyTheme/Resources/…/fancy.css<br />aThemeSpecificVariable = 42<br />controller.ItemList.list {<br />template = EXT:fancy/…/Templates/…/List.html<br /> }<br /> }<br />}<br />thumb = GIFBUILDER<br />thumb {<br /> XY = [10.w],[10.h]<br /> <br />  10 = IMAGE<br />  10 {<br />         file.maxH = 170<br />         file.maxW = 170<br />         file.import.field = yagImage<br />      }<br /> <br />  20 = IMAGE<br />  20 {<br />file = EXT:yag/Tests/TestImages/watermark.png<br />    offset = [10.w]-100,[10.h]-70<br />    }<br /> }<br />
  65. 65. So easy tobuildyourowntheme!<br />Template<br />…<br /><f:for each="{listData}"key="rowIndex"as="listRow"><br /><divclass=image"> <yag:image item="{listRow.image.value}"resolutionName="thumb"/></div><br /></f:for><br />…<br />Output<br />…<br /><divclass=image>     <img alt=„A Title" title=„A Title"<br />src="typo3temp/yag/00/81x4e876324374b0.jpg„width="150"height="100"></div>…<br />
  66. 66. So easy tobuildyourowntheme!<br />Access Typoscript Settings<br />Typoscript<br />plugin.tx_yag.settings.themes.myFancyTheme {<br />specialClass= foo<br />}<br />Template<br /><divclass={config.specialClass}>     <yag:image item="{listRow.image.value}"resolutionName="thumb"/></div><br />
  67. 67. So easy tobuildyourowntheme!<br />IncludeJavascript<br /><ul><li>InlineJavascriptwith Fluid canbe pure pain.
  68. 68. Ourapproach: JS Template ViewHelper</li></ul>Template<br /><yag:Javascript.templatetemplatePath="EXT:../JSTemplates/CustomScript.js"addToHead=„1"arguments="{key1:‚value', key2:‚value2'} <br />/><br />
  69. 69. So easy tobuildyourowntheme!<br />IncludeJavascript<br />Javscript Template<br />functiondemo() {<br />if(###key1### == value) {<br /> alert(###LLL:tx_yag_controller_gallery.sortingSaved###); }<br />}<br />
  70. 70. The missingparts<br />
  71. 71. Categories<br />Ourgoal:<br />Havinggenericcategoriesfor multiple extensions<br />Having (ExtJs) Tree-Widgetforeditingcategories<br />
  72. 72. Frontend Editing<br />Let FE Users<br />Create / Edit / Delete<br />Galleries<br />Albums<br />Upload / Edit / Delete<br />Images<br /> in Frontend<br />
  73. 73. Supporting PIDs<br />Issue: All records arestoredto PID 0<br />Impossibletoassignpermissiontorecords on pagelevel.<br />Impossibletosplitdatabetween different authors<br />Todo<br />Add Sysfolder / Page selectorto BE module<br />Add Sysfolder / Page selectorto CE<br />Keep it simple andusable!<br />
  74. 74. SupportingLocalization<br />Issue: Add multilanguagesupportto item labelsanddescriptions<br />
  75. 75. More Information<br />Our Website<br />http://www.yag-gallery.de<br />YAG on forge.typo3.org<br />http://forge.typo3.org/projects/extension-yag<br />Code on GitHub<br />https://github.com/michaelknoll/yag<br />

×