Download the PHP package madj2k/t3-media-utils without Composer

media_utils

This extension provides

• fully configurable responsive images for TYPO3
• some helpful ViewHelpers and includable partials for the usage with media-files.

Features

• Supports <picture>, srcset, and sizes
• Configurable breakpoints
• Native and JavaScript lazy loading
• Backend configuration via settings.definitions.yaml
• Usage of processingInstructionsBatch in TYPO3 v14 (thanks to Ayke Halder for the improvement hint)
• Includes a media-partial for usage in own extensions
• Includes a configuration for responsive images with Bootstrap (picture-tag only)
• Some helpful ViewHelpers for usage with media-files
• Configuration is backwards-compatible with EXT:sms_responsive_images
• Fixes performance issue with upsizing of images of EXT:sms_responsive_images

Installation

Just install the extension and include the desired configuration (e.g. with or without Bootstrap) set to your site-config.

Ensure that you add "webp" as allowed image extension in your settings.php

How to use

Usage with EXT:content-blocks (friendsoftypo3/content-blocks)

The extension automatically includes the configuration for responsive images to EXT:content-blocks. This way all your custom content elements have the according settings automaticllay available.

If you configure default-settings for your custom content elements, you can also include default-settings for your media files. Just follow this structure for your TypoScript-configuration:

Here you also have the ability to override the default settings, e.g. if you want to use different cropVariants for each breakpoint or no native lazy-loading:

Then call the media-partial in your content-element like this:

If you e.g. set a explicit maxWidth this value will be used, otherwise the default value from your TypoScript-configuration will be used. The defined configuration for responsive images is applied automatically.

There may be the case that you have multiple styles of one custom content element which require different default-settings for your media. This can be handeled by extending your TypoScript-configuration by an additional sub-key to switch between the settings. Example:

Now you can call the media-partial in your content-element with the according key for the desired setting. The following call would load the default-settings for the sub-key "small":

Usage with EXT:mask (deprecated)

The extension automatically includes the configuration for responsive images to EXT:mask. This way all your custom content elements have the according settings automaticllay available.

This actually works exactly as described above for EXT:content-blocks (friendsoftypo3/content-blocks).

Usage in TypoScript-based FluidTemplates

The usage does not differ much from the usage with EXT:content-blocks (friendsoftypo3/content-blocks). You simply have to include the corresponding settings and the partial-path into your TypoScript. Here you also have the ability to override the default settings, e.g. if you want to use different cropVariants for each breakpoint.

Usage for images in your own extension

There are basically two ways:

Use the partial of this extension and override only the values you need to override (recommended)

1) Extend the partialPaths accordingly:

2) Merge the global settings into your extension settings:

3) Use the partial accordingly and add additional settings if you want (see above)

Use the normal ViewHelper and insert the values of the TypoScript-lib into each parameters (not really convenient - but works)

Testing

• Single Method

• Single File

• All files