Description

A simple PHP class to generate the HTML *picture* element with different source types supported. It could be used for optimization of image rendering depending on the browser supporting one or another image format., _(*1)

Installation

The preferred way to install this extension is through composer., _(*2)

Place composer.phar file in the same directory with composer.json file and run, _(*3)

$ php composer.phar require almeyda/html-picture-element "*"

or add, _(*4)

{
    ...
    "require": {
        ...
        "almeyda/html-picture-element": "dev-master"
        ...
    }
    ...
}

to the "require" section of your composer.json file and run, _(*5)

$ php composer.phar update

Usage

\almeyda\htmlpicture\src\HtmlPicture::get($src, $attributes, $sourceTypes);

Where: - src - path to main image - attributes - "<image"> tag attributes - sourceTypes - array of the image types to be collected into picture sources, _(*6)

Example of usage:

\almeyda\htmlpicture\src\HtmlPicture::get('path/to/image.png', ['alt' => 'Image alt'], ['webp', 'jp2', 'jpx']),

This produces an output like, _(*7)

<picture>
    <source srcset="path/to/image.webp?v=1527278990" type="image/webp">
    <source srcset="path/to/image.jp2?v=1527278990" type="image/jp2">
    <source srcset="path/to/image.jpx?v=1527278990" type="image/jpx">
    <img src="path/to/image.png?v=1527278990" alt="Image alt">
</picture>

You can define image types to be collected and rendered into picture tag once using a method setSouceTypes, _(*8)

\almeyda\htmlpicture\src\HtmlPicture::setSouceTypes(['webp', 'jp2', 'jpx']);

...

\almeyda\htmlpicture\src\HtmlPicture::get('path/to/image1.png'),

\almeyda\htmlpicture\src\HtmlPicture::get('path/to/image2.png'),