Skip to content

Instantly share code, notes, and snippets.

@13twelve

13twelve/responsiveImageSrcset.php

Created March 23, 2023 18:59
Show Gist options
  • Save 13twelve/0fb6655a54a483169acbe8028eb0645e to your computer and use it in GitHub Desktop.
Save 13twelve/0fb6655a54a483169acbe8028eb0645e to your computer and use it in GitHub Desktop.
Download ZIP
Create responsive image srcset attribute with PHP
Raw
responsiveImageSrcset.php
<?php
function responsiveImageSrcset($url, $options = []) {
// Doc: https://github.com/area17/a17-behaviors/wiki/responsiveImageSrcset
if (!$url) {
return '';
}
$opts = [
'sizes' => [200,400,600,1000,1600,2200,2800],
'overwrite' => true,
'defaultParams' => true,
...$options,
];
if (isset($opts['params'])) {
unset($opts['params']);
}
$opts['params'] = $opts['defaultParams'] === false ? [
...($options['params'] ?? []),
] : [
'q' => 75,
'fm' => 'auto',
'auto' => 'compress,format',
'fit' => 'min',
...($options['params'] ?? []),
];
$srcset = '';
$imgUrl = strtok($url, '?');
$params = [];
if (gettype(parse_url($url, PHP_URL_QUERY)) !== 'NULL') {
parse_str(parse_url($url, PHP_URL_QUERY), $params);
}
$sizesLength = count($opts['sizes']);
if ($opts['overwrite']) {
$params = [
...$params,
...$opts['params'],
];
} else {
$params = [
...$opts['params'],
...$params,
];
}
foreach($opts['sizes'] as $index=>$size) {
$params['w'] = $size;
$params['width'] = $size;
$sizeParams = http_build_query($params);
$comma = $index < $sizesLength - 1 ? ', ' : '';
$srcset .= "{$imgUrl}?{$sizeParams} {$size}w{$comma}";
};
return $srcset;
};
Raw
z_usage.php
<?php
echo "\n";
echo "\n";
$baseImgUrl = 'https://area17.imgix.net/0000/image.jpg';
$complexImgUrl = 'https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=1480';
$srcset = responsiveImageSrcset($baseImgUrl);
$expected = 'https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=2800&width=2800 2800w';
echo "srcset from basic url, using defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";
// ---
$srcset = responsiveImageSrcset($complexImgUrl);
$expected = 'https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=200&fm=auto&auto=compress%2Cformat&fit=min&width=200 200w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=400&fm=auto&auto=compress%2Cformat&fit=min&width=400 400w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=600&fm=auto&auto=compress%2Cformat&fit=min&width=600 600w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=1000&fm=auto&auto=compress%2Cformat&fit=min&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=1600&fm=auto&auto=compress%2Cformat&fit=min&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=2200&fm=auto&auto=compress%2Cformat&fit=min&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=2800&fm=auto&auto=compress%2Cformat&fit=min&width=2800 2800w';
echo "srcset from url with search params, using defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";
// ---
$srcset = responsiveImageSrcset($baseImgUrl, [
'sizes' => [50, 100]
]);
$expected = 'https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=50&width=50 50w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=100&width=100 100w';
echo "generates custom sizes ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";
// ---
$srcset = responsiveImageSrcset($baseImgUrl, [
'params' => [
'q' => 60
]
]);
$expected = 'https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=2800&width=2800 2800w';
echo "adds param to basic url, using defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";
// ---
$srcset = responsiveImageSrcset($complexImgUrl, [
'params' => [
'q' => 60,
'blur' => 20,
]
]);
$expected = 'https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=200&fm=auto&auto=compress%2Cformat&fit=min&blur=20&width=200 200w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=400&fm=auto&auto=compress%2Cformat&fit=min&blur=20&width=400 400w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=600&fm=auto&auto=compress%2Cformat&fit=min&blur=20&width=600 600w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=1000&fm=auto&auto=compress%2Cformat&fit=min&blur=20&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=1600&fm=auto&auto=compress%2Cformat&fit=min&blur=20&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=2200&fm=auto&auto=compress%2Cformat&fit=min&blur=20&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=2800&fm=auto&auto=compress%2Cformat&fit=min&blur=20&width=2800 2800w';
echo "overwrites param on url with search params, using defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";
// ---
$srcset = responsiveImageSrcset($complexImgUrl, [
'overwrite' => false,
'params' => [
'q' => 75,
'blur' => 20,
],
]);
$expected = 'https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=2800&width=2800 2800w';
echo "doesn\'t overwrite params on url with search params, using defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";
// ~~~~~~~~~
$srcset = responsiveImageSrcset($baseImgUrl, [ 'defaultParams' => false ]);
$expected = 'https://area17.imgix.net/0000/image.jpg?w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?w=2800&width=2800 2800w';
echo "srcset from basic url, no defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";
// ---
$srcset = responsiveImageSrcset($complexImgUrl, [ 'defaultParams' => false ]);
$expected = 'https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=2800&width=2800 2800w';
echo "srcset from url with search params, no default ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";
// ---
$srcset = responsiveImageSrcset($baseImgUrl, [
'defaultParams' => false,
'params' => [
'q' => 60
]
]);
$expected = 'https://area17.imgix.net/0000/image.jpg?q=60&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?q=60&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?q=60&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?q=60&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?q=60&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?q=60&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?q=60&w=2800&width=2800 2800w';
echo "adds param to basic url, no defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";
// ---
$srcset = responsiveImageSrcset($complexImgUrl, [
'defaultParams' => false,
'params' => [
'q' => 60,
'blur' => 20,
]
]);
$expected = 'https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=200&blur=20&width=200 200w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=400&blur=20&width=400 400w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=600&blur=20&width=600 600w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=1000&blur=20&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=1600&blur=20&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=2200&blur=20&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=2800&blur=20&width=2800 2800w';
echo "overwrites param on url with search params, no defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";
// ---
$srcset = responsiveImageSrcset($complexImgUrl, [
'defaultParams' => false,
'overwrite' => false,
'params' => [
'q' => 75,
'blur' => 20,
]
]);
$expected = 'https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=2800&width=2800 2800w';
echo "doesn\'t overwrites params on url with search params, no defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment