Breaking: Images render as a responsive picture
Description
The project list item and the project 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 key 0 it uses
already, and the page object of the project page type with the key
-1758484803, 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 empties the partial root paths of the plugin, or a page
object of a project that renders
Project/or the page template in a view of its own, fails with an exception on the partialItem Academic/that the view cannot resolve.Image
Setting the constant plugin., which
is the only partial root path this plugin configures, is not affected:
Extbase prepends the partial directory of the extension when the configured
paths do not list it, at the lowest precedence, so Project/ and
Academic/ both stay resolvable and a project override still wins.
Affected Installations
Every installation that renders a project list, or a page of the project page type with an image.
Migration
- Adjust CSS that addresses the project image.
-
A plugin view whose partial root paths were replaced needs the path of
EXT:below the others:academic_ base plugin.tx_academicprojects.view.partialRootPaths { -1 = EXT:academic_base/Resources/Private/Partials/ }Copied! -
If a page object of the project renders the page template or
Project/itself, list the path there with a key of your own - underItem 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.