Make an Image into a Link

  1. To create a clickable image, open the Page Module and navigate to the page where you want to import a picture or where one already exists.
  2. Open the Content Element (or create a new one) where you want to import or modify the existing image.
  3. If the Content Element is a Text w/Image Type, then scroll down to the Image section. (If not, change the page Type to Text w/Image.)
  4. If you need to import an image, you can do so from the Images field. You can click on the Browse button and select an image from your local computer, or else you can select one from the Filelist.
  5. For this example, we will use the Filelist to both upload and select an image.
    If you will be using an image on multiple pages, we recommend uploading the file into the Filelist so that you have easy access to it in the future.
  6. To upload an image, scroll down the form and click on the Browse button, find the image you want to use on your local computer, and click the Upload Files button.
  7. Find your file in the list and click on it to import it into the page you're working on.
  8. Next, decide where you want the picture to appear in relation to the text by either using the Position: drop-down menu or clicking on the corresponding icon.
  9. Scroll down the page to the Width (pixels) field in order to set the image's advanced features, including setting a link.
  10. If you have not sized your image before you uploaded it, you have the option to set the width or height properties here. TYPO3 will maintain the proportions of the image for either choice you make (if you enter values in both Width and Height, the Width property will be the default value used).
  11. If you want to allow your website users to see the image full-size, you can enable the Click-enlarge feature.

    NOTE: If you will be making your image into a clickable link, the Click-enlarge will be ignored.
  12. To make your image a link, clicking on the Link icon will open the RTE Link window.
  13. Notice that there are four tabs that allow different choices for your link's destination. For our example, we will set the link for an existing page...the Camp PIctures page.
  14. To activate the image's link, click on the link's destination page.
  15. If you are working with an image that has previously existed on your page, you can save and close your work now. However, if you have added a new clickable image to the webpage, there are a couple more fields we recommend you fill in (though they are optional fields).
  16. First, you can add a caption to your image.

    (If you have uploaded multiple images, place multiple captions on separate lines.)
  17. It is also helpful to include an Alt description to the picture for those browsers that do not display images.
  18. In addition, some browsers need a Title Text completed in order to display tool tips.
  19. Save your work and view the page to ensure it displays correctly and links to your selected page.

Tutorial

Movie Tutorial Click to see tutorial for: Make an Image into a Link