Upload
daniel-lienert
View
4.377
Download
2
Tags:
Embed Size (px)
DESCRIPTION
TYPO3 Photo Gallery Management with YAG - Yet Another Gallery. The slides give you a brief overview on the concepts behind yag, the look and functionalities of our backend module and a small tutorial on how you can build your own YAG frontend theme.
Citation preview
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