Rendering Images in TYPO3 4.3: Part 2

Exclusive offer: get 50% off this eBook here
TYPO3 4.3 Multimedia Cookbook

TYPO3 4.3 Multimedia Cookbook — Save 50%

Over 50 great recipes for effectively managing multimedia content to create an organized web site in TYPO3

$23.99    $12.00
by Dan Osipov | January 2010 | MySQL Content Management Open Source PHP

Read Part One of Rendering Images in TYPO3 4.3 here.

Rendering links to files using <media> tags

Imagine, for a second, a dark world of web development without content management systems. You have a simple website with some text and links to files to be downloaded. Now, imagine that you need to move the files into a different folder. You would have to go through each page, and update the links to point to the new location of the file.

In DAM, the physical file is separate from the record describing the file. Thanks to this separation, the pages can link to the DAM record, instead of the physical file. If the file is moved, only the DAM record will need to be updated (which happens automatically if you move the file within DAM modules), and all links will automatically update. We will now explore how the <media> HTML tag can be used to take advantage of this feature.

Getting Ready

Make sure both DAM and htmlArea RTE extensions are installed. In the Extension Manager click on the DAM extension to get an overview of enable configuration. Make sure that the media tag option is enabled.

How to do it...

  1. Create a new Regular text element on a page.
  2. Enter the HTML mode in the RTE:

    TYPO3 4.3 Multimedia Cookbook

  3. Type in <media 1234>Link text</media>, replacing 1234 with the UID of the DAM record, and link the text with the text you want to appear inside the link.
  4. You can find the UID of the record in the information panel.

    TYPO3 4.3 Multimedia Cookbook

  5. Save and preview.

How it works...

The advantage of the <media> tag is that instead of linking to a file, you're linking to a DAM record. The record, in turn, points to the physical file—so if you move the files around, all links will be updated automatically.

There's more

It may be possible that after enabling all the options in the Extension Manager, the <media> tags are encoded by RTE, and appear in the frontend unparsed. In that case, you need to enter the following options in Page TSconfig:

// Add txdam_media to RTE processing rules
RTE.default.proc.overruleMode = ts_css,txdam_media
// Use same RTE processing rules in FE
RTE.default.FE.proc.overruleMode = ts_css,txdam_media
// RTE processing rules for bodytext column of tt_content table
RTE.config.tt_content.bodytext.proc.overruleMode = ts_css,txdam_media
RTE.config.tt_content.bodytext.types.text.proc.overruleMode = ts_
css,txdam_media
RTE.config.tt_content.bodytext.types.textpic.proc.overruleMode = ts_
css,txdam_media

Accessing Page TSconfig

To access Page TSconfig, right-click on a page in the page tree, and choose

Edit page properties:

TYPO3 4.3 Multimedia Cookbook

Alternatively, you can browse to the page in the Page module, and click the Edit page properties button either in the module body, or in the docheader —the bar across the top of the module housing the control buttons.

TYPO3 4.3 Multimedia Cookbook

From there, the Page TSConfig, is available under the Options tab:

TYPO3 4.3 Multimedia Cookbook

Creating a gallery using ce_gallery

There are multiple galleries available for TYPO3. Each has its own advantages, and an entire book can be dedicated to comparing the various extensions. We will install and configure only one as an example. ce_gallery has an advantage that it is very easy to set up and customize, and relies completely on DAM for content and organization.

Getting Ready

Make sure you have the extensions DAM and dam_catedit installed. Create a root category, and a few categories under it. Assign a few JPG images to each category

How to do it...

  1. Install ce_gallery. Accept database and filesystem changes.
  2. In a template record, include the static template Photogallery (CSS) (ce_gallery).
  3. Add a Plugin content element of type Photogallery to a page.
  4. In the General tab, uncheck the Slimbox (pmkslimbox needed) checkbox.
  5. In the Categories tab, select the root category and check the box that says Recursive:

    TYPO3 4.3 Multimedia Cookbook

  6. Save and preview. The output should appear similar to the following screenshot:

    TYPO3 4.3 Multimedia Cookbook

How it works...

ce_gallery treats DAM categories as albums, which in turn, contain pictures. If you want to add more photos to an album, just assign them to a category, and clear cache on the page where you added the Photogallery plugin.

