EXT: Random Images

Extension Key: maag_randomimages

Language: en

Keywords: random images

Copyright 2000-2010, maagIT, <info@maagit.ch>

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

EXT: Random Images	1

Introduction	4

What does it do?	4

Screenshots	4

Users manual	5

Folder structure	5

Text-Files for additional information	5

Define your Fluid-Template.	6

FAQ	6

Administration	7

Add the extension to a page content	7

FAQ	9

Configuration	10

Installation	10

Reference	10

FAQ	11

Known problems	12

To-Do list	13

ChangeLog	14

Table of Contents

EXT: Random Images	1

Introduction	4

What does it do?	4

Screenshots	4

Users manual	5

Folder structure	5

Text-Files for additional information of the image files	5

Define your Fluid-Template.	6

Fluid-Example for more than 1 randomly images	6

Fluid-Example for dynamic changed images	6

FAQ	6

Administration	7

Add the extension to a page content	7

Plugin Setting “Path of images”	8

Plugin Setting “ignore following path”	8

Plugin Setting “ignore following folder”	8

Plugin Setting “ignore following file”	8

Plugin Setting “Search images recursively”	8

Plugin Setting “Sort by”	8

Plugin Setting “Sort order”	8

Plugin Setting “Path and filename of fluid template file”	8

Plugin Setting “Dynamic change of images”	8

Plugin Setting “jQuery to image div list”	8

Plugin Setting “pause time of image change”	9

Plugin Setting “transition time of image change”	9

Plugin Setting “delay start of image change”	9

Plugin Setting “pause of image change on mouse over”	9

Plugin Setting “create navigation buttons”	9

FAQ	9

Configuration	10

Installation	10

Reference	10

Fluid objects and properties	10

TypoScript Constants	10

FAQ	11

Known problems	12

To-Do list	13

ChangeLog	14

Introduction

What does it do?

With this extension you can show random selected images from a defined folder. You can define folders, pathes and files to skip and order it by several settings.

You can make a “dynamic” change of the images with navigation buttons and given pause and transition time settings.

Define your layout yourself by fluid.

Screenshots

Randomly changed Images:

Users manual

Folder structure

Make a folder structure under your fileadmin path and add your image files. You can your folder structure as you want. In the plugin you can define the search of the images recursive or not recursive.

Text-Files for additional information

Add text files with extension “.alt”, “.cap”, “.tit” or “.txt” and the same name as the image in the same path like the image to add altText, Title-Text, Caption-Text and Links to a given image.

You can define text files as follows:

Fileextension	Definition
<same as image filename>.alt	Alt-Text of the image file. Use patterns for dynamic variables: #fn# for filename of image #fe# for fileextension of image #fd!Ymd!# for filedate, in exclamation marks define the date-format Example: - You have a image named testimage1.jpg - Make a file named “testimage1.alt” in the same folder - Write in this file the text (e.g. “This is Image 1”)
<same as image filename>.cap	Caption-Text of the image file. Use patterns for dynamic variables: #fn# for filename of image #fe# for fileextension of image #fd!Ymd!# for filedate, in exclamation marks define the date-format Example: - You have a image named testimage1.jpg - Make a file named “testimage1.cap” in the same folder - Write in this file the text (e.g. “This is Image 1”)
<same as image filename>.tit	Title-Text of the image file. Use patterns for dynamic variables: #fn# for filename of image #fe# for fileextension of image #fd!Ymd!# for filedate, in exclamation marks define the date-format Example: - You have a image named testimage1.jpg - Make a file named “testimage1.tit” in the same folder - Write in this file the text (e.g. “This is Image 1”)
<same as image filename>.txt	Link-Url of the image file. Use patterns for dynamic variables: #fn# for filename of image #fe# for fileextension of image #fd!Ymd!# for filedate, in exclamation marks define the date-format Example: - You have a image named testimage1.jpg - Make a file named “testimage1.txt” in the same folder - Write in this file the text (e.g. “http://www.google.com”)

Define your Fluid-Template.

In the Plugin you can define the filepath and filename of your own fluid template (e.g. /fileadmin/templates/extensions/maag_randomimages/Show.html). There are several possibilities to define your template.

Fluid-Example for more than 1 randomly images

<f:layout name="default" />
<f:section name="content">
<f:for each="{images}" as="image" iteration="iterator">
<f:if condition="{iterator.cycle} < 4">
<f:image src="{image.pathAndFilename}" height="120m" width="120m" title="{image.title}" />
</f:if>
</f:for>
</f:section>

Fluid-Example for dynamic changed images

<f:layout name="default" />

<f:section name="content">

<div id="randomImages">

<div class="effectContainer">

<f:for each="{images}" as="image">

<div>

<f:image src="{image.pathAndFilename}" alt="{image.alt}" title="{image.title}" />

<f:format.raw>{image.caption}</f:format.raw>

</div>

</f:for>

</div>

</div>

</f:section>

FAQ

No FAQ's available.

Administration

Add the extension to a page content

To show the random images on a page, you add the plugin as normal plugin to your page content. Add the plugin “Maag Random Images” to your page content and define the settings:

Plugin Setting “Path of images”

Path and filename of the beginning folder of your images.

Plugin Setting “ignore following path”

Define one or more (coma separated) path(es) you want exclude from the search.

Plugin Setting “ignore following folder”

Define one or more (coma separated) folder name(s) you want exclude from the search.

Plugin Setting “ignore following file”

Define one or more (coma separated) file name(s) or pattern(s) you want exclude from the search.

Plugin Setting “Search images recursively”

