Skip to main content
TYPO3

Feature Highlight: Manage and Edit Images Like a Pro in TYPO3

Author
Published

Whether you want to resize an image or add more gifs to your blog posts, TYPO3 has powerful and easy-to-use tools for editors. 

When you’re working on a blog post or landing page, the last thing you want to do is juggle different apps and multiple tabs. With TYPO3 you don’t have to, because TYPO3 Core makes image tools available right out of the box (with some configuration), so you can:

  • Upload images
  • Edit, crop, and resize images
  • Share image files across pages
  • Improve SEO with image data

Here’s a quick rundown of the basics you need to know before working with images in TYPO3.

October 2024: TYPO3 v13 is out! See how image editing has received a major update, now allowing cropping of .svg images right out of the box.

Screenshot pointing out how to upload images from Filelist
To upload an image, right-click on a folder or click the upload button at the top of the Filelist page

Your images and videos live in one place: Filelist

Any asset you upload will be added to the Filelist automatically. In TYPO3, you can find all the images you’ve ever uploaded in the Filelist, accessed via the Filelist icon in the left-hand menu of your TYPO3 backend.

You can organize your assets by creating folders with descriptive titles within the Filelist. You can also easily move one or multiple images from one folder to another. For instance, you might put all variations of  your company logo in a folder called “Logos.” 

How it makes your life easier: This structure will allow you to re-use the same image (e.g. your logo) on multiple pages, rather than uploading a new image per page. This lets you reuse your image’s metadata too, though you can override it on a page-by-page basis. 

For in-depth information, see the File Module section of the Getting Started tutorial. 

Screenshot of image selection UI
You can add over fifteen different kinds of file extensions via TYPO3’s UI

TYPO3 allows many types of images and media

When you’re working on a page and need to add or upload an image, you have three options for doing so:

  • Add media file: Add an existing image from your Filelist.
  • Select & upload files: Upload a new file from your computer (you can use your desktop’s file manager or drag and drop the image in).
  • Add media by URL: If you’re using an image or video from the web, just insert the link.

All of the file extensions listed in green, are compatible with TYPO3.

Screenshot pointing out how to upload images from Filelist
To upload an image, right-click on a folder or click the upload button at the top of the Filelist page

Upload images ahead of time or as you build pages

Uploading an image (or multiple images at once) to Filelist is a good way to keep your assets organized, especially if you’ll be using a single image multiple times. Simply click on the upload button at the top of the Filelist page, or right-click on the folder where the image belongs.

If, on the other hand, you’re the kind of person who usually adds images or videos on the fly, you have two other options for uploading images.

Add images to a content element

A content element is a structured element that formats different building blocks—like headers, body text, and images. Adding images through a default content element, like “Text & Media” ensures that your images have consistent formatting across your website. 

Here’s an example of how you’d add an image via a “Text & Media” element for a blog post. 

Screenshot pointing out how to add a content element to a page

Step 1: Select the “Content” button to add a new content element to your page

Screenshot of the “Create new content element” pop-up, pointing to the “Text & Media” element

Step 2: Select a content element like “Text & Media” that allows you to add an image

Screenshot of the media tab in “Create new Page Content” page, pointing to the “Add media file” button

Step 3: Select the media tab, and upload an image by clicking “Add media file.” This will open a file selector popup

A quick tip: We recommend using the “Add media file” button, as opposed to the “Select & upload files” button because any media uploaded directly to the page will automatically be stored in a user_upload folder in the Filelist, separate from your existing file structure, and could make it hard to find files as your website grows.

Screenshot of “File selector” popup

Step 4: Choose the file folder from which you’d like to select your image on the left-hand side of the popup window. You can select an existing image by clicking on it. Upload a new image to that folder by selecting the “Choose files” button at the bottom of the popup and clicking “Upload files.”

Add images via a rich text editor

You can also add images via a rich text editor, which is the kind of interface you’re probably used to using in Word, Pages, or Google Docs. If your TYPO3 setup includes the CKEditor extension and is configured so you can add images, you can click the “photo” icon to add an image. The downside of this method is that it’s harder to maintain consistent formatting across your website—for this reason, we recommend using content elements!

Screenshot of Image Metadata
Fill in metadata to make your images searchable

Set image metadata to improve SEO

TYPO3 allows you to set metadata for your images. Metadata like alternative text helps more of your content show up in search results because web crawlers can read the text.

The metadata includes:

  • Title: The title of the image will show up as tooltip text when a user’s mouse hovers over the image.
  • Description (caption): The text that goes under your image as a caption.
  • Alternative Text: This accessibility feature describes the asset itself; if your image fails to load or if a user is visually-impaired, the Alt-Text describes the image.
Screenshot of Image Metadata, pointing to image editor editor
Click on the “Open Editor” button to edit the image

Edit and resize images

Let’s say you’ve added an image but need to cut out a rough edge or only show part of it. If you open the image editor, you can crop the file to the size you want. 

Screenshot of Image Editor
You can crop and resize images according to your desired aspect ratio

Whatever size you want for the cropped area there are shortcuts to adjust the aspect ratio, so that you’re sure your images are fitted to any screen size. The aspect ratios available are:

  • 16:9
  • 4:3
  • 3:2
  • 1:1
  • Free
Screenshot of different aspect ratios set for device sizes
You can set aspect ratios for all kinds of device sizes

Set image sizes for different device sizes and breakpoints

To make images responsive, TYPO3 allows you to configure breakpoints and aspect ratios for every device size, from desktop to mobile.

Screenshot of Appearance tab in Content Element editing UI
Edit alignment, effects, and layout in the appearance tab

Edit the appearance of images

When you click on the “Appearance” tab of a content element, you can edit that image’s appearance by adding borders, color effects, and margins.

Get started with image editing in TYPO3

Now that you’ve seen the basics, we hope you have a sense of how powerful the TYPO3 CMS is when it comes to uploading and editing images. If you’re looking for more information on editing images in TYPO3, we have some other helpful tutorials. To exchange knowledge, ideas, and advice, join a vibrant community of TYPO3 users by registering for My TYPO3 today.