DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
Browser Tutorial Images (en)¶
Author: | Kasper Skårhøj |
---|---|
Created: | 2002-11-01T00:32:00 |
Changed by: | dirk |
Changed: | 2015-04-10T23:52:01 |
Classification: | browser_tut_images_en |
Description: | Manage images with and without the FAL (File Abstraction Layer). Tutorial for the Browser – TYPO3 without PHP. |
Keywords: | browser, typo3 without php, images, fal |
Author: | Dirk Wildt, Die Netzmacher |
Email: | http://wildt.at.die-netzmacher.de |
Website: | http://die-netzmacher.de |
Language: | en |
Browser Tutorial Images (en) (extkey: browser_tut_images_en)
Browser Tutorial Images (en)¶
Browser – TYPO3 without PHP
Manage images with and without the FAL (File Abstraction Layer). Tutorial for the Browser – TYPO3 without PHP.
Version: 7.0.8, 2015-04-10
Extension Key: browser_tut_images_en
Language: en
Keywords: browser, typo3 without php, images, fal
Copyright 2010-2015, Dirk Wildt, Die Netzmacher, <http://wildt.at.die- netzmacher.de>
This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml
The content of this document is related to TYPO3 - a GNU/GPL CMS/Framework available from www.typo3.org
Table of Contents¶
Browser Tutorial Images (en) 1
BROWSER - TEMPLATES - LIST - IMAGE 0 12
BROWSER - TEMPLATES - LIST - IMAGE [1-5] 12
BROWSER - TEMPLATES - LIST - URL 0 13
BROWSER - TEMPLATES - LIST - URL [1-5] 13
BROWSER - TEMPLATES - SINGLE - IMAGE 0 14
Screenshots¶
See at the section "Examples" on page 5 below.
Introduction¶
What does it do?¶
- This is a tutorial for the extension Browser – TYPO3 without PHP (extkey: browser).
- It is a manual how to manage images with or without the FAL (File Abstraction Layer).
Examples¶
The illustration below is based on the calendar modul of the extension Organiser – TYPO3 for Lobbies and Organisers. See
- http://typo3-organiser.de
- HTML: http://typo3.org/extensions/repository/view/org/
- PDF: http://typo3-organiser.de/typo3conf/ext/org/doc/manual.pdf
Above center¶
Beside right¶
Below left¶
Lightbox¶
Link types¶
The Browser – TYPO3 without PHP – takes care of link types.
The illustration above displays the link types of a calendar item of the Organiser.
There are four possibilities:
Link to the detail view (default)
Link to an internal Page
Link to an external URL
No link
If you are using an image in the list view (or in the single view with a link to another record), the Browser – TYPO3 without PHP – will set a link depending on the link type.
TypoScript snippet¶
image < plugin.tx_browser_pi1.displayList.master_templates.tableFie lds.image.0
The Browser – TYPO3 without PHP – has applicabled six templates: from image.0 to image.5
See details below.
Without Foundation CSS¶
If you don't like to use the Foundation framework and no Foundation CSS, you should add the TypoScript snippet from below to your installation. You get rid of the circle in front of an image with this snippet.
page.cssInline {
10 = TEXT
10 {
value (
ul.clearing-thumbs {
list-style-type: none;
margin: 0;
padding:0;
}
figure.tx-browser-pi1-figure {
margin:0;
}
)
}
}
Templating in principle¶
If you are deal with images, you like to deal with headers and texts too. You find details at
FAL¶
There are to possibilities for managing images in the backend:
- Without the FAL (File Abstraction Layer)
- With the FAL
The managing of images in the backend is independent of the Browser – TYPO3 without PHP.
Without FAL¶
Extensions usually manage images without the FAL, which were developed for TYPO3 4.x.
If images are managed without the FAL, the Browser – TYPO3 without PHP – has some templates for managing images for the frontend.
Features¶
- You can manage the output by the TypoScript Constant Editor.
- Image code should be responsive.
- The Browser – TYPO3 without PHP – can manage the type of links. These
types are
- record: link to the single view
- page: link to an internal page
- url: link to an external url
- notype: no link, record is dispplayed in list views only.
- The Browser – TYPO3 without PHP – is compatible with tt_news and
respects these values too:
- 1: link to an internal page
- 2: link to an external url
Sample with tt_news¶
The code below is based on a sample with tt_news. The sample has a tutorial. See
Adapt it to your needs¶
Please adapt the code from below to your needs. Replace the labels for the table and the fields with the lables of your database of your extension.
Code snippet¶
Constants¶
plugin.tx_browser_pi1 {
navigation {
showUid = newsUid
}
templates {
listview {
header {
0 {
crop = 40|...|1
field = tt_news.title
tag = div
}
}
image {
0 {
#default =
file = tt_news.image
height = 40c
path = uploads/pics/
seo = tt_news.imagealttext // tt_news.imagetitletext
width = 40
}
}
text {
0 {
crop = 56|...|1
field = tt_news.short
}
}
url {
0 {
key = tt_news.type
page = tt_news.page
record = tt_news.uid
showUid = newsUid
#singlePid =
url = tt_news.ext_url
}
}
}
singleview {
image {
0 {
caption = tt_news.imagecaption
file = tt_news.image
height =
heightDefault =
imagecols =
imageorient =
path = uploads/pics/
seo = tt_news.imagealttext // tt_news.imagetitletext
width =
widthDefault = 300
}
}
}
}
}
Setup¶
plugin.tx_browser_pi1 {
views {
list {
1000 {
tt_news {
...
image < plugin.tx_browser_pi1.displayList.master_templates.tableFie lds.image.0
title < plugin.tx_browser_pi1.displayList.master_templates.tableFie lds.header.0
}
}
}
}
}
With FAL¶
If images are managed with the FAL, the Browser – TYPO3 without PHP – hasn't any template currently, but an example. See: Tutorial with tt_content
- HTML: http://typo3.org/extensions/repository/view/browser_manual_en/
- PDF: http://typo3-browser.de/typo3conf/ext/browser_manual_en/doc/ma nual.pdf
Adapt it to your needs¶
Please adapt the code from below to your needs. Replace the labels for the table and the fields with the lables of your database of your extension.
Code snippet¶
Constants¶
plugin.tx_browser_pi1 {
navigation {
showUid = contentUid
}
templates {
listview {
image {
0 {
default =
file = tt_content.image
height = 80
path =
seo = tt_content.header
width = 80c
}
}
url {
0 {
key =
page =
record = tt_content.uid
showUid = contentUid
#singlePid =
url =
}
}
}
singleview {
image {
0 {
caption =
file = tt_content.image
height = tt_content.imageheight
imagecols =
imageorient =
path =
seo = tt_content.header
width = tt_content.imagewidth
}
}
}
}
}
Setup¶
plugin.tx_browser_pi1 {
views {
list {
43746 {
tt_content {
image = FILES
image {
references {
table = tt_content
uid {
field = tt_content.uid
}
fieldName = image
}
begin = 0
maxItems = 1
renderObj < plugin.tx_browser_pi1.displayList.master_templates.tabl eFields.image.0.default
renderObj {
file {
import {
data = file:current:uid
stdWrap >
}
treatIdAsReference = 1
}
}
}
}
}
}
}
}
Constant Editor¶
BROWSER - TEMPLATES - LIST - IMAGE 0¶
plugin.tx_browser_pi1.templates.listview.image.0
File¶
Property
File
Data type
string
Description
(Obligate!) Field with the file name. I.e: tx_org_service.image
Default
Position¶
Property
Position
Data type
int+
Description
Position of the image in the list of files: 0 (and empty) is 1st position (default), 1 is 2nd position, 2 is 3rd position and so on.
Default
Height¶
Property
Height
Data type
string
Description
Height of the image in pixel. I.e: width = 120c and height = 80c crops 120x80px from the center of the scaled image. Width = 100c-100 and height = 100c crops 100x100px from landscape-images at the left and portrait- images centered. Width = 100c+30 height = 100c-25 crops 100x100px from landscape-images a bit right of the center and portrait-images a bit higher than centered.
Default
Width¶
Property
Width
Data type
string
Description
Width of the image in pixel. The samples at property height above.
Default
SEO field¶
Property
SEO field
Data type
string
Description
Field for Search Engine Optimisation (SEO). The field for alttext and the titletext property. I.e. tx_org_service.imageseo
Default
Render layout¶
Property
Render layout
Data type
string
Description
Possible values are: data, default, picture and srcset
- data: renders an image tag containing data-keys for the different resolutions.
- default: renders a normal non-responsive image as a <img> tag.
- picture: renders a picture tag containing source tags for each resolutions and an <img> tag for the default image.
- srcset: renders an image tag pointing to a set of images for the different resolutions.
Default
default
Path¶
Property
Path
Data type
string
Description
(Obligate!) Path to the images (with ending backslash!). I.e: uploads/tx_org/
Default
Default image¶
Property
Default image
Data type
string
Description
Full qualified path to the default image. I.e: EXT:browser/Resources/P ublic/Images/Icons/browser_default_300x200.gif
Default
See description
BROWSER - TEMPLATES - LIST - IMAGE [1-5]¶
See "BROWSER - TEMPLATES - LIST - IMAGE 0" on page 13 above.
BROWSER - TEMPLATES - LIST - URL 0¶
plugin.tx_browser_pi1.templates.listview.url.0
Key¶
Property
Key
Data type
string
Description
(Obligate!) Field with the key for controlling the URL type. I.e: tx_org_service.type
Default
Uid¶
Property
Uid
Data type
string
Description
(Obligate!) Field with the uid of the current record. I.e: tx_org_service.uid
Default
Page¶
Property
Page
Data type
string
Description
(Obligate!) Field with the link to the internal page. I.e: tx_org_service.page
Default
URL¶
Property
URL
Data type
string
Description
(Obligate!) Field with the link to the external website. I.e: tx_org_service.url
Default
Force absolute URL¶
Property
Force absolute URL
Data type
boolean
Description
If it's enabled, a absolute URL will rendered. An absolute URL in a newsletter is obligatory!
Default
Scheme¶
Property
Scheme
Data type
string
Description
Scheme is used, if absolute Url is enabled.
Possible values: http,https
Default
http
return¶
Property
return
Data type
string
Description
Possible values: empty, target or url
- empty: a-tag (recommended).
- url: returns the URL only. Recommended for a rss feed.
- target: return the target only.
Default
empty
Alias for showUid¶
Property
Alias for showUid
Data type
string
Description
If the destination tables is using an alias for the showUid, you must enter it. I.e: jobUid
Default
PID of single view¶
Property
PID of single view
Data type
int+
Description
Page id of the single view. Leave it empty, if the list view and single have the same pid. I.e: 142
Default
BROWSER - TEMPLATES - LIST - URL [1-5]¶
See "BROWSER - TEMPLATES - LIST - URL 0" on page 14 above.
BROWSER - TEMPLATES - SINGLE - IMAGE 0¶
plugin.tx_browser_pi1.templates.listview.image.0
File¶
Property
File
Data type
string
Description
(Obligate!) Field with the file name. I.e: tx_org_service.image
Default
Height field¶
Property
Height field
Data type
string
Description
Field with the image height. I.e: tx_org_service.imageheight
Default
Height default¶
Property
Height default
Data type
string
Description
Default height of the image in pixel. I.e: width = 120c and height = 80c crops 120x80px from the center of the scaled image. Width = 100c-100 and height = 100c crops 100x100px from landscape-images at the left and portrait- images centered. Width = 100c+30 height = 100c-25 crops 100x100px from landscape-images a bit right of the center and portrait-images a bit higher than centered.
Default
Width field¶
Property
Width field
Data type
string
Description
Field with the image width. I.e: tx_org_service.imagewidth
Default
Width default¶
Property
Width default
Data type
string
Description
Default width of the image in pixel. See the samples at property height above.
Default
SEO field¶
Property
SEO field
Data type
string
Description
Field for Search Engine Optimisation (SEO). The field for alttext and the titletext property. I.e. tx_org_service.imageseo
Default
Image orient¶
Property
Image orient
Data type
string
Description
Field for the image orient. I.e. tx_org_service.imageorient
Default
Image columns¶
Property
Image columns
Data type
string
Description
Field for the image columns. I.e. tx_org_service.imagecols
Default
Image zoom¶
Property
Image zoom
Data type
string
Description
If enabled, image will enlarged on click. I.e. tx_org_service.image_zoom
Default
Render layout¶
Property
Render layout
Data type
string
Description
Possible values are: data, default, picture and srcset
- data: renders an image tag containing data-keys for the different resolutions.
- default: renders a normal non-responsive image as a <img> tag.
- picture: renders a picture tag containing source tags for each resolutions and an <img> tag for the default image.
- srcset: renders an image tag pointing to a set of images for the different resolutions.
Default
default
Path¶
Property
Path
Data type
string
Description
(Obligate!) Path to the images (with ending backslash!). I.e: uploads/tx_org/
Default
BROWSER - TEMPLATES - SINGLE - IMAGE 1¶
See "BROWSER - TEMPLATES - SINGLE - IMAGE 0" on page 15 above.
Update¶
From < 6.x/7.0¶
The Browser – TYPO3 without PHP – has lost the capability, to detect images automatically.
If you haven't configured your image in the TypoScript for the Browser, you have to configure it now.
See the samples
- "Without FAL" on page 9 above and
- "With FAL" on page 11 above
Helpful suggestions¶
((generated))¶
Forum¶
If you have helpful suggestions, feel free to publish any question, bug or code snippet on
http://typo3-browser-forum.de/
Posts are welcome in English and German.
New Features and Bug Reports¶
You are welcome to post any question, bug or code snippet on TYPO3 forge.Here you find feature announcements and bug reports.See
Change Log¶
7.0.8 Update #i0002: New section: Examples.
7.0.7 Update #i0001: Browser 6.x/7.x, TYPO3 6.x
3.6.1 svn revision 43034 New Features - 12756: Images got full tt_content support
3.6.0 New Features - #11211: Wrap for image and image caption with the image number- #11204: If a record hasn't any image, a alternate image will be displayed by default
3.0.3: Improvement Extending the tutorial with an example with jQuery FancyBox (jq_fancybox)
3.0.1: Initial release
Illustration Index¶
Illustration 1: Images above the text and centered 5
Illustration 2: Configuration in the backend 5
Illustration 3: Images beside right of the text 5
Illustration 4: Configuration in the backend 5
Illustration 5: Images below the text on the left 6
Illustration 6: Configuration in the backend 6
Illustration 7: Responsive lightbox 6
Illustration 8: Configuration in the backend 6
Illustration 9: Link types 7
Alphabetical Index¶
20