EXT: Generic Gallery

What does it do? 

This extension was written to speed up development of different kinds of Java-Script driven galleries, slideshows or interactive teasers.

It's possible to define multiple galleries with TypoScript and HTML Templates. These gallery types could be easily changed with a selectbox within the plugin content element.

Features 

  • One plugin for every kind of picture gallery / teaser slider
  • Single item support (with title, link and positioned descriptions)
  • Multiple images support
  • Image collection support
  • Image detail view
  • Routing (speaking URLs) for detail view and pagination
  • Makes use of TYPO3 built-in image cropping
  • Easy templating
  • EXIF and IPTC support
  • All properties provided by FAL could be used
  • Comes with a nice preview in page module
  • Twitter Bootstrap Examples (version 3 and 4)
  • TYPO3 Linkhandler support

Screenshots 

No screenshots as this extension works with almost every possible HTML / Java-Script construction. Take a look at the examples.

Live examples 

http://www.felixnagel.com/fotografie/

Please help me to add more examples here!

Users manual 

Target group: Editors

  • Add a Generic Gallery plugin to your page.
  • Choose a gallery type

  • Add pictures (please note: not all types might be available on your TYPO3 instance)

    • Single mode

      • Add a picture
      • Add a title and a link (optional)

      • Add descriptions (optional)

        • Enter text, format it if necessary
        • Define width, x and y coordinate (optional)

    • Mass mode

      • Quick add many images

    • Collection Mode

      • Add a predefined collection
  • Save and enjoy!

Please note: "Collection mode" overwrites "mass mode" overwrites "single mode".

Administration 

Installation 

Examples 

Add one of the Generic Gallery: Example - Bootstrap static TS template files to your root template. This will add a Twitter Bootstrap themed Image Slider and Teaser Slider to your predefined galleries.

TypoScript Reference 

Feel free to use the constant editor (go to: module template, root page, constant editor, generic_gallery) to edit this settings. Add a TypoScript template to overwrite these settings at any point in your site tree(s).

TypoScript Reference 

Within this page

Properties 

Property Data type stdWrap Default
settings.gallery array no  
settings.gallery.name string no  
settings.gallery.icon string no extensions-generic-gallery
settings.gallery.template string no Fallback to Extbase's default behavior
settings.gallery.itemTemplate string no Fallback to Extbase's default behavior
settings.gallery.paginate array no Fallback to Fluid's default behavior

Property details 

Templating 

This extension uses Extbase / Fluid default functionality for templating, even though, there is come custom configuration to handle gallery types.

So by default, TYPO3 will search in the default template root path of the extension: EXT:generic_gallery/Resources/Private/Templates/GalleryCollection/Show.html

If you change the template path like this: plugin.tx_genericgallery.view.templateRootPaths.0 = EXT:my_extension/Resources/Private/Templates/GenericGallery/, TYPO3 will search for EXT:my_extension/Resources/Private/Templates/GenericGallery/GalleryCollection/Show.html.

How to configure the template file for each gallery type

This extension allows to define multiple gallery types. Each gallery type needs a custom template file. To accomplish this, there are two TypoScript settings: template and templateItem (used for the item detail view)

You can change the path for each gallery type by using the following TS: plugin.tx_genericgallery.settings.gallery.myGalleryType.template = EXT:my_extension/Resources/Private/Templates/SomeFolder/SomeFile.html

See the example TypoScript files for more info!

Available variables 

  • uid: current plugin content element UID (localized)
  • galleryType: current plugin gallery type (single, images, collection)
  • data.content: current plugin content element data
  • data.page: current page data
  • data.pageLayout: current page layout
  • data.pageBackendLayout: current page backend layout
  • item: Single image item in detail view
  • collection: Image collection array in list view

ViewHelpers 

ForGroup

A pair of ViewHelpers to assist you when building groups of items.

Example

<f:for each="{color1: 'red', color2: 'green', color3: 'blue', color4: 'yellow'}" as="item" iteration="iterator">
	<gg:forGroup.begin iteration="{iterator}" max="2">
		<ul class="colors">
	</gg:forGroup.begin>

	<li class="span6" style="color: {item};>
		{item}
	</li>

	<gg:forGroup.end iteration="{iterator}" max="2">
		</ul>
	</gg:forGroup.end>
