Translations
Info
All page names need to be in English.
en da  de  fr  it  ja  km  nl  ru  zh

Blueprints/FAL-ImageGallery

From TYPO3Wiki
Jump to: navigation, search

<- Back to blueprints overview

Blueprint: IMAGE_GALLERY

Proposal Write a replacement in css_styled_content for FAL image handling in tt_content.image and tt_content.textpic
Owner/Starter Patrick Broens
Participants/Members -
Status Draft, Discussion, Voting Phase, Accepted, Declined, Withdrawn
Current Progress Unknown, Started, Good Progress, Bad Progress, Stalled, Review Needed
Topic for Gerrit none

Target Versions/Milestones

  • TYPO3 CMS version 6.3.x

Goals / Motivation

This motivation is based on an evaluation Patrick Broens did using the TypoScript Content Object FILES for image handling in css_styled_content. The implementation of FILES is pretty straight forward, but when you want to render images, like it is done in tt_content.image and tt_content.textpic, by css_styled_content (CSC), problems arise, mostly when multiple images are used. This is due to the fact the image rendering has a lot of configuration options.

Multiple image rendering in css_styled_content can be seen as an image gallery, with the following options:

  • Images are lined up in columns and rows
  • The amount of columns is configurable
  • Normally when having rows and columns, the images are put next to each other, from left to right, until the columns in a row are filled. CSC has the option not to have rows, where the images are put from top to bottom, filling one column, until the amount of images in a column is met. Then the next column will be filled.
  • In tt_content.textpic the gallery can be inside or outside a text, meaning the width is different for the position where the gallery is placed
  • Images can be in equal width or equal height, which is a difference in image dimension calculation. When having an equal height, widths of the images have to be pre-calculated before rendering them
  • More factors which influence the width of a single image are the spacing between columns, if a border is present, what the border width is, and the border spacing
  • Images can have a caption for each image, or one caption for all images in the gallery

The FILES content object is not aware of all these options which influence the width and height of a single image. When using TypoScript, these calculations need to be done within the “renderObj”, which is a huge overhead, because it will be done for each and every image. For some options it's not even possible to do this in TypoScript only, because calculations for all images needs to be done, before entering the “renderObj”. Also by doing calculations using TypoScript only you need a lot of lines, where PHP can do it way more easier. Instead of reducing the very complex TypoScript we have right now, we only replace it with the same amount, but completely different TypoScript. This means the “FILES” object can't be used properly.

My opinion is that we have to introduce a new content object, something like “IMAGE_GALLERY” or to be more closer to the current content objects “IMG_GALLERY”. In this content object all the necessary calculations can be done and put in the register. Some values will be for the whole content object, like the amount of rows and columns, some values will be for a single image. The content object will be the same as “FILES”, but specifically for images with more configuration options. I would recommend to use the “renderObj” as well. When writing this new content object the “responsive images” project, which was kickstarted at the T3DD13 by Ingo Schmidt, must be taken into account.

The configuration will be (a lot) less than the current image rendering in tt_content.image. We finally have the chance to get rid of the current configuration, and more important, the method “render_textpic” and related functions in “CssStyledContentController”, which is bad code as we all know. Also the current code is still using configuration options, which are not in the CSC TypoScript at all, but kept for backwards compatibility. When writing a new content object, decissions need to be taken which configuration can be deleted, like the border, borderwidth and borderspacing. This can be done by using CSS. The image calculation not really needs to know these options, especially when using techniques like responsive images. An image will be in a block of a certain width (with or without border and its spacing) and adapt its width according to the space that is left in this block.

It is also possible to embed the options described above in “FILES”, but I think this will make the content object cluttered with options which are only for images and not other files coming from FAL.

Concept

  • Develop a new TS Content Object IMAGE_GALLERY
  • Replacement for css_styled_content userFunc in css_styled_content for tt_content.image and tt_content.textpic
  • Based on the TS Content Object FILES
  • More configuration than FILES and only for images
  • Write proper PHP classes for calculations of rows, column, image width etc.
  • Parts of FILES resource handling need to be separated from FILES and done independantly.
  • No HTML rendering in PHP at all
  • TypoScript should do the rendering
  • IMAGE_GALLERY content object should only do calculations and things which cannot be done with TypoScript, or needs a huge amount of TypoScript
  • Only HTML5 to keep it transparent (?)
  • Skip settings which are not meant for editors (like caption alignment)
  • Anybody using "noRows"?

Implementation Details

Risks

  • When sticking to different doctypes, we still have a lot of "if" statements and "overrides"
  • Getting lost in the amount of TypoScript again
  • People will still need other doctypes than HTML5

Issues and reviews

Currently a working proof of concept is available as an extension at https://github.com/patrickbroens/TYPO3.TypoScript.IMAGE_GALLERY

This proof of concept currently does not take into account:

  • noRows (can be turned of by editor, instead of arranging the images from left to right, it is filling a column from top to bottom)
  • image_compression (can be selected by editor, should be done in TS)
  • image_effects (can be selected by editor, should be done in TS)
  • imagecaption_position (can be selected by editor, IMHO it should not be available for editor)
  • No global captions (all captions grouped, from constants)
  • old CSC settings which are there for backwards compatibility

Some of the options above are currently used in the CSC userFunc for calculating the width of each image, to keep all the images within maxW or maxWInText.

Most important: It's only rendering HTML5

It uses the new Content Object IMAGE_GALLERY in tt_content.image and tt_content.textpic

Dependencies upon other Blueprints

External links for clarification of technologies

https://github.com/patrickbroens/TYPO3.TypoScript.IMAGE_GALLERY