TYPO3 4.3 Multimedia Cookbook Over 50 great recipes for effectively managing multimedia content to create an organized web site in TYPO3
Published: February 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

There's more

In this section, we will see how to use Slimbox for displaying images and utilize batch process while creating a gallery.

Using Slimbox for displaying images

To make use of the Slimbox, you need to install the extension pmkslimbox . Once it is installed, include the static template it provides in the page template. When this is done, edit the Photogallery content element, and check the Slimbox (pmkslimbox needed) checkbox that we had unchecked earlier. Now, instead of linking to another page to display the image, the image will be loaded into the same page using AJAX. For example, this is how your image will look when someone clicks on the thumbnail:

Utilizing batch processing

If you have several photos that you want to assign to a category, you can use DAM's batch operations. Here is what you can do:

Build your selection: You can use the various controls provided by DAM to choose files from multiple folders, of different types, or you can even search the metadata.

TYPO3 4.3 Multimedia Cookbook

Once you have the selection built, select Process from the submodule selector. Under the Categories field, select the category you want to add the objects to. If the objects are assigned to other categories, and you don't want to lose that connection, check the box next to the Categories field, and the new category will be added to whatever categories the objects are already assigned to. Click Process when you're done.

TYPO3 4.3 Multimedia Cookbook

See also

  • Setting up a category tree

Rendering metadata from a DAM object

We'll use some very basic TypoScript and see how metadata stored in DAM records can be rendered on a page, along with the media objects, or even in them. This is commonly used for inserting accessibility tags (alt and title) into images.

How to do it...

  1. Create a Template on the page.
  2. In the setup field, add the following, replacing page.17 with a path to the object you want to place the content in, and replacing 1234 with the UID for a DAM record, whose caption you would like to display:

    page.17 = TEXT
    page.17.data = DB:tx_dam:1234:caption
  3. Save and preview.

How it works...

Data property is available wherever stdWrap is applied. So, you can display any of the metadata available in the DAM record, almost anywhere. Furthermore, because stdWrap properties are recursive, you can apply further processing to the values.

For more information about stdWrap, see the section of TSRef:http://typo3.org/documentation/document-library/references/doc_core_tsref/4.3.0/view/1/5/#id2360021.

In this case, we are using the data property to fetch a record from the database. The syntax for doing so is DB:table:UID:field. So, in the example above, we are taking the caption field of record with the UID 1234 from tx_dam table.

Refer to ext_tables.sql in the extension directory for a complete database schema.

TypoScript is extremely powerful, so you should read into the details to see what else you can do with it.

There's more

We can use this method to add a caption to an image, added through TypoScript.


page.16 = IMAGE
page.16.altText.data = DB:tx_dam:1585:caption

See also

  • Rendering images using TypoScript

Summary

This article covered how images can be included on a TYPO3-driven website using content elements and a TYPO3 script. It also covered how to embed images in Rich Text Editor. You also learned to render links to media files, create a gallery, and render metadata using a DAM object.

[ 1 | 2 ]

If you have read this article you may be interested to view :

TYPO3 4.3 Multimedia Cookbook Over 50 great recipes for effectively managing multimedia content to create an organized web site in TYPO3
Published: February 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Dan Osipov

Dan Osipov has worked with TYPO3 CMS for over two years on a full time basis. He created the system architecture used to power high-traffic, dynamic news sites, where emphasis is placed on multimedia and relevancy. He is also a member of Digital Asset Management team, focused on development of the DAM extension for TYPO3.

Books From Packt

Magento 1.3: PHP Developer's Guide
Magento 1.3: PHP Developer's Guide

Joomla! with Flash
Joomla! with Flash

WordPress 2.8 Theme Design
WordPress 2.8 Theme Design

PHP 5 E-commerce Development
PHP 5 E-commerce Development

Python Testing: Beginner's Guide
Python Testing: Beginner's Guide

Oracle SQL Developer 2.1
Oracle SQL Developer 2.1

Microsoft Office Live Small Business: Beginner’s Guide
Microsoft Office Live Small Business: Beginner’s Guide

Moodle 1.9 Teaching Techniques
Moodle 1.9 Teaching Techniques

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software