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.

1. YAG – YetAnother Gallery TYPO3 Photo Gallery Management

2. Who weare Daniel Lienert Student of Computer Science University of Karlsruhe Michael Knoll Student of Computer Science University of Karlsruhe

3. Outline Introduction Concepts Backend / Frontend Buildyourowntheme UnderConstruction

4. Introduction

5. Before YAG Searching TER for „gallery“ 114 Extensions

6. Before YAG Comprehensivecomparison: http://www.auskennbert.de/kategorien/typo3/typo3-extension-galerien-im-vergleich/ Out-of-date

7. Gallery Extension Comparison

8. Do wereallyneedanothergallery ??

9. CurrentExtensions PROs + SomestableExtensions + TYPO3 Look & Feel + Community support

11. YAG Goals Clean Codebase (Extbaseapproach) Extendable (Theming & API) Scalable (T3 caching) Easy to manage (BE Module) Strictseperationofgallerymanagementandfrontendrepresentation All featuresknownfrom„Big Galleries“ EXIF, Lightbox, Multifile-Upload, Skinning, ...

12. Wherewearetoday Someinstallationswithup to 15.000 photos (and growing) on high-trafficsites  Scalable *check* Skinning (different themepackagesavailable in TER)  Extendable *check*  Skinning *check*

13. Further Goals Well-integrated in TYPO3 Flexible Resolution handling & caching Interfaces for Desktop Applications (e.g. Lightroom) Flexible Filtering of images (tags, categories, EXIF data, ...)

14. Concepts behind YAG

15. Underthehood YAG depends on Extbase / Fluid pt_extlist (powerfulllistgenerator) pt_extbase (someextbase / pre-extbasehelpermethods)

16. Image Organization

17. Image Organization Image Management (Backend) Gallery -> Album -> Items Image Presentation (Frontend) Arbitrary Image-Collections Gallery – Album – Items Categories Tags ...

18. Image Organization Source images Filter Category,Album, Tags,... Filter

19. Image Resolutions A typoscript-definedrepresentationof an image Defineasmanyasyouwant

20. Image Repository resolutionConfigs { thumb { maxW = 150 maxH = 150 } } Image Repository imagID, „thumb“ Source images Resolution cache

21. Hash File System Automatic Directory Structure Fixed # of Images / folder -> extremlyscalable

22. Original Images Management Original Images areneverchanged UploadedimagesstructuredbyalbumUid One folder / album

23. Importer (EXIF-)Meta Data YAGImporter Adding to Album External Image Resource Filesystem-Storage

24. Importer Currentlyimplemented: Uploads multiple Files via SWF Uploader Crawls directory and imports image files Extractsuploaded ZIPfile and imports imagefiles Handles HTTP requests from Desktop applications, e.g. Lightroom

25. YAG Backend Module

27. Add, edit, delete

29. Add, edit, delete

30. Drag & Drop sorting

31. Hide / unhide

33. Batch editingofalbums

35. Edit title / description

36. Definealbumthumb

37. Drag & Drop sorting

40. Flash multifileuploader

41. Zipuploader

43. All facts on onepage

46. Gallery list

47. Specific gallery

48. Specific album

49. Specific image

52. Frontend YAG looks like YOU want it!

53. Frontend / Themes Frontend renderingisdonebythemes Lightwight, powerfulland easy tocustomize Easy toselectwhileaddingyagascontentelement

54. Frontend / Themes YAG provides 1½ themes out ofthe box

55. Frontend / Themes Single imagewithdetailedview

56. Frontend / Themes Single imagewithlightbox

57. Frontend / Themes Several other themes are available in TER yag_themepack_jquery Galleryview Crosslide Isotope superSized yag_theme_simpleviewer (flashviewer) yag_theme_perfectlightbox (alternative lightbox) yag_theme_fancybox (alternative lightbox)

58. Themes / Selection Select thetheme per plugininstance Different themes on the same pagearepossible

59. Frontend / Themes Someexamples ..

60. tt_news Integration Demonstration

61. Theming

62. Themes

63. pt_extlistconfiguration Definethelookandbehaviour ofthegallery / album / item view General configurationandresolutiondefinition. Themes / Typoscript

64. So easy tobuildyourowntheme! Typoscript plugin.tx_yag.settings.themes { myFancyTheme < plugin.tx_yag.settings.themes.default 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 } } } thumb = GIFBUILDER thumb { XY = [10.w],[10.h] 10 = IMAGE 10 { file.maxH = 170 file.maxW = 170 file.import.field = yagImage } 20 = IMAGE 20 { file = EXT:yag/Tests/TestImages/watermark.png offset = [10.w]-100,[10.h]-70 } }

65. So easy tobuildyourowntheme! Template … <f:for each="{listData}"key="rowIndex"as="listRow"> <divclass=image"> <yag:image item="{listRow.image.value}"resolutionName="thumb"/></div> </f:for> … Output … <divclass=image> <img alt=„A Title" title=„A Title" src="typo3temp/yag/00/81x4e876324374b0.jpg„width="150"height="100"></div>…

66. So easy tobuildyourowntheme! Access Typoscript Settings Typoscript plugin.tx_yag.settings.themes.myFancyTheme { specialClass= foo } Template <divclass={config.specialClass}> <yag:image item="{listRow.image.value}"resolutionName="thumb"/></div>

68. Ourapproach: JS Template ViewHelperTemplate <yag:Javascript.templatetemplatePath="EXT:../JSTemplates/CustomScript.js"addToHead=„1"arguments="{key1:‚value', key2:‚value2'} />

69. So easy tobuildyourowntheme! IncludeJavascript Javscript Template functiondemo() { if(###key1### == value) { alert(###LLL:tx_yag_controller_gallery.sortingSaved###); } }

70. The missingparts

71. Categories Ourgoal: Havinggenericcategoriesfor multiple extensions Having (ExtJs) Tree-Widgetforeditingcategories

72. Frontend Editing Let FE Users Create / Edit / Delete Galleries Albums Upload / Edit / Delete Images in Frontend

73. Supporting PIDs Issue: All records arestoredto PID 0 Impossibletoassignpermissiontorecords on pagelevel. Impossibletosplitdatabetween different authors Todo Add Sysfolder / Page selectorto BE module Add Sysfolder / Page selectorto CE Keep it simple andusable!

74. SupportingLocalization Issue: Add multilanguagesupportto item labelsanddescriptions

75. More Information Our Website http://www.yag-gallery.de YAG on forge.typo3.org http://forge.typo3.org/projects/extension-yag Code on GitHub https://github.com/michaelknoll/yag