Img()

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: )
width: Define width of the image to be shown. (default: )
height: Define height of the image to be shown. (default: )
wrapperTag: Defines the tag of the element wrapped around the img. Set to false to omit wrapper. (default: div)
wrapperClass: Class to be applied to the wrapper tag. (default: )
caption: Optional caption. If set, PageFactory will wrap the image into a <figure> tag and wrap the caption itself in a <figcaption> tag. (default: false)
srcset: Let's you override the automatic srcset mechanism.
relativeWidth: [%] Use this option if you want to set the image width relative to the viewport width. For instance, if the image should cover no more than 30% of window width, use argument "relativeWidth:30%".
Based on this value, the browser will select the smallest possible source available (according to the automatically generated srcset attribute). (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.
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)
ignoreMissing: If true, an empty string is rendered in case the image file is missing. (default: false)

Pre-Sized Image

Here the image file pic.jpg contains an image of size 400 x 267. So, it's rendered as is.

{{ img(pic.jpg, caption: 'Small image displayed in its inherent size 400 x 267') }}

Small image displayed in its inherent size 400 x 267

Large Image Source

More convenient is to provide an image in its original size without modifications. Here, PageFactory automatically reformats the image as required.

{{ img(pic0.jpg, caption: Large image fills available space) }}

Note that the above image is automatically shrunk to PageFactory's maxWidth and maxHeight (=1920 x 1440), even if the original image was larger than that.

Relative Sizes

`vm` Relative to Viewport

{!!{ img(pic0.jpg, width:20vw, caption: Size relative to viewport) }}

vw (viewport width) is a unit relative to the window width.

Other related units are vh, vmin and vmax, etc.

`%` Relative to Container

{{ img(pic0.jpg, width:50%, caption: Size relative to container) }}

The unit % corresponds to the width resp. height of the surrounding container, symbolized by the blue box.

`em` Relative to Font-Size

{{ img(pic0.jpg, width:10em, caption: Size relative to font-size) }}

Other font-size related units are rem, ex and ch.

Absolute Sizes

{{ img(pic0.jpg, width:200px) }}

Other absolute units are cm, mm, in, pt and pc.

Note:
All above variants also work for height, e.g.

{{ img(pic0.jpg, height:133px, caption: Height specified) }}

Alternative Syntax

{{ img(pic0[200x100].jpg, caption: Sizes embedded in filename) }}

{{ img(pic0[20vw].jpg, caption: Relative width embedded in filename) }}