DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Usage in Fluid

Viewhelpers

LazyFxx is used inside the fluid templates. We hve provides three viewhelpers for this:

  • Image viewhelper
  • Media viewhelper
  • Uri viewhelper

Those are essential the same as their original core counterparts.

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:lfxx="http://typo3.org/ns/Brainworxx/Lazyfxx/ViewHelpers"
      data-namespace-typo3-fluid="true">

<!--
    Render the ready-to-use lazy images for our js library.
    You need to provide the processing class, either by usinf the
    option 'Use default processor' in the extension configuration,
    or by using the overwriteProcessor argument.

    If you are using the overwriteProcessor argument, please provide
    a fully qualified class name.
 -->
<lfxx:image src="path/to/my/image.png" alt="some description" />
<lfxx:media file="{fileobject}" width="400" height="375" overwriteProcessor="Brainworxx\Lazyfxx\Processors\BlurProcessor"/>

<!--
    Get the uri of the lazy image
-->
<lfxx:uri.image image="{imageReference}" overwriteProcessor="Brainworxx\Lazyfxx\Processors\BlurProcessor" />

</html>

There is however an additional argument: overwriteProcessor. Here you can overwrite the configured processor class.

Use only the processor, and not the JavaScript

There are a lot of awesome lazyloading js libs out there. You do not have to use the provided library. Simply do the following:

  • Use the uri viewhelper to get the uri of the lazy image
  • Remove the js and css from the typoscript
page.includeJSFooterlibs.lazyfxx >
page.includeCSS.lazyfxx >

Use only the JavaScript and not the processor

If you do not want to use the image processing of TYPO3 and only want to use the java script part, you only need to do the following:

  • The src needs to point to the placeholder image.
  • Add the class lazyload-placeholder to your image.
  • Add the attribute data-src with the path to the image you want to load.
  • Make sure that the files lazyfxx.js and styles.css are included on the frontend.
<!-- example -->
<f:image image="{imagePlaceholderObject}"
         class="lazyload-placeholder"
         data="{src: pathToOriginal}" />