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-03-29 03:52:28 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.

Argument Type Info
as string Name of variable to create. Defaults to imageData
alt string Specifies an alternate text for an image'
title string Tooltip text of element
src string a path to a file, a combined FAL identifier or an uid (int). If $treatIdAsReference is set, the integer is considered the uid of the sys_file_reference record. If you already got a FAL object, consider using the $image parameter instead
treatIdAsReference bool given src argument is a sys_file_reference record
image object a FAL object
crop string bool
cropVariant string select a cropping variant, in case multiple croppings have been specified or stored in FileReference
width string width of the image. This can be a numeric value representing the fixed width of the image in pixels. But you can also perform simple calculations by adding "m" or "c" to the value. See imgResource.width for possible options.
height string height of the image. This can be a numeric value representing the fixed height of the image in pixels. But you can also perform simple calculations by adding "m" or "c" to the value. See imgResource.width for possible options.
minWidth int minimum width of the image
minHeight int minimum width of the image
maxWidth int minimum width of the image
maxHeight int minimum width of the image
absolute bool Force absolute URL
value mixed Value to assign. If not in arguments then taken from tag content

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:

Key Info
width Width of the rendered image
height Height of the rendered image
uri URL of the image rendered
alt Alt tag for the image, taken from the sys_file_record, the sys_file_reference or from the "alt"-argument of the viewhelper
title Title tag for the image, taken from the sys_file_record, the sys_file_reference or from the "title"-argument of the viewhelper
ratio The ratio of the cropped/rendered image (width / height), meaning 1.77777 for an image with 16:9 ratio
heightRatio The ratio of height to width, for use in inline styles of containers for responsive images
link Value of the link field from sys_file_reference
processingInstructions Original processing instructions used for image rendering (including crop-values as array)
processedImage The processed file
originalImage The original file

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">