</f:for>
Copied!

Result:

<ul class="colors">
	<li class="span6" style="color: red;>
		red
	</li>
	<li class="span6" style="color: green;>
		green
	</li>
</ul>
<ul class="colors">
	<li class="span6" style="color: blue;>
		blue
	</li>
	<li class="span6" style="color: yellow;>
		yellow
	</li>
</ul>
Copied!

FAL Metadata 

Use the imageData property for image meta data. The imageData array provides the FAL meta data merged with inline file reference meta data. In addition imageData processes some EXIF meta data to be more usable (some properties are transformed into a human readable format).

Use item.image.properties for raw FAL meta data.

Example

This examples is tested with EXT metadata.

<f:for each="{collection}" as="item" iteration="iterator">
	<figure>
		<f:image src="{item.image.uid}" alt="{item.imageData.description}" />
		<p>
			{item.imageData.camera_model} {item.imageData.shutter_speed_value} {item.imageData.aperture_value}
			{item.imageData.focal_length} {item.imageData.iso_speed_ratings} ({item.imageData.flash})
		</p>
	</figure>
</f:for>
Copied!

Tutorial 

Within this page

How to use Exif & IPTC 

You need to install EXT:filemetadata and use an extension like EXT:metadata or similar to extract the meta data from your files and make it available via FAL properties. See Available variables for more information on how to use the meta data in your templates.

How to add existing collections 

It's possible to disable inline editing of collection records in the plugin. Disable use_inline_collection in the site settings (setup module) or extension manager (before version 8).

Custom marker (how to render any content) 

Use a TypoScript object of any type with help of the cObject ViewHelper: https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/CObject.html

How to crop pictures 

Use the default image ViewHelper configuration: https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Image.html

Linkvalidator configuration 

This extension adds some default page TsConfig in order to config the needed fields, see: /Configuration/TypoScript/pageTsConfig.ts

Preview is cropped / has overflow:hidden 

This is a problem because of the Busy Noggin Framework (EXT:templavoila_framework ). It adds a BE CSS file (typo3conf/ext/templavoila_framework/core_templates/css/backend.css) which sets an overflow: hidden and height: 45px to all previews. Just copy that file, change it and add following to your pageTS:

mod.web_txtemplavoilaM1.stylesheet = ../fileadmin/templates/be_css/backend.css

Upgrade Guide 

Within this page

Update to 8.0.0 

Overview

  • Added TYPO3 14 support
  • Removed support for TYPO3 13
  • Migrated some extension manager configuration to site settings
  • Lots of fixed deprecations
  • Minor improvements

How to upgrade

  1. Migrate extension manager configuration to site settings Following EM configuration settings have been migrated, please adjust your setup accordingly: `hide_relations` enable_type_items `enable_type_images` enable_type_collection
  2. Clear all caches

Version 7 

Update to 7.1.0 

Overview

  • Add support for PHP 8.4
  • Migrated the plugin to a custom content element type
  • Fixed and improved image detail view route mapping
  • Pagination is now content element aware
  • Migrated docs to PHP rendering
  • Refactored BE preview
  • Improved TCA configuration
  • Lots of fixed deprecations
  • Minor improvements

How to upgrade

  1. Use provided upgrade wizard in "Upgrade" BE module to migrate existing plugins to content elements

  2. Update routing configuration (optional, when using image detail view)

    • Update yaml routing configuration

    • Adjust link generation in all templates

      • replace <f:link.action action="show" controller="GalleryItem" arguments="{item: item.identifier, contentElement: uid}">
      • with <f:link.action action="show" controller="GalleryItem" arguments="{item.linkArguments}">

    • Adjust pagination in all templates

      • Pass all arguments to pagination partial

        • replace <f:render partial="Pagination" arguments="{pagination: pagination, paginator: paginator}" />
        • with <f:render partial="Pagination" arguments="{_all}" />

    • Pass content element UID to link generation in pagination partial

      • replace {f:uri.action(action:actionName, arguments: {page: page}, addQueryString: 1)}
      • with {f:uri.action(action:actionName, arguments: {contentElement: uid, page: page}, addQueryString: 1)}
  3. Clear all caches

Update to 7.0.0 

