yag - yet another gallery / t3con11

YAG – Yet Another Gallery

TYPO3 Photo Gallery Management

Who we are

Daniel LienertStudent of Computer ScienceUniversity of Karlsruhe

Michael KnollStudent of Computer ScienceUniversity of Karlsruhe

Outline

Introduction Concepts Backend / Frontend Build your own theme Under Construction

Introduction

Before YAG

Searching TER for „gallery“▪ 114 Extensions

Before YAG

Comprehensive comparison: http://www.auskennbert.de/kategorien/ty

po3/typo3-extension-galerien-im-vergleich/

Out-of-date

Gallery Extension Comparison

Do we really need another gallery ??

Current Extensions

PROs+ Some stable Extensions+ TYPO3 Look & Feel+ Community support

Current Extensions

CONs- TYPO3 Look & Feel- Ugly Codebase- Poor Documentation- No Backend Module- Not suitable for many pictures- Out-of-date (last update 2004...)

YOU DON‘T WANT TO USE THEM!

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

Where we are today

Some installations with up to 15.000 photos (and growing) on high-traffic sites Scalable *check*

Skinning (different theme packages available in TER) Extendable *check* Skinning *check*

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, ...)

Conceptsbehind 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• Li

sting

• Filters

pt_extbase• H

elper methods

YAG

Image Organization

Gallery

Album 1

Image 1

Resolution 1

Resolution 2

Resolution 3

Image 2

Album 2

Image 3

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

Hash File System

Automatic Directory Structure

Fixed # of Images / folder

-> extremly scalable

Original Images Management

Original Images are never changed Uploaded images structured by

album Uid One folder / album

Importer

External ImageResource

YAGImporter

(EXIF-)Meta Data

Adding to Album

Filesystem-Storage

Importer

Currently implemented:

Directory Importer

Multifile Uploader

ZIP File Uploader

RemoteUploader

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

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)

FrontendYAG looks like YOU want it!

Frontend / Themes

Frontend rendering is done by themes

Lightwight, powerfull and easy to customize

Easy to select while adding yag as content element

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

yag_theme_simpleviewer (flashviewer) yag_theme_perfectlightbox (alternative

lightbox) yag_theme_fancybox (alternative

lightbox)

Themes / Selection

Select the theme per plugin instance Different themes on the same page are

possible

Frontend / Themes

Some examples ..

tt_news Integration

Demonstration

Theming

ThemesTyposcript• General

Config• List definition• Image

resolution• CSS/JS

Includes

HTML

• Fluid Templates

PHP

• ViewHelper

CSS Javascript

•Effects•Lighbox

Flash•.. maybe ..

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

The missing parts

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

Supporting PIDs

Issue: All records are stored to PID 0 Impossible to assign permission to records

on page level. Impossible to split data between different

authors

Todo Add Sysfolder / Page selector to BE module Add Sysfolder / Page selector to CE Keep it simple and usable!

Supporting Localization

Issue: Add multilanguage support to item labels and descriptions

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