Download the PHP package board3r/laravel-responsive-image without Composer

Laravel Responsive Image

Blade component and url routing to generate responsive images and thumbnails.

Be lazy, just use an image and the package will be responsive alone.

Boost the PageSpeed.

Requirements

• PHP >= 8.2
• Laravel 11+

Image processing

This package use by default intervention/image, needed to have at least one image processing extension installed.

Image optimizer

This package use by default spatie/image-optimizer, see optimization tools section

Install

Basic usage

Store the images in the laravel local disk in the directory /storage/app/private/responsive-image (default settings)

Html render :

All thumbnails are ready using the package routes.

Documentation

Configuration

The configuration will be published automatically under the folder /config/responsive-image.php during the installation.

In the documentation the tag @conf make a reference of the config file of this package.

All the example are illustrated with default Laravel And Laravel Responsive Image configuration and environnement.

Component parameters

image (required)

Set the src attribute image of img html tag.

@conf

• storage.origin : The original image storage (default: 'local')
• _imgpath : The directory in the storage disk (default: '/responsive-image')
• _allowedextension : Allowed extension of original image (default:['webp', 'jpg', 'jpeg', 'png', 'gif'] )

:thumbs (optional)

List the thumbnails needed for good responsive performance. Pass an array for each thumb with one or more following query parameters

• w : An integer to define the width
• h : An integer to define height, if the height and width are defined the image will be cropped automatically
• c : Define a position to crop (default: 'center')
• f : Format of the thumbnail (default: 'webp')

@conf

• _defaultsrcset : If :thumbs parameter is not set, a default set will be used (default: [['w' => 100], ['w' => 200], ['w' => 400], ['w' => 800], ['w' => 1200]])
• _img_thumbpath : The directory in the storage disk (default: '/responsive-image/thumbs')
• _default_thumbext : The default format to generate thumbnail (default :'webp'). The default value must be allowed in _allowedformat
• _allowedformat : Allowed format to generate thumbnail (default: ['webp', 'jpg', 'png', 'gif'])
• _allowedwidth : Allowed widths to generate thumbnail (default: [50, 100, 200, 400, 600, 800, 1200, 1400, 1600]). Possibility to allow all widths with an empty array
• _allowedheight : Allowed heights to generate thumbnail (default: [50, 100, 200, 300, 400, 500, 600, 800, 1000, 1200]). Possibility to allow all heights with an empty array
• _allowedcrop : Allowed crop positions to generate thumbnail (default: ['center', 'top', 'top-right', 'top-left', 'left', 'bottom', 'bottom-right', 'bottom-left', 'right'])
• storage.thumb : The thumbnail storage (default: 'public')
• _thumb_dirlevel : Thumbnail will generate a tree storage. This parameter define the number of level (default: 2)

:useCustomThumbs

By default this parameter is disabled, but the package offer the possibility to use specifics thumbnails and this parameter is set to true.

Don't forget to specify a width associated with the thumbnail to stay responsive.

loading, fetchPriority and decoding

These parameters will impact the page loading.

Allowed values :

• loading (default: 'lazy') : 'auto','lazy','eager' more information
• fetchPriority : 'high','low','auto' more information
• decoding : 'sync','async','lazy' more information

width and height (optional)

By default these values are calculated, but force them to avoid some problems of calculation

Get more attributes

As all components in Laravel, you can add other attributes, they will reuse to display the image.

Don't forget important thing to keep the image responsive and a performant page loading, the attribute sizes.

This attribute is not directly manage by the package because each case is different, but it's very important to set it. More information

Environnement

Possibility to use some environnement variable to configure a default config value

Extending Processors

The package is only delivered with Intervention Image

Possibility to extend with another image processor following the ProcessorInterface::class

@conf

• processor.class (default: InterventionProcessor::class)_ : Define the image processor class

Extending Optimizers

The package is delivered with Spatie Image Optimizer and another one to disable image optimisation (DisableOptimizer::class)

Possibility to extend with another image optimizer following the OptimizerInterface::class

@conf

• optimizer.class (default: SpatieOptimizer::class)_ : Define the image optimisation class