YAG - Yet Another Gallery / T3CON11
-
Upload
daniel-lienert -
Category
Technology
-
view
4.373 -
download
2
description
Transcript of YAG - Yet Another Gallery / T3CON11
![Page 1: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/1.jpg)
YAG – Yet Another Gallery
TYPO3 Photo Gallery Management
![Page 2: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/2.jpg)
Who we are
Daniel LienertStudent of Computer ScienceUniversity of Karlsruhe
Michael KnollStudent of Computer ScienceUniversity of Karlsruhe
![Page 3: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/3.jpg)
Outline
Introduction Concepts Backend / Frontend Build your own theme Under Construction
![Page 4: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/4.jpg)
Introduction
![Page 5: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/5.jpg)
Before YAG
Searching TER for „gallery“▪ 114 Extensions
![Page 6: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/6.jpg)
Before YAG
Comprehensive comparison: http://www.auskennbert.de/kategorien/ty
po3/typo3-extension-galerien-im-vergleich/
Out-of-date
![Page 7: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/7.jpg)
Gallery Extension Comparison
![Page 8: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/8.jpg)
Do we really need another gallery ??
![Page 9: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/9.jpg)
Current Extensions
PROs+ Some stable Extensions+ TYPO3 Look & Feel+ Community support
![Page 10: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/10.jpg)
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!
![Page 11: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/11.jpg)
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, ...
![Page 12: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/12.jpg)
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*
![Page 13: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/13.jpg)
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, ...)
![Page 14: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/14.jpg)
Conceptsbehind YAG
![Page 15: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/15.jpg)
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
![Page 16: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/16.jpg)
Image Organization
Gallery
Album 1
Image 1
Resolution 1
Resolution 2
Resolution 3
Image 2
Album 2
Image 3
![Page 17: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/17.jpg)
Image Organization
Image Management (Backend) Gallery -> Album -> Items
Image Presentation (Frontend) Arbitrary Image-Collections▪ Gallery – Album – Items▪ Categories▪ Tags▪ ...
![Page 18: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/18.jpg)
Image Organization
FilterCategory,
Album, Tags,
...
Source images
Filt
er
Image 1 Image 2
Image 3 Image 4
![Page 19: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/19.jpg)
Image Resolutions
A typoscript-defined representation of an image
Define as many as you want
![Page 20: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/20.jpg)
Image Repository
Image R
eposi
tory
Source images
resolutionConfigs {thumb {
maxW = 150maxH = 150
}} imagID, „thumb“
Resolution cache
![Page 21: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/21.jpg)
Hash File System
Automatic Directory Structure
Fixed # of Images / folder
-> extremly scalable
![Page 22: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/22.jpg)
Original Images Management
Original Images are never changed Uploaded images structured by
album Uid One folder / album
![Page 23: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/23.jpg)
Importer
External ImageResource
YAGImporter
(EXIF-)Meta Data
Adding to Album
Filesystem-Storage
![Page 24: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/24.jpg)
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
![Page 25: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/25.jpg)
YAG Backend Module
![Page 26: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/26.jpg)
Backend Module
• Gallery List• Add, edit, delete• Drag & Drop
sorting
![Page 27: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/27.jpg)
Backend Module
• Album List• Add, edit, delete• Drag & Drop
sorting• Hide / unhide• Set gallery
preview album
![Page 28: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/28.jpg)
Backend Module
• Album Edit List• Batch editing of
albums• Reassign albums
to galleries
![Page 29: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/29.jpg)
Backend Module
• Image List• Edit title /
description• Define album
thumb• Drag & Drop
sorting• Change default
sorting to title / capture date / filename
![Page 30: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/30.jpg)
Backend Module
• Image Edit List• Batch editing of
images
![Page 31: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/31.jpg)
Backend Module
• Import images• Flash multifile
uploader• Zip uploader• Import from Server
directory
![Page 32: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/32.jpg)
Backend Module
• Maintenance• All facts on one
page• Clear page cache
of pages on which yag is installed
![Page 33: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/33.jpg)
Backend Module
• Maintenance• Clear / rebuild
the resolution file cache
![Page 34: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/34.jpg)
Backend / Content Element
• Content element overview shows detailed info
![Page 35: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/35.jpg)
Backend / Content Element
• Maintenance• Gallery list• Specific gallery• Specific album• Specific image
• Select theme
![Page 36: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/36.jpg)
Backend / Content Element
• Item Selector• Select gallery /
album / image with an easy to use JS powered selector
![Page 37: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/37.jpg)
Documentation?
Sure! (60+ pages)
![Page 38: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/38.jpg)
FrontendYAG looks like YOU want it!
![Page 39: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/39.jpg)
Frontend / Themes
Frontend rendering is done by themes
Lightwight, powerfull and easy to customize
Easy to select while adding yag as content element
![Page 40: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/40.jpg)
Frontend / Themes YAG provides
1½ themes out of the box
![Page 41: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/41.jpg)
Frontend / Themes Single image
with detailed view
![Page 42: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/42.jpg)
Frontend / Themes Single image
with lightbox
![Page 43: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/43.jpg)
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)
![Page 44: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/44.jpg)
Themes / Selection
Select the theme per plugin instance Different themes on the same page are
possible
![Page 45: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/45.jpg)
Frontend / Themes
Some examples ..
![Page 46: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/46.jpg)
tt_news Integration
Demonstration
![Page 47: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/47.jpg)
Theming
![Page 48: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/48.jpg)
ThemesTyposcript• General
Config• List definition• Image
resolution• CSS/JS
Includes
HTML
• Fluid Templates
PHP
• ViewHelper
CSS Javascript
•Effects•Lighbox
Flash•.. maybe ..
![Page 49: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/49.jpg)
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
![Page 50: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/50.jpg)
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
![Page 51: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/51.jpg)
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
![Page 52: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/52.jpg)
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
![Page 53: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/53.jpg)
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'}
/>
![Page 54: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/54.jpg)
Javscript Template
function demo() {
if(###key1### == value) {alert(###LLL:tx_yag_controller_gallery.sortingSaved###);
}}
So easy to build your own theme!Include Javascript
![Page 55: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/55.jpg)
The missing parts
![Page 56: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/56.jpg)
Categories
Our goal: Having generic categories for multiple
extensions Having (ExtJs) Tree-Widget for editing
categories
![Page 57: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/57.jpg)
Frontend Editing
Let FE Users Create / Edit / Delete▪ Galleries▪ Albums
Upload / Edit / Delete▪ Images
in Frontend
![Page 58: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/58.jpg)
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!
![Page 59: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/59.jpg)
Supporting Localization
Issue: Add multilanguage support to item labels and descriptions
![Page 60: YAG - Yet Another Gallery / T3CON11](https://reader036.fdocuments.in/reader036/viewer/2022081507/555a9067d8b42a3e268b45e7/html5/thumbnails/60.jpg)
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