Overview

  • TYPO3 13.4 LTS support
  • Add support for PHP 8.3
  • Support for site sets
  • Lots of fixed deprecations and CGL improvements

How to upgrade

  1. Clear all caches

Version 6 

Update to 6.0.0 

Overview

  • TYPO3 12.4 LTS support
  • Add support for PHP 8.2
  • Added Twitter Bootstrap 5 example templates
  • Make use of new TCA types (link, datetime, file)
  • Replaced BE preview hook
  • Bugfixes and CGL improvements

How to upgrade

  1. Use upgrade wizard in "Upgrade" BE module to update image field name of existing plugins
  2. Clear all caches

Version 5 

Update to 5.2.0 

Overview

  • Add support for PHP 8.1
  • Bugfix for deleted image collection records
  • Bugfix for SQL mode issue
  • Bugfixes and minor CGL improvements

How to upgrade

  1. Clear all caches

Update to 5.1.0 

Overview

  • Add some more extension manager configuration options
  • Improve TCA with palettes and descriptions
  • Migrated EM update class to upgrade wizards (you might need to run those again)
  • Code quality improvements and clean-up
  • Some more improvements and fixes

How to upgrade

  1. Adjust your EM configuration if needed
  2. Clear all caches

Update from 5.0.0 to 5.0.1 

Overview

  • Bugfix for PHP 7.4
  • Removed support for PHP < 7.4
  • Removed support for TYPO3 < 11.4
  • Added basic lint and php-cs tests

How to upgrade

  1. Clear all caches

Update from 4.x to 5.0.0 

Overview

  • TYPO3 11.5 LTS support
  • Removed support for TYPO3 9.x & 10.x
  • Support for PHP 8.0
  • Add custom pagination partial
  • Added routing for pagination

How to upgrade

  1. Update templates due to pagination widget removal
  2. Update pagination routing
  3. Clear all caches

Version 4 

Update from 4.1.0 to 4.2.0 

Overview

  • TYPO3 10.4 LTS support
  • Support for PHP 7.3
  • Bugfix for single type gallery items with disabled image
  • Rename TS and TSconfig files to newer file extensions
  • Move TSconfig file to correct folder
  • Some minor improvements and fixes

How to upgrade

  1. "Change fields" in DB using "Analyze Database" in Install tool / Maintenance module
  2. Adjust your TS / TSconfig file includes if needed
  3. Clear all caches

Update from 4.0.x to 4.1.0 

Overview

  • TYPO3 10.3 support
  • Add new template variables:
    • data.content: current plugin content element data
    • data.page: current page data
    • data.pageLayout: current page layout
    • data.pageBackendLayout: current page backend layout

Update from 3.x.x to 4.0.0 

Overview

  • TYPO3 10.2 support
  • Remove TYPO3 8.x support
  • Update default template to match Bootstrap 4 markup
  • Add option to add icon for each gallery type
  • Lots of improvements, minor fixes and code clean up

How to upgrade

  1. Update your templates from {item.uid} to {item.identifier}
  2. Clear all caches

Version 3 

Update from 2.2.x to 3.0.0 

Overview

  • TYPO3 9.x support
  • Remove TYPO3 7.x support
  • Remove PHP < 7.0 support
  • Changed PHP namespace to FelixNagel
  • Switch to PSR-2 CGL
  • Add Bootstrap 4 examples

How to upgrade

  1. Adjust your class auto loading or class overwrites to new namespace / composer package name (if needed for your setup)
  2. Use "Clear all caches including PHP opcode cache" and "Dump Autoload Information" in the install tool (if needed for your setup)
  3. Adjust VH namespace in your overwrite templates
  4. Add extension routing configuration to your site configuration (TYPO3 9.x only)
  5. Clear all caches

Version 2 

Update from 2.1.x to 2.2 

Overview

  • Tested in PHP 7.2
  • Fix TS generation in BE context
  • Extract pagination configuration to TS
  • Fix issue with flash meta data
  • Add file collection type for images only (enable in EM config)
  • Some minor bugfixes

How to upgrade

Clear the cache using install tool.

Update from 2.0.x to 2.1 

Overview

How to upgrade

Clear the cache using install tool.

Update from 1.4.x to 2.0 

