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.
Picture and source tags¶
This one is a little bit tricky, because we do not provide a ViewHelper for it. The reason for this is simple: There are so many ways to optimize it, that a ViewHelper would only make things more complicated. | You need to do three things here:
- Add the class
lazyload-placeholder
to all source tags. - Add the placeholder images to the
srcset
attribute to all source tags. - Add the original images to the
data-src
attribute to all source tags. - Add another placeholder to the
img
tag inside thepicture
tag
Simple example with some hardcoded values.
<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">
<picture>
<source class="lazyload-placeholder"
srcset="{lfxx:uri.image(image: file, maxWidth: 780)}"
data-src="{f:uri.image(image: file, maxWidth: 780)}"
media="(min-width:1280px), (min-resolution: 136dpi) and (min-width:780px)">
<source class="lazyload-placeholder"
srcset="{lfxx:uri.image(image: file, maxWidth: 400)}"
data-src="{f:uri.image(image: file, maxWidth: 400)}"
media="(min-width:640px), (min-resolution: 136dpi) and (min-width:400px)">
<source class="lazyload-placeholder"
srcset="{lfxx:uri.image(image: file, maxWidth: 1024)}"
data-src="{f:uri.image(image: file, maxWidth: 1024)}">
<f:image image="{file}"
title="{file.properties.title}"
alt="{file.properties.alternative}"
maxWidth="400" />
</picture>
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
andstyles.css
are included on the frontend.
<!-- example -->
<f:image image="{imagePlaceholderObject}"
class="lazyload-placeholder"
data="{src: pathToOriginal}" />