Img()

Renders images.

img()

Renders an image tag.

Configuration options in 'site/config/config.php':

'pgfactory.pagefactory.options' => [
    'imageAutoQuickview'  => true,  // turns quickview on by default
    'imageAutoSrcset'  => true,     // turns srcset on by default
],

Note: if an attribute file exists (i.e. image-filename + '.txt') that will be read to extract attributes.

Arguments

src

Image source file. (default: false)

alt

Alt-text for image, i.e. a short text that describes the image. (default: false)

id

Id that will be applied to the image. (default: false)

class

Class-name that will be applied to the image. (default: )

wrapperTag

If false, image is rendered without a wrapper. Otherwise, defines the tag of the wrapping element (default: false)

wrapperClass

Class to be applied to the wrapper tag. (default: )

caption

Optional caption. If set, Lizzy will wrap the image into a <figure> tag and wrap the ".

            "caption itself in &lt;figcaption> tag.

(default: false)

srcset

Let's you override the automatic srcset mechanism. (default: false)

attributes

Supplied string is put into the <img> tag as is. This way you can apply advanced attributes, such as 'sizes' or 'crossorigin', etc. (default: false)

imgTagAttributes

Supplied string is put into the <img> tag as is. This way you can apply advanced attributes, such as 'sizes' or 'crossorigin', etc. (default: false)

quickview

If true, activates the quickview mechanism (default: false). Quickview: click on the image to see in full size. (default: false)

link

Wraps a <a href='link-argument'> tag round the image.. (default: false)

linkClass

Class applied to <a> tag (default: false)

linkTitle

Title-attribute applied to <a> tag, e.g. linkTitle:'opens new window' (default: false)

linkTarget

Target-attribute applied to <a> tag, e.g. linkTarget:_blank (default: false)

linkAttributes

Attributes applied to the <a> tag, e.g. 'download'. (default: false)

Examples

{{ img(leafs.jpg) }}

Size Directive: Absolute

You can write a size directive like [200x100] into the filename.
This is interpreted as: max-width: 200px; and max-height:100px;.
One of these two values may be omitted.

{{ img(leafs[250x].jpg) }}

→ The image is displayed with a width of 250px.

Note:
This is an absolute size directive. Thus, the img() macro automatically generates and offers a set of image sizes to the browser, aka srcset. The browser then selects the best fitting file, depending on the display characteristics.

<img src='{path}/leafs-250x.jpg' class='pfy-img pfy-img-2'  id='pfy-img-2'
    srcset='
    {path}/leafs-250x.jpg 1x,
    {path}/leafs-500x.jpg 2x,
    {path}/leafs-750x.jpg 3x,
    {path}/leafs-1000x.jpg 4x'
    sizes='250px' />

Size Directive: Relative

{{ img(leafs[25vw].jpg) }}

Here the image is displayed with a width of 25vw, which means 25% of the window width. You can check by changing the size of your browser window.

Note:
This is an relative size directive. Thus, the img() macro automatically generates and offers a diverse set of image sizes to the browser, aka srcset. The browser then selects the smallest possible file, depending on the window size (respectively the size given by the browser window).

<img src='{path}/leafs-25x.jpg' class='pfy-img pfy-img-3'  id='pfy-img-3'
    srcset='
    {path}/leafs-250x.jpg 250w,
    {path}/leafs-500x.jpg 500w,
    {path}/leafs-750x.jpg 750w,
    {path}/leafs-1000x.jpg 1000w,
    {path}/leafs-1250x.jpg 1250w,
    {path}/leafs-1500x.jpg 1500w,
    {path}/leafs-1750x.jpg 1750w'
    sizes='(max-width: 480px) 100vw, 25vw' style='width: 25vw; height: auto;' />

Caption

{{ img(leafs[250px].jpg, caption: "My Caption") }}

Here, the <img> tag is wrapped into a <figure> tag.

<figure class="pfy-figure">
    <img src='{path}/leafs-250x.jpg' class='pfy-img pfy-img-1'  id='pfy-img-1' />
    <figcaption>My Caption</figcaption>
</figure>

Quickview

{{ img(leafs[250px].jpg, quickview: true) }}

→ When you click on the image it is shown in full size.

Note:
You can deactivate quickview by default in site/config/config.php:

'usility.pagefactory.options' => [
    'imageAutoQuickview' => false,
],