Overview

  • Added TYPO3 8.x support
  • Removed TYPO3 6.x support
  • Removed TypoLink ViewHelper -> use EXT:fluid default instead
  • GalleryCollection now inherits ObjectStorage -> easier usage in Fluid (e.g. paginate VH)
  • Added pagination to default gallery template
  • Removed Bootstrap JS & CSS file include from Bootstrap example configuration
  • Added new content element wizard for extension plugin

How to upgrade

Update your templates and TypoScript if needed. Clear the cache using install tool.

Version 1 

Update from 1.4.1 to 1.4.3 

Overview

  • Fixed documentation rendering
  • Fix for use with TemplaVoila
  • Fix for backend preview (page module)

How to upgrade

Just clear the cache.

Update from 1.4.0 to 1.4.1 

Overview

  • Bugfix for multiple plugins on one page (when using item detail action)
  • Improved TCA and extension configuration (adjusted to match latest TYPO3 API, thanks to Markus Klein!)
  • Fixed composer.json and added correct PHP dependency (thanks to Markus Klein!)
  • Small improvements to built in templates

How to upgrade

Just clear the cache and check your templates. You may need to clear cache in install tool or even re-install the extension in case you experiencing issues with backend forms!

Make sure to use new detail action link argument contentElement: <f:link.action action="show" controller="GalleryItem" arguments="{item: item.uid, contentElement: uid}"></f:link>

Update from 1.3.x to 1.4.0 

New features overview

  • Bugfix for "Merge FAL file meta data with file reference data"
  • Support for TYPO3 link validator
  • Use built-in image cropping (since TYPO3 7.2)

How to upgrade

Just clear the cache and check your templates. Make sure to use new image rendering condition: <f:image image="{f:if(condition: '{item.imageReference}', then: '{item.imageReference}', else: '{item.image}')}" />

Update from 1.2.x to 1.3.0 

New features overview

  • TYPO3 7.6 compatibility
  • Merge FAL file meta data with inline meta data (file reference)

How to upgrade

Just clear the cache and check your templates. Make sure to use {item.imageData.description} instead of {item.image.properties.description} when you want to use merged meta data.

Update from 1.1.0 to 1.2.0 

New features overview

  • TYPO3 7.4 compatibility
  • Improve and fix examples
  • Update examples to Twitter Bootstrap 3.3.5

How to upgrade

Just clear the cache.

Update from 1.0.x to 1.1.0 

New features overview

  • TYPO3 7.x compatibility
  • Better backend previews (for example collection image preview)

How to upgrade

Just clear the cache in install tool.

Update from 0.4.x to 1.0.x 

New features overview

  • Migration from pibase to extbase / fluid
  • Better FAL support
  • Image detail view
  • Image collection support
  • Twitter Bootstrap Examples

How to upgrade

First of all you need to upgrade TYPO3 to 6.x and migrate all DAM records to FAL. This task exceeds the scope of this documentation.

  • Update via Extension Manager
  • Run update script in Extension Manager

  • Adjust TypoScript

    • Change TypoScript path

      • from plugin.tx_genericgallery_pi1.gallery
      • to plugin.tx_genericgallery.settings.gallery
    • Change gallery settings to new specification
  • Update your templates to match fluid structure

See demos: /Configuration/TypoScript/Examples

Version 0 

Update from 0.3.x to 0.4.0 

First of all you need to upgrade TYPO3 to 6.x and migrate all DAM records to FAL. This task exceeds the scope of this documentation.

  • You will need to install EXT:filemetadata and EXT:metadata
  • Generic Gallery itself needs no DB migration but you will need to update yours TS and templates.
  • All ###DAM_* marker have been removed. Use custom markers instead.

Update from 0.3.3 to 0.3.4 

Please make sure your non admin BE users still have access to all fields. You might need to change permissions of your BE user group.

Update from 0.3.2 to 0.3.3 

As there has been some changes to the RTE (IRRE description field) processing you probably need to link your hyperlinks within the RTE text again. At least if you like to have proper (RealUrl aware) links and not wrong ones like: http://domain.com/index.php?id=123

Update from 0.2.0 to 0.3.0 

Some template marker have changed to match extension marker naming more precise:

  • ###WIDTH### to ###IMAGE_WIDTH###
  • ###HEIGHT### to ###IMAGE_HEIGHT###

No other changes necessary, but recommended (TS option marker is more useful than damMarker ).