YAG - Yet another gallery (2012)
Upcoming SlideShare
Loading in...5
×
 

YAG - Yet another gallery (2012)

on

  • 939 views

Although there are currently about 150 gallery-related extensions in TER, none of them fullfills the needs of modern gallery applications or is hard to use and not-well maintained. YAG is the first ...

Although there are currently about 150 gallery-related extensions in TER, none of them fullfills the needs of modern gallery applications or is hard to use and not-well maintained. YAG is the first gallery extension for TYPO3 that is about to change this. Implemented using Fluid/Extbase and modern Ajax technology, it has a dedicated backend module for managing its contents and uses an advanced theming concept for personlization in the frontend. YAG also ships with mass-file upload and enhanced resolution handling. Integrated image caching enables delivery of every managed photo in every resolution.

TYPO3 frontend caching enables quick page load and short response times which makes YAG usable for high-traffic sites. Web sites with up to 20.000 photos are more than a proof-of-concept.

We will also present you the new features available with the upcomming YAG Version 2.0, like using the full power of the TYPO3 page tree and frontend editing with a fine grained access control concept.

During this 45minutes talk we will present to you an overview of YAG's features and you will learn how the Front- and Backend looks like. There will be a short introduction into the theming concept so you will get an impression on how to create your own personlized theme.

If you think about joining this session, take a look at http://www.yag-gallery.de for further information and a bunch of demo-pages that shows the power of the extension.

Statistics

Views

Total Views
939
Views on SlideShare
939
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    YAG - Yet another gallery (2012) YAG - Yet another gallery (2012) Presentation Transcript

    • TYPO3 Photo Gallery Management
    • Daniel Lienert Frankfurt / Germany TYPO3 Developer Twitter: @dlienertMichael Knoll Karlsruhe / Germany TYPO3 Developer Twitter: @kaktusmimi
    •  Introduction Concepts Backend / Frontend Build your own theme
    •  Searching TER for „gallery“ ▪ 120 Extensions
    • Easy customizationScalability Lightroom ExportBackend Module Skinning UsabilityArbitraryResolutions SpeedExtendability Clean Codebase
    •  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, ...
    •  Well-integrated in TYPO3 Flexible Resolution handling & caching Interfaces for Desktop Applications (e.g. Lightroom) Flexible Filtering of images (tags, categories, EXIF data, ...)
    • ...that empower yag
    • Extbase + Fluid  YAG depends on  Extbase / Fluid  pt_extlist (powerfull list generator)pt_extlist•Listing•Filters YAG  pt_extbase (some extbase / pre- extbase helper methods)pt_extbase•Helper methods
    • Gallery Album 1 Album 2 Version 2.0 will come up with Image 1 Image 2 Image 3Resolution PIDs!!! Resolution Resolution 1 2 3
    •  Image Management (Backend)  Gallery -> Album -> Items Image Presentation (Frontend)  Arbitrary Image-Collections ▪ Gallery – Album – Items ▪ Categories ▪ Tags ▪ ...
    • Sourceimages Filter Filter Category, Album, Tags , ...
    •  A typoscript-defined representation of an image Define as many as you want
    • resolutionConfigs {thumb { maxW = 150 maxH = 150 }} imagID, „thumb“ Image Repository Source Resolution images cache
    • Meta Data extraction YAG Album allocation ImporterExternal ImageResource Filesystem- Storage
    •  Currently implemented: Crawls directory and Uploads multipleDirectory imports image files Multifile Files via SWF UploaderImporter Uploader Extracts uploaded ZIP Handles HTTP requests ZIP File file and imports image Remote from DesktopUploader files Uploader applications, e.g. Lightroom
    • ...made for usability
    • • Gallery List • Add, edit, delete • Drag & Drop sorting
    • • Album List • Add, edit, delete • Drag & Drop sorting • Hide / unhide • Set gallery preview album
    • • Album Edit List • Batch editing of albums • Reassign albums to galleries
    • • Image List • Edit title / description • Define album thumb • Drag & Drop sorting • Change default sorting to title / capture date / filename
    • • Image Edit List • Batch editing of images
    • • Import images • Flash multifile uploader • Zip uploader • Import from Server directory
    • • Maintenance • All facts on one page • Clear page cache of pages on which yag is installed
    • • Maintenance • Clear / rebuild the resolution file cache
    • • Content element overview shows detailed info
    • • Maintenance • Gallery list • Specific gallery • Specific album • Specific image• Select theme
    • • Item Selector • Select gallery / album / image with an easy to use JS powered selector
    •  Sure! (60+ pages)
    • ...your personal look and feel
    •  Frontend rendering is done by themes Lightweight, powerful and easy to customize Easy to select while adding yag as content element
    •  Select the theme per plugin instance  Different themes on the same page are possible
    •  YAG provides 1½ themes out of the box
    •  Single image with detailed view
    •  Single image with lightbox
    •  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)
    •  Some live examples ..
    •  Demonstration
    • Typoscript HTML PHP• General Config • Fluid Templates • ViewHelper• List definition • Filters• Image resolution• CSS/JS Includes CSS Javascript • Effects • Lighbox
    • AlbumList.Extlist.tsAlbumList.tsGalleryList.Extlist.tsGalleryList.tsGeneral.ts Define the configuration and General look and behaviour pt_extlist configuration of the resolution definition. view gallery / album / itemItemList.Extlist.tsItemList.tsItem.tsTheme.ts
    • TyposcriptCodeplugin.tx_yag.settings.themes { myFancyTheme < plugin.tx_yag.settings.themes.default myFancyTheme { thumb = GIFBUILDER thumb { resolutionConfigs { XY = [10.w],[10.h] thumb { width = 150c 10 = IMAGE height = 150c 10 { } file.maxH = 170 file.maxW = 170 } file.import.field = yagImage } includeJS.fancy = EXT:myFencyTheme/Resources/…/fancy.js includeCSS.fancy = EXT:myFencyTheme/Resources/…/fancy.css 20 = IMAGE 20 { file = EXT:yag/Tests/TestImages/watermark.png aThemeSpecificVariable = 42 offset = [10.w]-100,[10.h]-70 } controller.ItemList.list { } template = EXT:fancy/…/Templates/…/List.html } }}
    • TemplateCode … <f:for each="{listData}" key="rowIndex" as="listRow"> <div class=image"> <yag:image item="{listRow.image.value}" resolutionName="thumb" /> </div> </f:for> …Output…<div class=image> <img alt=„A Title" title=„A Title" src="typo3temp/yag/00/81x4e876324374b0.jpg„ width="150" height="100"></div>…
    • Access Typoscript Settings TyposcriptCode plugin.tx_yag.settings.themes.myFancyTheme { specialClass= foo } Template<div class={config.specialClass}> <yag:image item="{listRow.image.value}" resolutionName="thumb" /></div>
    • Include Javascript Inline Javascript with Fluid can be pure pain. Our approach: JS Template ViewHelperTemplate<yag:Javascript.template templatePath="EXT:../JSTemplates/CustomScript.js" addToHead=„1" arguments="{key1:‚value, key2:‚value2}/>
    • Include Javascript Javscript Templatefunction demo() { if(###key1### == value) { alert(###LLL:tx_yag_controller_gallery.sortingSaved###); }}
    •  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!
    •  Our goal:  Having generic categories for multiple extensions  Having (ExtJs) Tree-Widget for editing categories
    •  Let FE Users  Create / Edit / Delete ▪ Galleries ▪ Albums  Upload / Edit / Delete ▪ Images in Frontend
    •  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