YAG – Yet Another Gallery
TYPO3 Photo Gallery Management
Who we areDaniel Lienert
Frankfurt / GermanyTYPO3 Developer Twitter: @dlienert
Michael KnollKarlsruhe / GermanyTYPO3 Developer
Twitter: @kaktusmimi
Outline
Introduction Concepts Backend / Frontend Build your own theme
The personal itch...
Before YAG
Searching TER for „gallery“▪ 120 Extensions
Backend Module
Skinning
Scalability
Usability
Extendability
Speed
Lightroom Export
Clean Codebase
ArbitraryResolutions
Easy customization
YAG Goals
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, ...
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, ...)
Some Concepts......that empower yag
Under the hood YAG depends on
Extbase / Fluid pt_extlist
(powerfull list generator)
pt_extbase (some extbase / pre-extbase helper methods)
Extbase + Fluid
pt_extlist•Listing•Filters
pt_extbase•Helper methods
YAG
Image Organization
Gallery
Album 1
Image 1
Resolution 1
Resolution 2
Resolution 3
Image 2
Album 2
Image 3
Version 2.0 will come up with PIDs!!!
Image Organization
Image Management (Backend) Gallery -> Album -> Items
Image Presentation (Frontend) Arbitrary Image-Collections▪ Gallery – Album – Items▪ Categories▪ Tags▪ ...
Image Organization
FilterCategory,
Album, Tags,
...
Source images
Filt
er
Image 1
Image 2
Image 3
Image 4
Image Resolutions
A typoscript-defined representation of an image
Define as many as you want
Image Repository
Image R
eposi
tory
Source images
resolutionConfigs {thumb {
maxW = 150maxH = 150
}} imagID, „thumb“
Resolution cache
Importer
External ImageResource
YAGImporter
Meta Data extraction
Album allocation
Filesystem-Storage
Importer
Currently implemented:Director
y Importe
r
Multifile Uploade
r
ZIP File Uploade
r
RemoteUploade
r
Crawls directory andimports image files
Extracts uploaded ZIPfile and imports imagefiles
Uploads multipleFiles via SWF Uploader
Handles HTTP requestsfrom Desktop applications, e.g. Lightroom
YAG Backend Module......made for usability
Live Demonstration
Backend Module
• Gallery List• Add, edit, delete• Drag & Drop
sorting
Backend Module
• Album List• Add, edit, delete• Drag & Drop
sorting• Hide / unhide• Set gallery
preview album
Backend Module
• Album Edit List• Batch editing of
albums• Reassign albums
to galleries
Backend Module
• Image List• Edit title /
description• Define album
thumb• Drag & Drop
sorting• Change default
sorting to title / capture date / filename
Backend Module
• Image Edit List• Batch editing of
images
Backend Module
• Import images• Flash multifile
uploader• Zip uploader• Import from Server
directory
Backend Module
• Maintenance• All facts on one
page• Clear page cache
of pages on which yag is installed
Backend Module
• Maintenance• Clear / rebuild
the resolution file cache
Backend / Content Element
• Content element overview shows detailed info
Backend / Content Element
• Maintenance• Gallery list• Specific gallery• Specific album• Specific image
• Select theme
Backend / Content Element
• Item Selector• Select gallery /
album / image with an easy to use JS powered selector
Documentation?
Sure! (60+ pages)
Frontend......your personal look and feel
Frontend / Themes
Frontend rendering is done by themes
Lightweight, powerful and easy to customize
Easy to select while adding yag as content element
Themes / Selection
Select the theme per plugin instance Different themes on the same page are
possible
Live Demonstration
Frontend / Themes YAG provides
1½ themes out of the box
Frontend / Themes Single image
with detailed view
Frontend / Themes Single image
with lightbox
Frontend / Themes 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)
Frontend / Themes
Some live examples ..
tt_news Integration
Demonstration
Theming
Themes
Typoscript
• General Config• List definition• Image
resolution• CSS/JS Includes
HTML• Fluid Templates
PHP• ViewHelper• Filters
CSS Javascript
• Effects• Lighbox
pt_extlist configuration
Define the look and behaviour
of the gallery / album / item view
General configuration and resolution definition.
Themes / TyposcriptAlbumList.Extlist.ts
AlbumList.ts
GalleryList.Extlist.ts
GalleryList.ts
General.ts
ItemList.Extlist.ts
ItemList.ts
Item.ts
Theme.ts
Code
So easy to build your own theme!
plugin.tx_yag.settings.themes {myFancyTheme < plugin.tx_yag.settings.themes.defaultmyFancyTheme {
resolutionConfigs { thumb {
width = 150cheight = 150c
}}
includeJS.fancy = EXT:myFencyTheme/Resources/…/fancy.jsincludeCSS.fancy = EXT:myFencyTheme/Resources/…/fancy.css
aThemeSpecificVariable = 42
controller.ItemList.list {template = EXT:fancy/…/Templates/…/List.html
}}
}
thumb = GIFBUILDERthumb { 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 } }
Typoscript
Code
So easy to build your own theme!
…<f:for each="{listData}" key="rowIndex" as="listRow">
<div class=image"> <yag:image item="{listRow.image.value}" resolutionName="thumb" />
</div> </f:for> …
…<div class=image> <img alt=„A Title" title=„A Title"
src="typo3temp/yag/00/81x4e876324374b0.jpg„ width="150" height="100"> </div> …
Output
Template
Code
plugin.tx_yag.settings.themes.myFancyTheme {specialClass= foo
}
So easy to build your own theme!Access Typoscript Settings
<div class={config.specialClass}> <yag:image item="{listRow.image.value}" resolutionName="thumb" /> </div>
Typoscript
Template
So easy to build your own theme!Include Javascript
Template
Inline Javascript with Fluid can be pure pain.
Our approach: JS Template ViewHelper
<yag:Javascript.template templatePath="EXT:../JSTemplates/CustomScript.js"
addToHead=„1"arguments="{key1:‚value', key2:‚value2'}
/>
Javscript Template
function demo() {
if(###key1### == value) {alert(###LLL:tx_yag_controller_gallery.sortingSaved###);
}}
So easy to build your own theme!Include Javascript
Upcomming YAG 2.0
Supporting PIDs
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!
Categories
Our goal: Having generic categories for multiple
extensions Having (ExtJs) Tree-Widget for editing
categories
Frontend Editing
Let FE Users Create / Edit / Delete▪ Galleries▪ Albums
Upload / Edit / Delete▪ Images
in Frontend
Some references...
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/yag-gallery/yag
Q & A
Thanks for your Attention!
