0

I'm trying to imply lazyload with a specific slider, it requests the src of the image to be entered twice, once as src and second as data-lazy like this:

<img src="domain.com/image.png" data-lazy="domain.com/image.png">

with <f:image /> I can use data="{lazy: 'domain.com/image.png'}" and should repeat the src of the image created with the viewhelper ... (typo3 documentation and the inline use of f:uri.image)

i have actually two questions:

  • how do I nest f:uri.image ? this gives an error <f:image src="{image.uid}" treatIdAsReference="1" data="{lazy: '{f:uri.image(src: {image.uid})}'}"/>
  • it should actually be the refference to the same image, if I nest f:uri.image would I create a second rendered image ? (especially because I also set width and height, but I wanted to keep the snippets simple)

the solution should work for TYPO3 v7 and v8

webman
  • 1,117
  • 15
  • 41

2 Answers2

3

Try this

<img src="{f:uri.image(src : image.uid)}" data-lazy="{f:uri.image(src : image.uid)}" />

You don't have to use the <f:image ..> tag for creating the <f:uri.image ..> returns the same processed resource.

Soren Malling
  • 522
  • 2
  • 10
  • spot-on, thank you, i did not expect the viewhelper to yield the same processed image twice !! – webman Nov 01 '17 at 08:16
  • Even though you "process" the same image twice, rest assured that it's gathering cached data, once it's processed the first time :-) – Soren Malling Nov 01 '17 at 08:38
0

In loop:

<f:for each="{MARKER}" as="file">
<img class="lazy" src=".../blank.gif" data-lazy="{f:uri.image(image: file, width:'XXXc', height:'XXXc', treatIdAsReference:1)}" alt="{file.alternative}" title="{file.title}">
</f:for>
Paweł Burzyński
  • 56
  • 4