[ 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 1, 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
In this article by Dan Osipov, author of TYPO3 4.3 Multimedia Cookbook, we will cover:
- Rendering images using content elements
- Embedding images in RTE
- Rendering images using TypoScript
- Rendering links to files using the
tags - Creating a gallery using ce_gallery
- Rendering metadata from a DAM object
Rendering images using content elements
Content elements offer a variety of ways for editors to include images. We will examine these here. Here is a typical selection menu that editor is presented with:
A great way to start is to assemble pages from the Regular text element and the Text with image elements
Getting Ready
Make sure Content (default) is selected in Include static, and the CSS Styled Content template is included in the Include static (from extensions) field of the template record of the current page or any page above it in the hierarchy (page tree). To verify, go to the Template module, select the appropriate page, and click edit the whole template record.
How to do it...
- Create the Text with image element.
- Under the Text tab, enter the text you want to appear on the page.
- Under the Media tab, select your image settings. If you want to upload the image, use the first field. If you want to use an existing image, use the second field.
- Under Position, you are able to select where the image will appear in relation to the text.
You can use the RTE (Rich Text Editor) to apply formatting, or disable it. We will cover RTE in more detail later in this article.
How it works...
When the page is rendered in the frontend, the images will be placed next to the text you entered, in the position that you specify. The specific look will depend on the template that you are using.
There's more
An alternative to the Text with images is an Images only content element. This element gives you similar options, except limits the options to just a display of images. The rest of the options are the same.
You can also resize the image, add caption, alt tags for accessibility and search engine optimization, and change default processing options. See the official TYPO3 documentation for details of how these fields work, (http://typo3.org/documentation/document-library/).
See also
- Render video and audio using content elements and rgmediaimages extension
Embedding images in RTE
Rich Text Editor is great for text entry. By default, TYPO3 ships with htmlArea RTE as a system extension. Other editors are available, and can be installed if needed.
Images can be embedded and manipulated within the RTE. This provides one place for content editors to use in order to arrange content how they want it to appear at the frontend of the site. In this recipe, we will see how this can be accomplished. The instructions apply to all forms that have RTE-enabled fields, but we will use the text content element for a simple demonstration.
In the Extension Manager, click on htmlArea RTE extension to bring up its options. Make sure that the Enable images in the RTE [enableImages] setting is enabled. If you have a recent version of DAM installed (at least 1.1.0), make sure that the Enable the DAM media browser [enableDAMBrowser] setting is unchecked. This setting is deprecated, and is there for installations using older versions of DAM.
How to do it...
- Create a new Regular text element content element.
- In the RTE, click on the icon to insert an image as shown in the following screenshot:
- Choose a file, and click on the icon to insert it into the Text area. You should see the image as it will appear at the frontend of the site.
- Save and preview. The output should appear similar to the following screenshot:
How it works...
When you insert an image through the RTE, the image is copied to uploads folder, and included from there. The new file will be resampled and sized down, so, it usually occupies less space and is downloaded faster than the original file. TYPO3 will automatically determine if the original file has changed, and update the file used in the RTE—but you should still be aware of this behaviour.
Furthermore, if you have DAM installed, and you have included an image from DAM, you can see the updated record usage. If you view the record information, you should see the Content Element where the image is used:
There's more
There are a few other things you can do in RTE with the images. We will cover:
- Other modes of inclusion
- Resizing images
- Setting maximum dimensions of images
- Using TinyMCE for embedding images
Other modes of inclusion
When you bring up the Insert Image wizard, it has three or more tabs (depending on the extensions you have installed). We've included the image using the default New Magic Image tab. Let's see what the other tabs do.
New Plain Image
Plain image inserts the image directly, without creating a copy. If you resize the image in RTE, it will be resized in HTML, but the original file will stay intact. This is different from the resampling behaviour of the Magic Image.
Drag 'n' Drop
Drag 'n' Drop allows you to choose an image in the wizard, and drag it into the RTE. Once you release the mouse button, the image will be inserted into text where your cursor was placed.
Upload
Upload tab appears if you have the DAM extension installed. The tab provides a convenient place to upload images to the server, and include them in the RTE right away, without a need to browse to other modules. This wizard is DAM compatible, so any files that are uploaded will be indexed by the DAM.
Current Image
If you select an image in the RTE, and then click on the Insert Image button, you will get the Insert Image wizard with a new tab—Current Image. Here, you can modify some image properties, or replace the image using the other tabs.
Resizing images
Images can be resized easily within the RTE. To resize an image, click on it, then click and drag one of the corners, or a side to size the image down or up:
Setting maximum dimensions of images
You can set maximum dimension constraints for all the images added to the RTE. To do so, add the following to Page TSconfig:
RTE.default.buttons.image.options.magic.maxWidth = 640
RTE.default.buttons.image.options.magic.maxHeight = 480
Using TinyMCE for embedding images
Another popular RTE that TYPO3 supports is TinyMCE. It can be enabled by uninstalling rtehtmlarea and installing the tinyrte extension. Although the interface looks different, the possibilities for image embedding are the same. You can click a button in the toolbar, which brings up a popup window allowing you to select the image you want—as shown in the following screenshots:
Rendering images using TypoScript
All the content objects available can be created using TypoScript. We will look at the IMAGE content object . Despite its simplicity, there are various situations, in which it is useful. For example, you might need to render an image on several pages, but don't want to include it in the template because it is dynamic. Using TypoScript, you can use conditionals to control which image is rendered, wrap the image in a link, and more. Here, we will first create a simple image, and then see what other options can be given.
How to do it...
- Modify the template on any page.
- Add the following code to the setup field, substituting page.12 with the path to the object or marker where you want the image to appear:
page.12 = IMAGE
page.12 {
file = fileadmin/image.jpg
} - Save, clear cache (if necessary), and preview the page.
How it works...
Content objects take certain parameters as an input, and provide HTML as output. In this case, the input is just a path to a file, but it could be more involved—for examples, see the There's more... section.
Check the chapter in TSRef about IMAGE object:http://typo3.org/documentation/document-library/references/doc_core_tsref/4.3.0/view/1/7/#id2519243.
There's more
There are more options besides file that can be passed to the object.
Adding alternative text to images
Alternative text (alt tag) can be added to the image using:
page.12.altText = Alternative text
Likewise, a title tag can be added simply by:
page.12.titleText = Title text
Of course, the values don't have to be hardcoded in, but can come from anywhere in the system by applying stdWrap properties.
Wrapping the image in a link
One useful option is having the image as a link. This can be easily done using stdWrap:
page.12.stdWrap.typolink {
parameter.data = 123
}
Executing from an extension
The IMAGE object can be created from an extension, using the following code:
$cObj->cImage($file, $conf);
Here, $file is the path to the file (which will be resolved by TYPO3, and converted or resized if necessary) and $conf is the configuration array for the image object.
See also
- Rendering audio and video using media TypoScript object
>> Continue Reading Rendering Images in TYPO3 4.3: Part 2
[ 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