[TYPO3-mvc] Render responsive images like TS sourceCollection?

[Marcelo Vetter]

I have a similar question:

I'm trying to render a image with Fluid where the HTML tag output should be this:

<figure class="image">
    <img src="fileadmin/user_upload/myimage.jpg" data-src="fileadmin/user_upload/myimage.jpg" data-bigger="fileadmin/user_upload/myimage.jpg" data-large="fileadmin/_processed_/myimage_cfee32ad17.jpg" data-medium="fileadmin/_processed_/myimage_ca6ffdf948.jpg" data-small="fileadmin/_processed_/myimage_4cff8fafd5.jpg" alt="Alternative Text" class="lazyload" />
    <noscript> <img src="fileadmin/user_upload/myimage.jpg" alt="Alternative Text" /> </noscript>
    <figcaption class="caption">My Caption Here</figcaption>
</figure>

I have this Fluid Code:

{namespace bp = BK2K\BootstrapPackage\ViewHelpers}
<f:for each="{items}" as="item" iteration="iteration">
    <div class="tab-item {f:if(condition: iteration.isFirst,then:'active in')} tab-{iteration.index}" data-itemno="{iteration.index}" id="tab-{data.uid}-{iteration.index}">
        <f:switch expression="{item.item_type}">
            <f:case value="text">{item.bodytext->f:format.raw()}</f:case>
            <f:case value="textandimage">
                   <bp:fal data="{item}" as="image" field="image" table="tx_bootstrappackage_tabs_item">
                        <f:if condition="{image}">
                            <f:for each="{image}" as="images">
                                <figure class="image">
                                    <f:link.page pageUid="{images.link}" title="{images.title}" target="{images.link}">
                                        <f:image src="{images.uid}" additionalAttributes="{data-src:'{images.uid}', data-bigger: '{images.uid}', data-large: '{images.uid}', data-medium: '{images.uid}', data-small: '{images.uid}'}" class="lazyload" alt="{images.alternative}" treatIdAsReference="1" />
                                        <noscript><f:image src="{images.uid}" alt="{images.alternative}" treatIdAsReference="1" /></noscript>
                                        <figcaption class="caption">{images.description->f:format.raw()}</figcaption>
                                    </f:link.page>
                                </figure>
                            </f:for>
                        </f:if>
                    </bp:fal>
                <f:format.html>{item.bodytext->f:format.raw()}</f:format.html>
            </f:case>
        </f:switch>
    </div>
</f:for>

The above code generates the following (all data-* have the image id in it because of {images.id}):

<figure class="image">
    <img src="fileadmin/user_upload/myimage.jpg" data-src="130" data-bigger="130" data-large="130" data-medium="130" data-small="130" alt="Alternative Text" class="lazyload" />
    <noscript><img src="fileadmin/user_upload/myimage.jpg" alt="Alternative Text" /></noscript>
    <figcaption class="caption">My Camption Here</figcaption>
</figure>

How can I get the image versions/sizes printed on each "data-*" attribute?

I know typoscript on Typo3 6.2 is processing the images in that format already, but I can't find how to make the same format on Fluid. That Fluid code is a changed version of the Bootstrap Package to allow textpic (Text and Images) on a accordion/tabs elements. I couldn't find anywhere on the documentation something like that. Thanks for your help!