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

img-1 img-2 Browser Tutorial Images (en) (extkey: browser_tut_images_en) img-3

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.

img-4

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

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).

Further Information

This tutorial in PDF format

You find this tutorial as a PDF file at

Browser Manual

Manual: The Browser has it's own manual (with the reference of course).

Examples

The illustration below is based on the calendar modul of the extension Organiser – TYPO3 for Lobbies and Organisers. See

Above center

Frame1 Frame1

Beside right

Frame1 Frame1

Below left

Frame1 Frame1

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

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

Caption

Property

Caption

Data type

string

Description

Field for the image caption. I.e. tx_org_service.imagecaption

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

http://forge.typo3.org/projects/show/extension-browser

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