schnitzler / fluid-styled-responsive-images
Enables creation of responsive images for fluid styled content elements.
Installs: 9 601
Dependents: 3
Suggesters: 0
Security: 0
Stars: 27
Watchers: 9
Forks: 16
Open Issues: 8
Type:typo3-cms-extension
Requires
- php: ^7.4
- ext-filter: *
- typo3/cms-core: ^11.0.0
- typo3/cms-extbase: ^11.0.0
- typo3/cms-frontend: ^11.0.0
- typo3fluid/fluid: ^2.6.8
Requires (Dev)
- friendsofphp/php-cs-fixer: ^2.17
- friendsoftypo3/phpstan-typo3: ^0.6.0
- phpstan/phpstan: 0.12.64
- phpstan/phpstan-deprecation-rules: ^0.12.2
- phpstan/phpstan-phpunit: ^0.12.6
- phpstan/phpstan-strict-rules: ^0.12.6
- rector/rector: ^0.8
- roave/security-advisories: dev-master
- typo3/cms-workspaces: ^11.0.0
- typo3/testing-framework: ^6.6
Replaces
- typo3-ter/fluid-styled-responsive-images: 11.0.0
This package is auto-updated.
Last update: 2024-10-29 04:53:00 UTC
README
This project aims to provide an image-rendering process that will render responsive images with fluid, where the assumption is made, that TYPO3 CMS doesn't provide a mechanism out of the box for fluid templates while one is able to do it with TypoScript.
Installation
- Install via composer using the current stable release and track new stable releases:
composer require schnitzler/fluid-styled-responsive-images:"^10.2"
and enable the extension through the extension manager / your preferred mechanism - Use the current development version by running
composer require schnitzler/fluid-styled-responsive-images:"dev-master"
in yourcomposer.json
file, runcomposer update
- Clone the current development version to your
typo3conf/ext
directory (ex.cd typo3conf/ext && rm -Rf fluid_styled_responsive_images && git clone https://github.com/alexanderschnitzler/fluid-styled-responsive-images.git fluid_styled_responsive_images
)
Configuration
The extension is configured through TypoScript, like most parts of your site are. Include the static TypoScript of the extension and then begin with the Configuration through your own TypoScript setup.
The ImageRenderer currently supports the [srcset
](srcset specification) and
rendering as data
-attributes, which is to make custom rendering with javascript
easier.
Minimal, empty configuration:
tt_content.textmedia.settings.responsive_image_rendering {
layoutKey = srcset
sourceCollection {
# Please write your own sourceCollection configuration
}
}
Mode srcset
A sourceCollection
entry is a TypoScript hash. It can contain the following indices:
For more precise descriptions, please check out the html img
element specification
on srcset.
Configuration Example
tt_content.textmedia {
settings {
responsive_image_rendering {
layoutKey = srcset
sourceCollection {
10 {
dataKey = desktop
width = 1260m
srcset = 1260w
}
20 {
dataKey = table
width = 960m
srcset = 960w
}
30 {
dataKey = tablet-small
width = 720m
srcset = 720w
}
40 {
dataKey = medium
width = 640m
srcset = 640w
}
50 {
dataKey = medium-phone
width = 360m
srcset = 360w
}
60 {
dataKey = small
width = 320m
srcset = 320w
}
}
}
}
}
Usage
After installation and configuration, the output of the <f:media>
viewhelper
uses the logic this extension supplies for images and renders the image.
Inner workings
- a custom image renderer is registered
- when the
RendererRegistry
is asked for a renderer suitable for the current mimetype, the renderer proposes itself if one of the known image mimetypes is matched - the renderer reads the current TypoScript and merges it with global extension
configuration like the
enableSmallDefaultImage
setting - the renderer then calculates the needed sizes and returns a ready-made
img
-tag
Extending fluid_styled_responsive_images
Since fluid_styled_content is used, much of the output in TYPO3 CMS can be adjusted.
Example of registering custom templates and adjusting images in collaboration with
the GalleryProcessor
in fluid_styled_content to provide precise rendering with
Bootstrap 3 based templates: websightgmbh/ws-texmedia-bootstrap.
License
GPL-2.0+