hcesrl/php-responsive-image-sizes

Retrieve the correct sizes for a responsive image based on its intrinsic width and its width on screen

1.0.3 2021-11-19 15:50 UTC

Requires

• php: >=7.4
• marc-mabe/php-enum: ^4.4

MIT

• HCE Srl

README

Installation

composer require hcesrl/php-responsive-image-sizes

Usage

Please refer to the original javascript library documentation for further informations: https://github.com/HCESrl/responsive-image-sizes

Here is a basic example:

<?php
use Hcesrl\PhpResponsiveImageSizes\BaseSizes;
use Hcesrl\PhpResponsiveImageSizes\DeviceType;
use Hcesrl\PhpResponsiveImageSizes\ResponsiveImagesSizes;

require 'vendor/autoload.php';

var_dump(ResponsiveImagesSizes::getResponsiveSizes(DeviceType::All(), new BaseSizes(BaseSizesType::Granular())));

ResponsiveImagesSizes::getResponsiveSizes function accepts following parameters:

• $deviceType enum value: one of the available Enum DeviceType values (based on marc-mabe/php-enum library);
• BaseSizes class instance: the constructor expects one of the available Enum BaseSizesType values (based on marc-mabe/php-enum library). If you choose BaseSizesType::Custom() value, a second parameter is expected (see below);
• $sourceImageWidth integer, default is 3220, see js library docs for further informations;
• $widthOnPage integer, default is 100, see js library docs for further informations;
• $topSize integer, default is 1920, see js library docs for further informations;

if you want to use a custom set of BaseSizes, you should declare an array that matches the following schema, and use it as second BaseSizes class constructor's argument:

[
    'desktop' => [
        -- values --
    ],
    'tabletPortrait => [
        -- values --
    ],
    'smartphone' => [
        -- values --
    ]
]

Example:

$customSizes = [
    DeviceType::Desktop => [
      1440,
      1280,
      1024
    ],
    DeviceType::TabletPortrait => [
      1024,
      768
    ],
    DeviceType::Smartphone => [
      828,
      750,
      720,
      640
    ]
];
var_dump(ResponsiveImagesSizes::getResponsiveSizes(DeviceType::All(), new BaseSizes(BaseSizesType::Custom(), $customSizes)));

Output sample:

(
    [0] => 1024
    [1] => 1280
    [2] => 1440
)