[ Send this article ]
Your message has been sent.
How would you like to send this article:
[ Save this article ]
Save this article to your account for easy access.
This article has been saved to your account.
Go to my account
This article has been emailed to your Kindle.
Send this article
Complete the form below to send this article, Rendering Images in TYPO3 4.3: Part 2, to a friend (or to yourself). We will never share your details (or your friend's) with anyone. For more information, read our Privacy Policy.
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...
- Create a new Regular text element on a page.
- Enter the HTML mode in the RTE:
- 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.
- Save and preview.
You can find the UID of the record in the information panel.
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:
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.
From there, the Page TSConfig, is available under the Options tab:
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...
- Install ce_gallery. Accept database and filesystem changes.
- In a template record, include the static template Photogallery (CSS) (ce_gallery).
- Add a Plugin content element of type Photogallery to a page.
- In the General tab, uncheck the Slimbox (pmkslimbox needed) checkbox.
- In the Categories tab, select the root category and check the box that says Recursive:
- Save and preview. The output should appear similar to the following screenshot:
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.
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.
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.
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...
- Create a Template on the page.
- 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 - 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 :
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.
Post new comment