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!