Make the search of images from the begin path recursive through all the subfolders?

Plugin Setting “Sort by”

If you want to sort your images, define it here.

Plugin Setting “Sort order”

Sort ascending or descending.

Plugin Setting “Path and filename of fluid template file”

Path and file name to a given fluid template file. If not defined, it takes the standard fluid template from the extension.

Plugin Setting “Dynamic change of images”

If you want to change the images dynamically on the client, you can say it here.

Plugin Setting “jQuery to image div list”

For dynamic change of the images, we uses jQuery. JQuery must know the path to the images container. Define it here (e.g. “#randomImages .effectContainer”).

<f:layout name="default" />

<f:section name="content">

<div id="randomImages">

<div class="effectContainer">

<f:for each="{images}" as="image">

<div>

<f:image src="{image.pathAndFilename}" alt="{image.alt}" title="{image.title}" />

<f:format.raw>{image.caption}</f:format.raw>

</div>

</f:for>

</div>

</div>

</f:section>

Plugin Setting “pause time of image change”

If you want to change the images dynamically. Define the pause time of image change in milliseconds.

Plugin Setting “transition time of image change”

If you want to change the images dynamically. Define the transition time of image change in milliseconds.

Plugin Setting “delay start of image change”

If you want to change the images dynamically. Define the start delay time in milliseconds.

Plugin Setting “pause of image change on mouse over”

If you want to change the images dynamically. Define, if the image change is stopped, if you go over the image with your mouse.

Plugin Setting “create navigation buttons”

If you want to change the images dynamically. You can create navigation buttons to navigate through your image container.

FAQ

No FAQ's available.

Configuration

Installation

Go to the extension manager and import an install the extension.

Reference

Fluid objects and properties

Object:	Property:	Data Type:	Description:
images		array of image objects	Array with all available image objects, ordered by given settings
image		object	Image object with all informations about the image
	id	string	A generated unique id
	filename	string	The filename with extension
	fileExtension	string	The file extension
	fileDate	int	The unix timestamp of create date
	path	string	The filepath without filename
	pathAndFilename	string	The path and filename of the image
	alt	string	The alt text (if defined with a “.alt”-file)
	title	string	The title text (if defined with a “.tit”-file)
	caption	string	The caption text (if defined with a “.cap”-file)
	link	string	The link url (if definied with a “.txt”-file)

TypoScript Constants

Property:	Data type:	Description:	Default:
view.templateRootPath	string	Wraps the whole item	EXT:maag_randomimages/Resources/Private/Templates/
view.partialRootPath	string	Fluid root path to the partials	EXT:maag_randomimages/Resources/Private/Partials/
view.layoutRootPath	string	Fluid root path to the layouts	EXT:maag_randomimages/Resources/Private/Layouts/

TypoScript Setup

Property:	Data type:	Description:	Default:
view.templateRootPath	string	Fluid root path to the templates	<constant>
view.partialRootPath	string	Fluid root path to the partials	<constant>
view.layoutRootPath	string	Fluid root path to the layouts	<constant>
settings.path	string	Path to the images	fileadmin/
settings.ignorePath	string	Path(es) to ignore (coma separated)	
settings.ignoreFolder	string	Folder name(s) to ignore (coma separated)	
settings.ignoreFile	string	File names to ignore (coma separated)	
settings.recursive	boolean	Search image files recursiverly in sub folders	1
settings.sort	int	Sort definition: 0 = unsorted, shuffled 1 = sort by filedate 2 = sort by filename (without path) 3 = sort by path and filename	0
settings.sortOrder	string	asc (ascending) / desc (descending)	asc
settings.file	string	Template path and filename to fluid template	
settings.dynamic	boolean	Dynamic change of images?	0
settings.dynamicChange.containerId	string	Jquery path to image div list	
settings.dynamicChange.pauseTime	int	Pause time of image change in milliseconds	4000
settings.dynamicChange.transitionTime	int	Transition time in milliseconds	1000
settings.dynamicChange.delayStart	int	Delay start time in milliseconds	4000
settings.dynamicChange.pauseOnMouseOver	boolean	Pause of image change on mouse over?	0
settings.dynamicChange.createNavButtons	boolean	Create navigation buttons?	0

Example

plugin.tx_randomimages {

view {

templateRootPath = {$plugin.tx_randomimages.view.templateRootPath}

partialRootPath = {$plugin.tx_randomimages.view.partialRootPath}

layoutRootPath = {$plugin.tx_randomimages.view.layoutRootPath}

}

settings {

path = fileadmin/user_upload/randomimages

ignorePath =

ignoreFolder =

ignoreFile =

recursive = 1

sort = 0

sortOrder = asc

file = typo3conf/ext/maag_randomimages/Resources/Private/Templates/Image/Show.html

dynamic = 0

dynamicChange {

containerId = #randomImages .effectContainer

pauseTime = 2000

transitionTime = 4000

delayStart = 2000

pauseOnMouseOver = 1

createNavButtons = 1

}

}

_CSS_DEFAULT_STYLE (

)

}

FAQ

No FAQ's available.

Known problems

No known problems available.

To-Do list

Nothing to do at the moment.

ChangeLog

Version	Changes:
1.0.0	Initial version
1.0.1	Bugfix on valid coding by implementing the jquery libraries
1.0.2	Bugfix: Fix reading typoscript settings, if more than 1 plugin is on the same page

EXT: Random Images - maag_randomimages	Known problems

10

EXT: Random Images

maag_randomimages

random images

Urs Maag

2010-02-18T17:33:18