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.

EXT: Portfolio¶

Created:	2010-02-18T17:33:18
Changed:	2010-07-20T11:13:52
Classification:	fr_portfolio
Description:	The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) see more: http://wiki.typo3.org/doc_template#tags ----
Keywords:	forEditors, forAdmin
Author:	Frank Frewer
Email:	info@frankfrewer.de
Info 4:
Language:	en

EXT: Portfolio - fr_portfolio

EXT: Portfolio¶

Extension Key: fr_portfolio

Language: en

Keywords: forEditors, forAdmin

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: Portfolio 1

`Introduction 3 <#1.1.Introduction|outline>`_

What does it do? 3

Screenshots 3

`Users manual 7 <#1.2.Users%20manual|outline>`_

Installation 7

`Create a sysfolder for portfolio projects, clients and categories 7 < #1.2.2.Create%20a%20sysfolder%20for%20portfolio%20projects,%20clients% 20and%20categories|outline>`_

Create a page containing the portfolio plugin 10

The portfolio content element 11

`Administration 12 <#1.3.Administration|outline>`_

Installation 12

Include static template (optional) 12

`Configuration 13 <#1.4.Configuration|outline>`_

Reference 13

`Tutorial 17 <#1.5.Tutorial|outline>`_

`Known problems 18 <#1.6.Known%20problems|outline>`_

`To-Do list 19 <#1.7.To-Do%20list|outline>`_

`ChangeLog 20 <#1.8.ChangeLog|outline>`_

Introduction¶

What does it do?¶

This extension gives you the possibility to display your portfolio in a highly configurable way. There are different list variants for projects, clients and categories. Example: http://demo.frankfrewer.de /portfolio-extension

Screenshots¶

List view/ category list / client list on one page:

Same list view, filtered by client “KundeA”:

Same list view, filtered by category “KategorieA”:

Optionally you can link the thumbnail (and/or the project title) in list or single view to the standard lightbox:

Your can use a alternative “lightbox”: This variant hides a - via typoscript - defined DIV (in this case the DIV where the project list resides) and shows the content at the same position:

Single view of a project with use of lightbox. Client list and category list in this case as dropdown fields:

Single view of a project without lightbox. Client list and category list in this case as dropdown fields:

Three minimalistic project list views on one page: simple list (project title), url list, thumb list:

Users manual¶

Installation¶

The installation procedure is described in the next section “Administration”.

Create a sysfolder for portfolio projects, clients and categories¶

Create a new page of type 'sysfolder' (e.g. “db_portfolio”). In this page you have to store the portfolio projects, clients and categories.

To make TYPO3 automatically clear the cache of the portfolio pages in the frontend, add the following snippet of TSConfig to the 'page properties' of the sysfolder:

