Add data-src tag for image insertion

0
votes

I'm configuring a LazyLoad JS on a Typo3 website and i want to add the data-src tag to insert image. Currently I use only src :

<f:if condition="{mediaElement.type} == 0">
    <f:media file="{mediaElement}" class="img-responsive lazy-image" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" data="{src: '{mediaElement}'}"  width="{f:if(condition: settings.list.media.image.width, then: settings.list.media.image.width, else: settings.media.width)}" height="{f:if(condition: settings.list.media.image.height, then: settings.list.media.image.height, else: settings.media.height)}"/>
</f:if>

I tried to add this code for the code above :

 data="{src: '{f:media file="{mediaElement}'}"

but it did not work.

1
typo3typoscriptsrcfluid

1 Answers

0
votes

The f:media viewhelper returns a full image (or video) tag.

what you need is only the URL. so you might use an uri.* viewhelper.
If you use more than images it could get complicated as there is no pendant to media