Responsive images for TYPO3 CMS¶
This extension adds responsive images support for fluid_styled_content rendering using the media ViewHelper.
Information¶
This extension is based on the fact, that the frontend rendering used some kind of CSS grid system (may be provided by CSS frameworks like bootstrap or foundation). The columns of this has to specify the width of an image. The image should run over 100% of the column width.
To render the image inside columns, there are some extensions that can be used like gridelements, fluidcontent or multicolumns.
This extension checks, what column width is used in the frontend to render to image. Then it generates a picture tag width some versions of that image based on the column width.
See part usage to know, how this works.
Usage¶
There are some predefined configs: - default (for images over full content width) - half (for images over half content width) - third (for images over third content width) - quarter (for images over quarter content width) - two-thirds (for images over 2/3 content width) - three-quarter (for images over 3/4 content width)
Before an image is rendered via MediaViewHelper, a registry variable width the key IMAGE_VARIANT_KEY must be set. The value should be one of the config keys. This can be done with the this ViewHelper
\Codemonkey1988\ResponsiveImages\ViewHelpers\LoadRegisterViewHelper
The MediaViewHelper should be placed inside this viewhelper.
Example:
<r:loadRegister key="IMAGE_VARIANT_KEY" value="default">
<f:media file="{file}" />
</r:loadRegister>
Adding new configs¶
There are two ways of adding responsive image configuration to TYPO3.
TypoScript¶
New image variant configs can be added via TypoScript
Example:
plugin.tx_responsiveimages.settings.configuration {
default {
defaultWidth = 1920
defaultHeight =
sources {
smartphone {
media = (max-width: 40em)
croppingVariantKey = default
sizes {
1x {
width = 320
height =
quality = 65
}
2x {
width = 640
height =
quality = 40
}
}
}
desktop {
media = (min-width: 64.0625em)
croppingVariantKey = default
sizes {
1x {
width = 1920
height =
quality = 80
}
}
}
tablet {
media = (min-width: 40.0625em)
croppingVariantKey = default
sizes {
1x {
width = 1024
height =
quality = 80
}
2x {
width = 2048
height =
quality = 40
}
}
}
}
}
}
PHP¶
You can add image configuration for your ext_localconf.php
Example:
/** @var \Codemonkey1988\ResponsiveImages\Resource\Rendering\PictureImageVariant $half */
$half = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\Codemonkey1988\ResponsiveImages\Resource\Service\PictureImageVariant::class, 'half');
$half->setDefaultWidth($desktopWidth / 2)
->addSourceConfig('(max-width: 40em)',
[
'1x' => array('width' => $smartphoneWidth, 'quality' => 65),
'2x' => array('width' => $smartphoneWidth * 2, 'quality' => 40)
],
'[optional cropping variant key for TYPO3 v8]'
)
->addSourceConfig('(min-width: 64.0625em)',
[
'1x' => array('width' => $desktopWidth / 2),
'2x' => array('width' => $desktopWidth * 2 / 2, 'quality' => 80)
],
'[optional cropping variant key for TYPO3 v8]'
)
->addSourceConfig('(min-width: 40.0625em)',
[
'1x' => array('width' => $tabletWidth / 2, 'quality' => 80),
'2x' => array('width' => $tabletWidth * 2 / 2, 'quality' => 60)
],
'[optional cropping variant key for TYPO3 v8]'
);
// Add variant to registry.
$registry = PictureVariantsRegistry::getInstance();
$registry->registerImageVariant($half);