TCEMAIN.clearCacheCmd = [comma seperated list of page id's on which you have portfolio plugins]

Whenever you add or modify a portfolio entry, the cache of the frontend pages will be cleared.

Create a category (optional)¶

Go to the portfolio sysfolder (list view) and create a new record of type 'Portfolio category'.

To make sure you can select your newly created category when creating a new portfolio entry.

Create a client (optional)¶

Go to the portfolio sysfolder (list view) and create a new record of type 'Portfolio client'.

To make sure you can select your newly created client when creating a new portfolio entry.

Create a project¶

Go to the portfolio sysfolder (list view) and create a new record of type 'Portfolio project'.Tab “General”: Choose a title and the project URL (optionally)

Tab “Text”: Choose description, teaser and particulars.

Tab “Media”: Choose images.

Tab “Categories & Clients”: Choose categories, clients and agency clients.

Save the project.

Create a page containing the portfolio plugin¶

Create a new page for the portfolio plugin.

Insert the plugin by choosing 'Create page content' and select 'Portfolio' from the plugin list.

Tab “General': Choose a header.

Tab “Plugin': Choose what to display. You could start out with 'LIST'.

Choose a startingpoint. This will probably be the sysfolder you just created. You might define some other configuration vars.

Check out the page in the frontend.

The portfolio content element¶

Displays a simple list of portfolio projects: Only the project URL are listed.

Administration¶

Installation¶

Install the extension with the extension manager.

Include static template (optional)¶

Select Web>Template and the page with your template.

Select “Info/Modify” and then click on “Click here to edit whole template record”.

In the section “Include static (from extension)” you will find “Portfolio(fr_portfolio)” in the right frame “Items”. After clicking you will find it in the left frame “Selected”.

Alternatively you can do the whole configuration with your own typoscript. Look at the example in the section “Configuration”.

Configuration¶

Reference¶

tx_frportfolio_pi1 properties: TS configuration.

templateFile¶

Property

templateFile

Data type

resource

Description

The template-file. (See default template-file: "/typo3conf/ext/fr_portfolio/pi1/fr_portfolio.tmpl"). You can define a template for a complete pagetree or a certain page in the Constant Editor or directly in your TS setup.

Example:

plugin.tx_frportfolio_pi1 {

templateFile = fileadmin/templates/fr_portfolio.tmpl

}

Default

/typo3conf/ext/fr_portfolio/pi1/f_rportfolio.tmpl

cssFile¶

Property

cssFile

Data type

resource

Description

The css-file. (See default css-file: "/typo3conf/ext/fr_portfolio/res/fr_portfolio.css"). You can define the css-file for a complete pagetree or a certain page in the Constant Editor or directly in your TS setup.

Example:

plugin.tx_frportfolio_pi1 {

cssFile = fileadmin/templates/css/fr_portfolio.css

}

Default

useLightBox¶

Property

useLightBox

Data type

boolean

Description

Use lightbox2 for displaying images ( http://www.huddletogether.com/projects/lightbox2/ )

If set to 0, in the single view of a project you will see the first image large and below the list of thumbnails. Otherwise you will see only the tumbnails.

Default

0

imageMagickParameters¶

Property

imageMagickParameters

Data type

string

Description

ImageMagick parameters: These parameters will be used when scaling and cropping images. http://redskiesatnight.com/Articles/IMsharpen/

Default

-quality 80 +profile "*" -unsharp 0.5x0.5+1.5

imageMagickThumbParameters¶

Property

imageMagickThumbParameters

Data type

string

Description

-quality 60 +profile "*" -unsharp 0.5x0.5+1.5ImageMagick thumbnail parameters: These parameters will be used when scaling and cropping thumbnails. http://redskiesatnight.com/Articles/IMsharpen/

Default

-quality 60 +profile "*" -unsharp 0.5x0.5+1.5

thumbnailWidth¶

Property

thumbnailWidth

Data type

int

Description

The maximum width that thumbnails of the images can have.

Default

imageWidth¶

Property

imageWidth

Data type

int

Description

The maximum width that images (e.g. images) can have.

Default

pid_list¶

Property

pid_list

Data type

int

Description

The page ID where portfolio items (projects), clients and categories are stored.

Default

listPid¶

Property

listPid

Data type

int

Description

The page ID for List display modes.

Default

Property

lightboxStandard.cssFile

Data type

resource

Description

The css-file for the standard lightbox. (See default css-file: "typo3conf/ext/fr_portfolio/res/lightbox2/css/lightbox.css"). You can define the css-file for a complete pagetree or a certain page in the Constant Editor or directly in your TS setup.

Example:

plugin.tx_frportfolio_pi1 {

lightboxStandard.cssFile = fileadmin/templates/css/ lightbox.css

}

Default

lightboxStandard.jsFile¶

Property

lightboxStandard.jsFile

Data type

resource

Description

The js-file for the standard lightbox. (See default js-file: "typo3conf/ext/fr_portfolio/res/lightbox2/js/lightbox.js"). You can define the js-file for a complete pagetree or a certain page in the Constant Editor or directly in your TS setup.

Example:

plugin.tx_frportfolio_pi1 {

lightboxStandard.jsFile = fileadmin/templates/js/ lightbox.js

}

Default

lightboxStandard.captionWrap¶

Property

lightboxStandard.captionWrap

Data type

string

Description

If you want to change the number display in the lightbox you have to set this parameter.

Example:

plugin.tx_frportfolio_pi1 {

lightboxStandard {

captionWrap = Kunde: |<br>Projekt: |

}

Default

(Client: |<br>Project: |)

lightbox.js

lightboxStandard.numberDisplayWrap¶

Property

lightboxStandard.numberDisplayWrap

Data type

boolean

Description

If you want to change the number display in the lightbox you have to set this parameter to 1

Default

1

lightboxStandard.numberDisplayWrap.value¶

Property

lightboxStandard.numberDisplayWrap.value

Data type

string

Description

Example:

plugin.tx_frportfolio_pi1 {

lightboxStandard {

numberDisplayWrap = 1

numberDisplayWrap {

value = Bild | von | |

}

Default

(Image | of | | )

lightbox.js

lightboxInside¶

Property

lightboxInside

Data type

boolean

Description

While the standard lightbox overlays the whole browser window with a transparent background with the picture centered in the window, this variant overlays only a div, which has to defined with lightboxInside.lightboxInside.divToHideId.

Example:

plugin.tx_frportfolio_pi1 {

lightboxInside = 1

lightboxInside {

divToHideId = main

captionWrap = Kunde: |<br>Projekt: |

numberDisplayWrap = 1

numberDisplayWrap {

value = Bild | von | |

}

Default

0

lightboxInside.cssFile¶

Property

lightboxInside.cssFile

Data type

resource

Description

The css-file for the lightbox variant which overlays a defined div - look lightboxInside.divToHideId. (See default css-file: "typo3conf/ext/fr_portfolio/res/lightbox2/css/lightboxInside.css"). You can define the css-file for a complete pagetree or a certain page in the Constant Editor or directly in your TS setup.

Example:

plugin.tx_frportfolio_pi1 {

lightboxInside.cssFile = fileadmin/templates/css/ lightboxInside.css

}

Default

lightboxInside.jsFile¶

Property

lightboxInside.jsFile

Data type

resource

Description

The js-file for the lightbox variant which overlays a defined div - look lightboxInside.divToHideId. (See default js-file: "typo3conf/ext/fr_portfolio/res/lightbox2/js/lightboxInside.js"). You can define the js-file for a complete pagetree or a certain page in the Constant Editor or directly in your TS setup.

Example:

plugin.tx_frportfolio_pi1 {

lightboxInside.cssFile = fileadmin/templates/js/ lightboxInside.js

}

Default

lightboxInside.divToHideId¶

Property

lightboxInside.divToHideId

Data type

string

Description

Set the div, which shuold overlayed by the Lightbox. This div must have an ID. lightboxInside must be set to 1.

Example:

plugin.tx_frportfolio_pi1 {

lightboxInside = 1

lightboxInside .divToHideId = main

}

Default

lightboxInside.top¶

Property

lightboxInside.top

Data type

int

Description

Maybe deprecated

Default

lightboxInside.captionWrap¶

Property

lightboxInside.captionWrap

Data type

string

Description

If you want to change the number display in this lightbox you have to set this parameter.

Example:

plugin.tx_frportfolio_pi1 {

lightboxInside = 1

lightboxInside {

captionWrap = Kunde: |<br>Projekt: |

}

Default

(Client: |<br>Project: |)

lightboxInside.js

lightboxInside.numberDisplayWrap¶

Property

lightboxInside.numberDisplayWrap

Data type

boolean

Description

If you want to change the number display in this lightbox you have to set this parameter to 1.

Default

0

lightboxInside.numberDisplayWrap.value¶

Property

lightboxInside.numberDisplayWrap.value

Data type

string

Description

Example:

plugin.tx_frportfolio_pi1 {

lightboxInside = 1

lightboxInside {

numberDisplayWrap = 1

numberDisplayWrap {

value = Bild | von | |

}

Default

(Image | of | | )

lightboxInside.js

lightboxInside.imageDataInnerWrap¶

Property

lightboxInside.imageDataInnerWrap

Data type

string

Description

With this parameter you can wrap some html code to the box with the image data (caption, number list, close button)

Example:

plugin.tx_frportfolio_pi1.lightboxInside {

imageDataInnerWrap = |<br/><br/><br/><div style="border: 1px dotted black;width=400px;height:1px;"></div>

}

Default

displayList.linkCategories¶

Property

displayList.linkCategories

Data type

boolean

Description

Set this to 0, if you don't want that the listed categories for each project are linked to the filter function.

Default

1

displayList.linkTitleToLightbox¶

Property

displayList.linkTitleToLightbox

Data type

boolean

Description

Normally the project title is linked to the detail view. Set this parameter to 1, if you want to have a link to Lightbox.

Default

0

displayList.linkThumbToLightbox¶

Property

displayList.linkThumbToLightbox

Data type

boolean

Description

By default the project thumb is linked to the lightbox. Set this parameter to 0, if you want to have a link to the detail view.

Default

1

displayList.showMoreLink¶

Property

displayList.showMoreLink

Data type

boolean

Description

Set this to 0, if you don't want to have a “more” link behind the teaser.

Default

1

displayList.listItemBottomCode¶

Property

displayList.listItemBottomCode

Data type

string

Description

If e.g. you want to have a divider behind each project, which does not appear behind the last project, you can set this here.

Example:

plugin.tx_frportfolio_pi1 {

displayList {

listItemBottomCode = <div class="divider"></div>

}

Default

displaySingle.linkCategories¶

Property

displaySingle.linkCategories

Data type

boolean

Description

Set this to 0, if you don't want that the listed categories for the single project are linked to the filter function.

Default

1

displaySingle.linkTitleToLightbox¶

Property

displaySingle.linkTitleToLightbox

Data type

boolean

Description

Normally the project title in the single view is linked to the project URL. Set this parameter to 1, if you want to have a link to Lightbox.

Default

0

displaySingle.showNav¶

Property

displaySingle.showNav

Data type

boolean

Description

Set this to 0 to hide the navigation below the single view.

Default

1

displaySingle.showNavIcons¶

Property

displaySingle.showNavIcons

Data type

boolean

Description

Set this to 0 to have a text navigation below the single view.

Default

1

_LOCAL_LANG.[lang-key].[label-key]¶

Property

_LOCAL_LANG.[lang-key].[label-key]

Data type

string

Description

Can be used to override the default locallang labels for the plugin. (Defaults in "/typo3conf/ext/fr_portfolio/pi1/locallang.xml")

Example:

plugin..tx_frportfolio_pi1._LOCAL_LANG.de.category= Kategorie

Default

[tsref:tx_frportfolio_pi1]

((generated))¶

Example¶

plugin.tx_frportfolio_pi1 {
        cssFile = fileadmin/templates/fr_portfolio/css/fr_portfolio.css

        useLightBox = 1
        showImageOriginalSize = 1

        lightboxStandard {
                cssFile = fileadmin/templates/fr_portfolio/css/lightbox.css
                jsFile = fileadmin/templates/fr_portfolio/js/lightbox.js
                captionWrap = <p id="captionClient">Kunde: |<\/p><p id="captionProject">Projekt: | <\/p>
                numberDisplayWrap = 1
                numberDisplayWrap {
                        value = Bild | von | |
                }
        }

        lightboxInside = 1
        lightboxInside {
                cssFile = fileadmin/templates/fr_portfolio/css/lightboxInside.css
                jsFile = fileadmin/templates/fr_portfolio/js/lightboxInside.js

                divToHideId = main
                captionWrap = Kunde: |<br/>Projekt: |
                numberDisplayWrap = 1
                numberDisplayWrap {
                        value = Bild | von | |
                }
                imageDataInnerWrap = |<br/><br/><br/><div style="border: 1px dotted black;width=400px;height:1px;"></div>
        }
        displayList {
                linkCategories = 1
                linkTitleToLightbox = 1
                linkThumbToLightbox = 0
                showMoreLink = 1
                listItemBottomCode = <div class="divider"></div>
        }
        displaySingle {
                linkCategories = 0
                linkTitleToLightbox = 0
                showNav = 0
                showNavIcons = 0

        }
}

Tutorial¶

Will be added later - maybe.

Known problems¶

None at the moment.

To-Do list¶

Add a page browser to the project list modes.
Add e.g. a description field to clients and categories and create a single display mode for this informations.
Complete the manual.

ChangeLog¶

0.1.0¶

Version

0.1.0

Changes

Initial release

0.1.1¶

Version

0.1.1

Changes

Update manual – table of contents

20