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

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

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

6.  Comprehensivecomparison:
 http://www.auskennbert.de/kategorien/typo3/
typo3-­‐extension-­‐galerien-­‐im-­‐vergleich/
 Out-­‐of-­‐date
 YAG
isnotincluded
worthless


8. PROs
+
SomestableExtensions
+
TYPO3
Look
&Feel
+
Communitysupport

9. 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!

10.  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,
...

11.  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*

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

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

14. • Album
List
• Add,
edit,
delete
• Drag
&
Drop
sorting
• Hide
/
unhide
• Set
as
gallery
thumb

15. • Image
List
• Edit
title
/
description
• Define
album
thumb
• Drag
&
Drop
sorting

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

17. • Maintenance
• All
facts
on
one
page
• Clear
page
cache
only
where
yag
is
installed
• Clear
/
rebuild
reolution
file
cache

18. • Content
element
overview
shows
detailed
info

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

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

21.  Yes,
we
have
one!
(60
pages)

22. Looks
like
YOU
want
it!

23.  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

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

25.  Single
image
with
detailed
view

26.  Single
image
with
lightbox

27.  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)

28. 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

30. Category
Gallery
Album
Item
ItemMeta
ResolutionFileCache
„Only“
6
database
tables

31. Gallery
Album
1
Album
2
Image
1
Image
2
Image
3
Resolution
Resolution
Resolution
1
2
3

32.  Image
Management
(Backend)
 Gallery
–
Album
–
Items
 Image
Presentation
(Frontend)
 ArbitraryImage-­‐Collections
▪ Gallery
–
Album
–
Items
▪ Categories
▪ Tags
▪ ...

33. Source
images
Filter
Filter
Category,
Album,
Tags,
...
Image
1
Image
2
Image
3
Image
4

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

35.  Automatic
Directory
Structure
(typo3temp)
 Fixed
#
of
Images
/
Folder

36.  Original
Images
are
not
changed
 Structured
by
Album
UID
 One
folder
/
album

38. Typoscript
HTML
PHP
• General
Config
• Fluid
• ViewHelper
• Listdefinition
Templates
• Image
resolution
• CSS/JS
Includes
CSS
Javascript
Flash
• Effects
• ..
maybe
..
• Lighbox

39. 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

40. 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
}
}

41.  Select
the
theme
per
plugin
instance
 Different
themes
on
the
same
page
posible

42. (EXIF-­‐)
Meta
Data
YAG
Adding
to
Album
Importer
External
Image
Resource
Filesystem-­‐
Storage

43.  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

45.  Used
for
 Filtering
 Paging
 Sorting
 Generates
Image
Collections
 Displayed
as
galleries,
albums,
...

46.  Enables
developer
to
implement
their
own
filters
 Category
Filter
 Tag
Filter
 EXIF
Filter
 Image-­‐Title
Filter
 ...

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

48.  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

49.  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

51.  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

52.  Extbase
does
not
have
Session
Management
(yet)
 Came
up
with
our
own
solution

53.  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

54.  Extbase
does
not
have
Lifecycle
Management
(yet)
 Came
up
with
our
own
Lifecycle
Management

55. 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

56.  Problem
1:
Guess
the
key!
$settings[‘plugin‘]...[‘showPager‘]

57.  Problem
2:
Assertions
(over
and
over)!
assert_is_integer($settings[...]);

58.  Solution:
ConfigurationObjects
 Keep
Domain
Logic
and
Configuration
seperated
 Code-­‐Completion
for
configuration
settings
 Do
Assertions
only
once

59. 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;
}
}

60. 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');
}
}

61.  Problem
 Folders
and
files
for
▪ Templates
▪ Partials
▪ Layouts
can
only
be
set
for
all
instances
of
plugin
(using
Extbase
Typoscript
conventions)

62.  Solution:
Set
template
for
each
Controller/
Action
individually
plugin.tx_yag.settings.themes.myFancyTheme
{
/*
...
*/
controller.ItemList.list
{
template
=
EXT:fancy/…/Templates/…/List.html
}
}

63.  Extbase
in
frontend
 Extbase
in
backend
module
 Extbase
in
flexform

64. 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>
…

65. 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;
}

66. 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;
}

67.  Using
„middle
layer“
for
 Extensions
of
Extbase,
suitable
for
other
extensions
 Usage
of
non-­‐public-­‐API
yag
-­‐
pt_extlist
pt_extbase
Extbase
TYPO3

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

70.  Has
already
been
implemented
 Changed
to
BE
Management
 Dependency
on
Role-­‐Based
Access
Controll
(next)

71.  Mimi

72.  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!

73.  Issue:
Add
multi
language
support
to
labels
and
descriptions

74.  ???

76.  We
needed
dynamicly
generated
JavaScript
 to
set
environment
variables
 For
translation
 Problem:
Fluid
 No
posibility
to
define
markers
({})
 Solution:
 JavscriptViewhelper
/
JSTemplates

77. Code
{namespace yag=Tx_Yag_ViewHelpers}
<yag:Javascript.Template templatePath="EXT:yag/Resources/…/
JSTemplates/ItemAdminList.js"
arguments="{ajaxBaseURL: '{f:uri.action(controller:'Ajax')}'}"
/>

78. 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');

79.  Pro:
 Inline
Javascript
outsourced
in
separate
files
 No
weird
Fluid
hacks
needed
 Con:
 Markers
!
 Any
suggestions?

80.  Port
Backend
to
ExtJS???
 PROs
and
CONs
of
JQuery
vs.
ExtJS

81.  Importer-­‐Pluginsfor
Desktop
Image-­‐
Management
Software
(Lightroom,
Aperture,
iPhoto)
 No
LUA
skills
 First
Prototype
is
working

82.  Demonstration