iresults/responsive-images

Maintainers

Details

github.com/iresults/responsive-images

Source

Issues

Installs: 13

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 1

Forks: 0

Open Issues: 0

Type:typo3-cms-extension

0.1.0 2023-08-31 14:53 UTC

GPL-2.0 0ef44ccd432b64a53fb853d72b329478255cfa11

  • Daniel Corn <daniel.woop@iresults.li>

This package is auto-updated.

Last update: 2024-12-04 15:00:02 UTC

README

This extension provides a view helper for responsive images.

Installation

composer require iresults/responsive-images

Example usage

Input

<html
  xmlns:iresultsResponsiveImages="http://typo3.org/ns/Iresults/ResponsiveImages/ViewHelpers"
  data-namespace-typo3-fluid="true"
>
  <iresultsResponsiveImages:responsiveImage
    image="{project.imageFile}"
    widths="
             (max-width: 414px) 378px,
             (max-width: 575px) 540px,
             (max-width: 1399px) 546px,
             634px"
    pixelDensities="1,2"
  />
</html>

Output

<picture>
  <source
    srcset="image-path-378px.jpg, image-path-378px.jpg 2x"
    media="(max-width: 414px)"
  />
  <source
    srcset="image-path-540px.jpg, image-path-540px.jpg 2x"
    media="(max-width: 575px)"
  />
  <source
    srcset="image-path-546px.jpg, image-path-546px.jpg 2x"
    media="(max-width: 1399px)"
  />
  <source srcset="image-path-634px.jpg, image-path-634px.jpg 2x" media="" />
  <img src="image-path-634px.jpg" width="634" height="633" alt="" />
</picture>