Breaking: Profile images render as a responsive picture 

Description 

The profile card - Partials/Profile/Item.html, rendered by the list, card, selected profiles and selected contracts content elements and by EXT:academic_contacts4pages - and the public profile detail - Partials/Profile/PublicProfile/ProfileImage.html - render the profile image through the responsive image partial of EXT:academic_base, Academic/Image.html.

The image is no longer a single <img> . It is a <picture> with WebP sources per breakpoint and a lazily loading fallback <img> . The image carries ace-image, the <picture> ace-picture, in the card and in the detail, where the image sits in an ace-profile-image and the alternative text stays the title and the names of the profile.

A card of a profile without an image shows a neutral placeholder, EXT:academic_persons/Resources/Public/Images/ProfilePlaceholder.svg, taken from the new setting plugin.tx_academicpersons.image.placeholder.default (a TypoScript constant and a site setting of the set fgtclb/academic-persons). The detail view shows no image for such a profile, as before. When the content element limits the shown fields and leaves the image out, the card shows neither the image nor the placeholder, as before.

The plugin view registers the partials of EXT:academic_base with the partial root path key -1, below the keys 0 and 1 of this extension and of the project.

Impact 

  • CSS that selects the image as a direct child of the card, for example .ace-item > img , does not match: the image is a child of the <picture> .
  • Cards of profiles without an image show the placeholder where they showed nothing.
  • A project that replaces the partial root paths of the plugin completely, and a project page object that renders Profile/Item through a view of its own, fail with an exception on the partial Academic/Image that the view cannot resolve.
  • An installation that removed webp from $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'] fails with the exception 1618992262 of the core image view helpers on every profile with an image.

A project override of Partials/Profile/Item.html or of Partials/Profile/PublicProfile/ProfileImage.html keeps rendering its own markup and is not affected.

Affected Installations 

Every installation that renders profile cards or the public profile detail of this extension or of EXT:academic_contacts4pages.

Migration 

  1. Adjust CSS that addresses the card or detail image: select the <img> by its class, or through the <picture> element.
  2. To keep cards of profiles without an image empty, set plugin.tx_academicpersons.image.placeholder.default to an empty value; to show a placeholder of the project, set it to an EXT: path of a public file of the site package.

  3. A view whose partial root paths are replaced completely adds the path of EXT:academic_base:

    plugin.tx_academicpersons.view.partialRootPaths {
    -1 = EXT:academic_base/Resources/Private/Partials/
}
    Copied!
  4. An override of Profile/Item.html or Profile/PublicProfile/ProfileImage.html that exists only to render a <picture> , a crop variant or a placeholder can be removed. Breakpoints and widths are changed in an override of Academic/Image.html instead, see Profile image.
  5. Flush the TYPO3 caches, so the Fluid template cache is rebuilt.