Breaking: Images render as a responsive picture
Description
The program list item and the program page template render their image
through the responsive image partial of EXT:,
Partials/, from 3.0 on. Every raster image is
therefore a
<picture>
with WebP sources and a fallback
<img>
with the class ace- of the partial, and an SVG file is rendered as one
<img>
of the original file without processing.
The list item asks for the preset card, the page template for detail.
The views register EXT::
the plugin view with the partial root path key -1, below the keys 0 and
1 it uses already, and the page object of the program page type with the
key -1758484802, below every theme and project path. The page object
registers it twice, because a
PAGEVIEW
page object reads no
partial: it derives those from paths by appending
Partials/, so paths carries
EXT: under the same key.
Impact
- CSS that selects the image as a direct child of the card, or as the direct
child of the detail container, no longer matches: it is wrapped in a
<picture>. - The fallback image is requested with
loading="lazy", which it was not before, and itswidthandheightare those of the preset rather than those of the original file. - A project that replaces the partial root paths of the plugin completely,
or a page object that renders
Program/or the page template in a view of its own, fails with an exception on the partialItem Academic/that the view cannot resolve.Image
Affected Installations
Every installation that renders a program list, or a page of the program page type with an image.
Migration
- Adjust CSS that addresses the program image.
-
A plugin view whose partial root paths were replaced needs the path of
EXT:below the others:academic_ base plugin.tx_academicprograms.view.partialRootPaths { -1 = EXT:academic_base/Resources/Private/Partials/ }Copied! -
If a page object of the project renders the page template or one of the item partials itself, list the path there with a key of your own - under
partialfor aRoot Paths FLUIDTEMPLATEpage object, underpathsfor aPAGEVIEWone:page.10 { partialRootPaths.-1700000001 = EXT:academic_base/Resources/Private/Partials/ paths.-1700000001 = EXT:academic_base/Resources/Private/ }Copied! - Flush the TYPO3 caches, so the Fluid template cache is rebuilt.