chameleon-system/responsive-images-bundle

This package is abandoned and no longer maintained. The author suggests using the chameleon-system-private/responsive-images-bundle package instead.

Adds supports for responsive images

6.1.1 2016-06-08 13:01 UTC

README

As of version 5.1.x the image rendering uses twig templates and has the option to render responsive image tags. To achieve this we use rwd.images.js.

If you don`t use the standard chameleon theme you will have to add this javascript manually to your template. You also need to copy 2 twig templates from the standard theme. themeShopStandard

  • snippets/common/media/pkgCmsTextFieldImage.html.twig
  • snippets/common/media/pkgCmsTextFieldImageResponsive.html.twig

To enable responsive images you have to extend TCMSTextFieldEndPoint and overwrite the method 'isResponsiveImagesEnabled' or enable it globally by setting the constant: IMAGE_RENDERING_RESPONSIVE to true. You should add this to your HTML master page template header or in your projects config file.

Beware! Enabling responsive images will lead to ~2 times more images, because for every image there will be smaller thumbnails generated for mobile devices and tablets.

You can configure the grid sizes with 2 constants:

  • IMAGE_RENDERING_RESPONSIVE_TABLET_SCREEN_SIZE (default 800px)
  • IMAGE_RENDERING_RESPONSIVE_MOBILE_SCREEN_SIZE (default 500px)