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:
