b13/vh_imagedata

Viewhelper for accessing data of a (processed) image for further use (like <img>-tag w/ lazy loading etc.)

Maintainers

Details

github.com/b13/vh_imagedata

Source

Issues

Installs: 3

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 9

Forks: 0

Open Issues: 0

Type:typo3-cms-extension

v1.1.1 2021-02-03 11:37 UTC

GPL-2.0-or-later 473b196a937a20598a9198b551fe4f16e88b21cd

TYPO3 CMSB13base

This package is auto-updated.

Last update: 2024-08-29 04:49:13 UTC

README

Viewhelper to build custom <img>-Tag

This viewhelper calculates an image based on <f:image> without rendering an image tag, making the data available in the content of the viewhelper for manual use or rendering custom image tags. The rendering takes all crop settings into account.

Basic useage example

<html xmlns:id="http://typo3.org/ns/B13/VhImagedata/ViewHelpers" data-namespace-typo3-fluid="true">

<id:imagedata src="{file.uid}" treatIdAsReference="1" width="300" as="imageData">
    <div class="b_lazyloading__background" style="padding-bottom: {1 / imageData.ratio}%;">
        <img src="transparent.gif" data-imageurl="{imageData.uri}" width="{imageData.width}" height="{imageData.height}" 
            class="b_lazyloading__image bJS_lazyloading" 
            alt="{imageData.alt}" title="{imageData.title}" />
    </div>
</id:imagedata>

</html>

Allowed attributes

The following attributes can be passed to the ViewHelper. All attributes normally allowed for f:image can be passed but not all make sense.

Returned data

The ViewHelper returns an array with all the image data as {imageData} or the variable name you set in argument as. The array contains these values:

Installing

Use Composer to add to your project:

composer require b13/vh_imagedata

Set the namespace the ViewHelper in your Fluid template where needed:

<html xmlns:id="http://typo3.org/ns/B13/VhImagedata/ViewHelpers" data-namespace-typo3-fluid="true">