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:

   

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.

You can find the UID of the record in the information panel.



4. 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:

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…

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:

   

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