Add an Image Via Images Only

Learn how to add an image to your page - this How-To covers the basics

  1. To add an image using the Image Only content element, login to the TYPO3 Backend, click Page at the left, and in the page tree, click on the page title where you want to add an image.
  2. The template regions and any content elements for the page are shown at the right. Click on a document icon with the plus sign to add a new content element in the location of the icon.
  3. Note the long list of possible content element types. Find the Images Only content element and click on it to add it to the page.
  4. The Page Content form will display on the right. Enter an optional title for the image in the Header field. 
  5. Next. click on the Media tab.
  6. Under the Media Tab, you can add one or more images to be displayed. Click on the folder icon to browse for files stored in TYPO3. Select a graphics file. Note: you can also use the Browse button to upload a file from your hard drive, but this is not recommended because the file is stored internally in TYPO3 and will not be accessible except on this page.
  7. From the pop up file browser window, you will see the folder tree and the files listed at the right. Find the file you want to add to the page and click on the name of the file.
  8. The image is added to the list. 
  9. You can set the location of the image to left, center, or right. You can either use the dropdown menu to choose a position of the image, or you can click on one of the location icons.
  10. The reference to text in the position field is there because this content element shares this same field with the Text with Image content elements.
  11. You can ignore references to above and below text and just select any option based upon whether it is left, right, or center. Choose a position.
  12. The optional fields below allow you to modify the width and height of the image in pixels, make the image a link, and various image processing effects. Try these options to see the results. Typically most of these options will not be used because the internal default values are fine.
  13. If you would like for your image to be a link to another page or another website, you can add the link by clicking on the link icon (for more details on adding image links, see the "Use the RTE to Create Image Links" how to.
  14. The caption field will add text below the image. The align option will align the caption text. Enter a caption.
  15. The Alternative Text field is used to describe the image when the image cannot be seen such as when a visually impaired person is viewing your website with a special viewer. 
  16. The Title Text field displays when you mouse over the image. Both can be used by search engines. It is wise to fill in these optional fields. Fill in these fields.
  17. Scroll to the top of the page and click on the Access tab.
  18. Like with other content elements, you can hide it, set start and stop dates/times, and set which users can see it. 
  19. Click Save and view page to save the changes and to view the results in the Frontend.
  20. Your image has been added to the webpage. Note that the caption is below the image.