brendt / responsive-images
Create responsive images with PHP, using the srcset and sizes spec.
Installs: 902
Dependents: 0
Suggesters: 0
Security: 0
Stars: 60
Watchers: 4
Forks: 15
Open Issues: 2
Requires
- php: >=7.0
- intervention/image: ^2.3
- ps/image-optimizer: ^1.0
- symfony/filesystem: ^3.1
- symfony/finder: ^3.1
Requires (Dev)
- larapack/dd: ^1.0
- phpunit/phpunit: ^5.0
README
Responsive Images
Automatically generate responsive images to work with the srcset
and sizes
spec. (http://responsiveimages.org/)
composer require brendt/responsive-images
Usage
use Brendt\Image\ResponsiveFactory; $factory = new ResponsiveFactory(); $image = $factory->create('img/image.jpeg');
<img src="<?= $image->src() ?>" srcset="<?= $image->srcset() ?>"/>
This sample would generate something like:
<img src="/image.jpeg"
srcset="/image-384.jpg 384w,
/image-768.jpg 768w,
/image-1152.jpg 1152w,
/image-1536.jpg 1536w,
/image.jpg 1920w" />
Configuration
The ResponsiveFactory
can take a ResponsiveFactoryConfigurator
object which will set the needed parameters.
A default configurator DefaultConfigurator
is provider out of the box, and uses the following parameters:
[ 'driver' => 'gd', 'includeSource' => true, 'publicPath' => './', 'sourcePath' => './', 'rebase' => false, 'enableCache' => false, 'optimize' => false, 'scaler' => 'filesize', 'stepModifier' => 0.5, 'minFileSize' => 5000, 'maxFileSize' => null, 'minWidth' => 300, 'maxWidth' => null, 'sizes' => [ 1920, 840, 300 ], 'optimizerOptions' => [], ]
You can override these parameters by providing and array to the DefaultConfigurator
,
or create a whole new configurator which implements ResponsiveFactoryConfigurator
.
$factory = new ResponsiveFactory(new DefaultConfigurator([ 'driver' => 'imagick', 'sourcePath' => './src', 'publicPath' => './public', 'enableCache' => true, ]));
All configuration options
driver
: the image driver to use. Defaults togd
. Possible options aregd
orimagick
.includeSource
: whether to include the source image in thesrcset
. Defaults totrue
.sourcePath
: the path to load image source files. Defaults to./
.publicPath
: the path to render image files. Defaults to./
.rebase
: ignore the path of the requested image when searching in the source directory. Defaults tofalse
.enableCache
: enable or disable image caching. Enabling the cache wont' override existing images. Defaults tofalse
.optimize
: enable or disable the use of different optimizers (if installed on the system). Defaults tofalse
.scaler
: which scaler algorithm to use. Defaults tofilesize
. Possible options arefilesize
,width
orsizes
.stepModifier
: a percentage (between 0 and 1) which is used to create different image sizes. The higher this modifier, the more image variations will be rendered. Defaults to0.5
.minFileSize
: the minimum image filesize in bytes. Defaults to5000
B (5KB).maxFileSize
: the maximum image filesize in bytes. Defaults tonull
.minWidth
: the minimum image size in pixels. No images with size smaller than this number will be rendered. Defaults to300
pixels.maxWidth
: the maximum image size in pixels. No images with size smaller than this number will be rendered. Defaults tonull
.sizes
: this parameter is used when thesizes
scaler is enabled. This scaler will generate a fixed set of sizes, based on this array. The expected values are the widths of the generated images. Defaults to[]
(empty array).optimizerOptions
: options to pass to the image optimizer library. See https://github.com/psliwa/image-optimizer for more information.
Paths
The sourcePath
parameter is used to define where image source files are located.
In case of the first example and above configuration, the image file should be saved in ./src/img/image.jpeg
.
The publicPath
parameter is used to save rendered images into. This path should be the public directory of your website.
The above example would render images into ./public/img/image.jpeg
.
Path rebasing
When the rebase
option is enabled, source file lookup will differ: only the filename is used to search the file in the
source directory. An example would be the following.
// Without rebase $options = [ 'sourcePath' => './src/images', 'publicPath' => './public', ]; $image = $factory->create('/img/responsive/image.jpeg'); // Source file is searched in './src/images/img/responsive/image.jpeg' // Public files are saved in './public/img/responsive/image-x.jpg'
// With rebase $options = [ 'sourcePath' => './src/images', 'publicPath' => './public', 'rebase' => true, ]; $image = $factory->create('/img/responsive/image.jpeg'); // Source file is searched in './src/images/image.jpeg' // Public files are saved in './public/img/responsive/image-x.jpg'