Learn about the top 2016 CMS trends. Read on.


Originally written by Marlies Cohen for Cannonbose, now legacy to Axelerant.

Content element text with media - image dimensionsPhotos that come straight off a digital camera are way too big for the Internet in terms of actual dimensions and file size and therefore have to be resampled. For example, a 1MB image can be reduced to 50K, which will load much faster, especially for people with dial up service and it will take up less room on their computer’s hard drive.

  • Photos generally should be saved in JPG format
  • Icons and graphics are usually should be saved in GIF or PNG format

Content element text with media - alternate text Unless you really need high resolution images, try to keep your photos no bigger than 1024×1024 when uploading into TYPO3. However, you may ignore this size limitation as TYPO3 will resize the images automatically as needed.

When creating new content elements, selecting the Text w/image, Text w/media files, or Image types will automatically enable resizing of related images. By default, the image is automatically resized to 600 pixels wide. If this image size needs to be changed, just write a new size in the width or height box.

  • The 600 width is set via TypoScript Constants
    styles.content.imgtext.maxW = 600 

For SEO purposes, be sure to fill in the Alternative and Title Text fields with reasonable image descriptions.

Content element text with media - image optionsAim alternative text tags towards search engines and title text tags to your readers.

As a bonus in image management, you can change the Image quality and apply Effects like rotating, grayscale and contrast.

RTE Insert or modify image selectorWhen adding a picture inside the RTE (Rich Text Editor) via the Insert/modify image icon it is important to choose ‘New Magic Image’ rather than ‘New Plain Image’ at the top of the popup window and then select the image. This way the image will automatically be reduced.

The “Magic Image” automatic target resize can be altered with the following TSConfig code.

RTE.default.buttons.image.options {
    # realistic magic insert sizes
    magic.maxWidth = 480
    magic.maxHeight = 640
}

RTE Insert or modify image propertiesLike above for SEO, once you’ve inserted the image, be sure to click on it in the RTE and click the Insert/modify image icon again to set the Alternate and Title text tags.

Revised by Michael Cannon.

Still stuck? Write us.

  • Atul

    Hi Michael,

    I am trying to achieve something about images. I am using an custom extension which creates some backend records. The record has a field for image and I want that max size for image upload must be 1MB. I tried making changes in ext_tables.php but no luck.

    I hope you can help in this as well.

    Regards
    Atul