b13 / vh_imagedata
Viewhelper for accessing data of a (processed) image for further use (like <img>-tag w/ lazy loading etc.)
Installs: 3
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 9
Forks: 0
Open Issues: 0
Type:typo3-cms-extension
This package is auto-updated.
Last update: 2024-10-29 05:28:47 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">