deutsch | english

Naming Files and Folders in Filelist

When naming files and folders in the TYPO3 backend (Filelist view) please use the following naming conventions:

  1. Lower case letters only.
  2. No spaces.
  3. No Foreign characters (replace with standard). For example: German "ä" would be replaced with "ae".
  4. Allowed characters: "a-z", "0-9", "-", "_".

These will be used in URLs, so please follow the above conventions.

Adding Images

The following is a generic process for adding images to a Content Element in TYPO3.  The following steps should help you gain a familarity for how to add images to the Content Elements which use standard TYPO3 functionality.

To use an Add Image field within a Content Element, click on the text Add Image beneath the Image field header. This will open a small window which will display a Folder Tree in the upper left corner. Expand the folders in order to move into the folder where your image is stored. In this case, we will click on the text "stories" beside the story folder.

Screenshot showing navigating to images

This will display the images contained in the folder. If your image is already uploaded, you may click on the name of the image to set the image in the field. If your image has not been loaded, you may use the section titled "upload files" to locate and upload the image for your feature.

Screenshot demonstrating selecting images

After adding an image to the Image field, you should provide the image Title and Alternate Text.

When the fields are filled out, simply move on to the next field for the Content Element.

Using Rich Text Editor (RTE)

TYPO3 has a Rich Text Editor (RTE) field into which text can be entered. When copying the text into this RTE field, please pay attention to the formatting of the text. If the text is copied directly from a program such as MS Word into TYPO3, there are usually formatting issues to be resolved. The following two options provide guidance on how to remove formatting on copied text:

  1. Paste the copied text into MS Notepad, select the pasted text and then recopy the text and paste it into the RTE. Text must be copied from MS Notepad so that the formatting is not carried over into the RTE.
  2. Use the RTE built-in Remove Formatting functionality. Select the text which needs to have the formatting removed. Next click on the small hand broom in the RTE tool bar. When the Remove format popup comes up, select the Cleaning Area and Types(s) of Format to remove desired. Click on OK and the text should be cleaned. This option could take additional time depending on the configuration of the text.

When you want to insert a line break, simply hold the Shift key and press the Enter key. This works with paragraphs and Bulleted or Numbered Lists, and you simply want to put text on a second line. Example:

This is a paragraph.
Here is the line break.

  1. Here is my
    Numbered list. <second line is not numbered>

Embedding Youtube or Vimeo videos in Rich Text Editor (RTE)

To embed a YouTube or Vimeo video in the Rich Text Editor, follow these steps:

  1. Create a new paragraph in the RTE where you want to place the video.
  2. Switch to the HTML code by clicking on Toggle text mode button.
  3. Find the created empty paragraph (<p></p>).
  4. Copy the embed code from Youtube or Vimeo into the empty paragraph (<p></p>) you created.
    Example: <iframe width="640" height="360" src="//www.youtube.com/embed/mcw6j-QWGMo?rel=0" frameborder="0" allowfullscreen></iframe>
  5. Add https: to the iframe source if it is not present.
    Example: <iframe width="640" height="360" src="https://www.youtube.com/embed/mcw6j-QWGMo?rel=0" frameborder="0" allowfullscreen></iframe>

The resulting HTML code should look like this:

<p><iframe width="640" height="360" src="https://www.youtube.com/embed/mcw6j-QWGMo?rel=0" frameborder="0" allowfullscreen></iframe></p>

<p><iframe src="https://player.vimeo.com/video/98276732?title=0&amp;byline=0&amp;portrait=0&amp;color=0E70E3" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></p>