List View¶
The template of this view is very simple since the only field to display is the image. However, we want to take advantage of the TYPO3 image processing instead of using the conventional modification of the size of the image through the properties width and height.
When the field is an image and you use the property tsProperties, an IMAGE cObject is generated with the provided TypoScript properties. You can use markers to refer to the fields. In the example, the configuration is the following:
func = makeItemLink;
tsProperties =
file.width= 100
;
The first property is already known. It makes it possible to open the
Single
view by clicking on the image.
The second one is just TypoScript syntax for an IMAGE cObject. It
defines the file using the ###image###
marker. The width is set to 100px.
You may insert any other TypoScript property as, for example, GIFBUILDER.
Important
The syntax is exactly the same as in TypoScript. Do not forget to end the property by a semicolon. If you need a semicolon in a TypoScript property, please use \;.
The last problem to solve in the List
view is to have several images
on the same line instead of having them one per line. It can be simply
done by changing the default style (See the file
sav_library_example10.css
in the Resources/Public/Css
directory) as follows:
.sav_library_example10_gallery .savLibraryPlus .listView .items .item {float:left;width:125px;height:105px;background-color:#ffffff;}