Although there are currently about 150 gallery-related extensions in TER, none of them fullfills the needs of modern gallery applications or is hard to use and not-well maintained. YAG is the first gallery extension for TYPO3 that is about to change this. Implemented using Fluid/Extbase and modern Ajax technology, it has a dedicated backend module for managing its contents and uses an advanced theming concept for personlization in the frontend. YAG also ships with mass-file upload and enhanced resolution handling. Integrated image caching enables delivery of every managed photo in every resolution. TYPO3 frontend caching enables quick page load and short response times which makes YAG usable for high-traffic sites. Web sites with up to 20.000 photos are more than a proof-of-concept. We will also present you the new features available with the upcomming YAG Version 2.0, like using the full power of the TYPO3 page tree and frontend editing with a fine grained access control concept. During this 45minutes talk we will present to you an overview of YAG's features and you will learn how the Front- and Backend looks like. There will be a short introduction into the theming concept so you will get an impression on how to create your own personlized theme. If you think about joining this session, take a look at http://www.yag-gallery.de for further information and a bunch of demo-pages that shows the power of the extension.

1. TYPO3 Photo Gallery Management

2. Daniel Lienert
Frankfurt / Germany
TYPO3 Developer
Twitter: @dlienert
Michael Knoll
Karlsruhe / Germany
TYPO3 Developer
Twitter: @kaktusmimi

3.  Introduction
 Concepts
 Backend / Frontend
 Build your own theme

5.  Searching TER for „gallery“
▪ 120 Extensions

6. Easy customization
Scalability
Lightroom Export
Backend Module
Skinning Usability
ArbitraryResolutions
Speed
Extendability Clean Codebase

7.  Clean Codebase (Extbase approach)
 Extendable (Theming & API)
 Scalable (T3 caching)
 Easy to manage (BE Module)
 Strict seperation of gallery management and
frontend representation
 All features known from„Big Galleries“
 EXIF, Lightbox, Multifile-Upload, Skinning, ...

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

9. ...that empower yag

10. Extbase +
Fluid
 YAG depends on
 Extbase / Fluid
 pt_extlist (powerfull
list generator)
pt_extlist
•Listing
•Filters
YAG  pt_extbase (some
extbase / pre-
extbase helper
methods)
pt_extbase
•Helper
methods

11. Gallery
Album 1 Album 2
Version 2.0 will
come up with
Image 1 Image 2 Image 3
Resolution PIDs!!!
Resolution Resolution
1 2 3

12.  Image Management (Backend)
 Gallery -> Album -> Items
 Image Presentation (Frontend)
 Arbitrary Image-Collections
▪ Gallery – Album – Items
▪ Categories
▪ Tags
▪ ...

13. Source
images
Filter
Filter
Category,
Album, Tags
,
...

14.  A typoscript-defined representation
of an image
 Define as many as you want

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

16. Meta Data
extraction
YAG
Album allocation
Importer
External Image
Resource
Filesystem-
Storage

17.  Currently implemented:
Crawls directory and Uploads multiple
Directory imports image files Multifile Files via SWF Uploader
Importer Uploader
Extracts uploaded ZIP Handles HTTP requests
ZIP File file and imports image Remote from Desktop
Uploader files Uploader applications, e.g.
Lightroom

18. ...made for usability

20. • Gallery List
• Add, edit, delete
• Drag & Drop sorting

21. • Album List
• Add, edit, delete
• Drag & Drop sorting
• Hide / unhide
• Set gallery preview
album

22. • Album Edit List
• Batch editing of
albums
• Reassign albums to
galleries

23. • Image List
• Edit title / description
• Define album thumb
• Drag & Drop sorting
• Change default
sorting to title /
capture date /
filename

24. • Image Edit List
• Batch editing of
images

25. • Import images
• Flash multifile uploader
• Zip uploader
• Import from Server
directory

26. • Maintenance
• All facts on one page
• Clear page cache of
pages on which yag
is installed

27. • Maintenance
• Clear / rebuild the
resolution file cache

28. • Content element
overview shows
detailed info

29. • Maintenance
• Gallery list
• Specific gallery
• Specific album
• Specific image
• Select theme

30. • Item Selector
• Select gallery /
album / image with
an easy to use JS
powered selector

31.  Sure! (60+ pages)

32. ...your personal look and feel

33.  Frontend rendering is done by themes
 Lightweight, powerful and easy to customize
 Easy to select while adding yag as content
element

34.  Select the theme per plugin instance
 Different themes on the same page are possible

36.  YAG provides 1½
themes out of the
box

37.  Single image
with detailed
view

38.  Single image with
lightbox

39.  Several other themes are available in TER
 yag_themepack_jquery
▪ Galleryview
▪ Crosslide
▪ Isotope
▪ superSized
▪ Rondell / Rondell Gallery
 yag_theme_perfectlightbox (alternative lightbox)
 yag_theme_fancybox (alternative lightbox)

40.  Some live examples ..

41.  Demonstration

43. Typoscript HTML PHP
• General Config • Fluid Templates • ViewHelper
• List definition • Filters
• Image resolution
• CSS/JS Includes
CSS Javascript
• Effects
• Lighbox

44. AlbumList.Extlist.ts
AlbumList.ts
GalleryList.Extlist.ts
GalleryList.ts
General.ts Define the configuration and
General look and behaviour
pt_extlist configuration
of the resolution definition. view
gallery / album / item
ItemList.Extlist.ts
ItemList.ts
Item.ts
Theme.ts

45. Typoscript
Code
plugin.tx_yag.settings.themes {
myFancyTheme < plugin.tx_yag.settings.themes.default
myFancyTheme {
thumb = GIFBUILDER
thumb {
resolutionConfigs { XY = [10.w],[10.h]
thumb {
width = 150c 10 = IMAGE
height = 150c 10 {
} file.maxH = 170
file.maxW = 170
}
file.import.field = yagImage
}
includeJS.fancy = EXT:myFencyTheme/Resources/…/fancy.js
includeCSS.fancy = EXT:myFencyTheme/Resources/…/fancy.css
20 = IMAGE
20 {
file = EXT:yag/Tests/TestImages/watermark.png
aThemeSpecificVariable = 42 offset = [10.w]-100,[10.h]-70
}
controller.ItemList.list {
}
template = EXT:fancy/…/Templates/…/List.html
}
}
}

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

47. Access Typoscript Settings
Typoscript
Code
plugin.tx_yag.settings.themes.myFancyTheme {
specialClass= foo
}
Template
<div class={config.specialClass}>
<yag:image item="{listRow.image.value}" resolutionName="thumb" />
</div>

48. Include Javascript
 Inline Javascript with Fluid can be pure pain.
 Our approach: JS Template ViewHelper
Template
<yag:Javascript.template
templatePath="EXT:../JSTemplates/CustomScript.js"
addToHead=„1"
arguments="{key1:‚value', key2:‚value2'}
/>

49. Include Javascript
Javscript Template
function demo() {
if(###key1### == value) {
alert(###LLL:tx_yag_controller_gallery.sortingSaved###);
}
}

51.  YAG 1.x: All records are stored on PID 0
 No possibility to set permissions for galleries to
authors in backend / user in frontend
 No multipage installations
 YAG 2.x
 Sysfolder / Page selector in BE module
 Sysfolder / Page selector to CE
 Keep it simple and usable!

52.  Our goal:
 Having generic categories for multiple extensions
 Having (ExtJs) Tree-Widget for editing categories

53.  Let FE Users
 Create / Edit / Delete
▪ Galleries
▪ Albums
 Upload / Edit / Delete
▪ Images
in Frontend

55.  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/yag-gallery/yag