how can i do it ever <img> takes the right picture sets
here the picture directory (img):
- example_start.jpg
- example-A_small.jpg
- example-A_small_2x.jpg
- example-A_medium.jpg
- example-A_medium_2x.jpg
- example-A_large.jpg
- example-A_large_2x.jpg
- example-AB_small.jpg
- example-AB_small_2x.jpg
- example-AB_medium.jpg
- example-AB_medium_2x.jpg
- example-AB_large.jpg
- example-AB_large_2x.jpg
// Get Pictures
$imgDir = 'img';
$imgs = glob($imgDir.'/{[!_start].jpg}', GLOB_BRACE); // without _start image!
asort($imgs);
caption.php file:
$imgCaption = array('example-A is nice','example-B is blue');
require_once 'caption.php'; // picture caption data
foreach($imgs as $files => $img){
if(!isset($imgCaption[$files])){$imgCaption[$files] = '';}
echo'
<img
src="'.$_SERVER['REQUEST_URI'].$img.'"
srcset="
'.$_SERVER['REQUEST_URI'].$img.' 734w,
'.$_SERVER['REQUEST_URI'].$img.' 1472w,
'.$_SERVER['REQUEST_URI'].$img.' 1068w,
'.$_SERVER['REQUEST_URI'].$img.' 2136w,
'.$_SERVER['REQUEST_URI'].$img.' 2016w,
'.$_SERVER['REQUEST_URI'].$img.' 4032w,"
sizes="(min-width: 640px) 50vw, 100vw" width="100%" height="100%"
alt="'.$imgCaption[$files].'">
';
expected Output
<img
src="img/example_A-small.jpg"
srcset="
img/example-A_small.jpg 734w,
img/example-A_small_2x.jpg 1472w,
img/example-A_medium.jpg 1068w,
img/example-A_medium_2x.jpg 2136w,
img/example-A_large.jpg 2016w,
img/example-A_large_2x.jpg 4032w,"
sizes="(min-width: 640px) 50vw, 100vw" width="100%" height="100%" alt="Example A">
<img
src="img/example_B-small.jpg"
srcset="
img/example-AB_small.jpg 734w,
img/example-AB_small_2x.jpg 1472w,
img/example-AB_medium.jpg 1068w,
img/example-AB_medium_2x.jpg 2136w,
img/example-AB_large.jpg 2016w,
img/example-AB_large_2x.jpg 4032w,"
sizes="(min-width: 640px) 50vw, 100vw" width="100%" height="100%" alt="Example A">
