Generating responsive image html with php?

Question

As a beginner in php, I welcome you feedback on improving or simplifying the following php code that generates this responsive image html (image sizes and formats are auto-generated using Gulp). For example, is having three nested foreach loops bad practice?

Generated HTML:

<figure> <picture> <source media="(orientation: portrait)" type="image/avif" srcset="assets/img/faith/faith-3x4-xs.avif 576w, assets/img/faith/faith-3x4-sm.avif 768w, assets/img/faith/faith-3x4-md.avif 992w, assets/img/faith/faith-3x4-lg.avif 1200w, assets/img/faith/faith-3x4-xl.avif 1400w, assets/img/faith/faith-3x4-xxl.avif 2048w"> <source media="(orientation: portrait)" type="image/webp" srcset="assets/img/faith/faith-3x4-xs.webp 576w, assets/img/faith/faith-3x4-sm.webp 768w, assets/img/faith/faith-3x4-md.webp 992w, assets/img/faith/faith-3x4-lg.webp 1200w, assets/img/faith/faith-3x4-xl.webp 1400w, assets/img/faith/faith-3x4-xxl.webp 2048w"> <source media="(orientation: portrait)" type="image/jpg" srcset="assets/img/faith/faith-3x4-xs.jpg 576w, assets/img/faith/faith-3x4-sm.jpg 768w, assets/img/faith/faith-3x4-md.jpg 992w, assets/img/faith/faith-3x4-lg.jpg 1200w, assets/img/faith/faith-3x4-xl.jpg 1400w, assets/img/faith/faith-3x4-xxl.jpg 2048w"> <source media="(orientation: landscape)" type="image/avif" srcset="assets/img/faith/faith-3x2-xs.avif 576w, assets/img/faith/faith-3x2-sm.avif 768w, assets/img/faith/faith-3x2-md.avif 992w, assets/img/faith/faith-3x2-lg.avif 1200w, assets/img/faith/faith-3x2-xl.avif 1400w, assets/img/faith/faith-3x2-xxl.avif 2048w"> <source media="(orientation: landscape)" type="image/webp" srcset="assets/img/faith/faith-3x2-xs.webp 576w, assets/img/faith/faith-3x2-sm.webp 768w, assets/img/faith/faith-3x2-md.webp 992w, assets/img/faith/faith-3x2-lg.webp 1200w, assets/img/faith/faith-3x2-xl.webp 1400w, assets/img/faith/faith-3x2-xxl.webp 2048w"> <source media="(orientation: landscape)" type="image/jpg" srcset="assets/img/faith/faith-3x2-xs.jpg 576w, assets/img/faith/faith-3x2-sm.jpg 768w, assets/img/faith/faith-3x2-md.jpg 992w, assets/img/faith/faith-3x2-lg.jpg 1200w, assets/img/faith/faith-3x2-xl.jpg 1400w, assets/img/faith/faith-3x2-xxl.jpg 2048w"> <img src="assets/img/faith/faith-3x2-lg.jpg" width="1200" height="800" alt="Earth Day, Victoria, BC"> </picture> </figure> 

Php code:

 <? $image= [ 'name' => 'faith', 'srcset' => [ 'sizes' => [ 'size' => ['xs','sm','md','lg','xl','xxl'], 'vw' => [ 576, 768, 992, 1200, 1400, 2048 ] ], 'ratio' => ['portrait' => '3x4','landscape' => '3x2' ], 'format' => ['avif', 'webp','jpg'] ], 'caption' => 'Earth Day, Victoria, BC', ]; $sizes = array_combine($image['srcset']['sizes']['size'], $image['srcset']['sizes']['vw']); ?> <figure> <picture> <? foreach ($image['srcset']['ratio'] as $orientation => $ratio): $basePath = "assets/img/{$image['name']}/{$image['name']}-{$ratio}"; foreach($image['srcset']['format'] as $format): $comma = ''; $source = "<source media=\"(orientation: ${orientation})\" type = \"image/{$format}\" srcset=\""; foreach($sizes as $size => $vw): $source .= "{$comma}{$basePath}-{$size}.{$format} {$vw}w"; $comma=', '; endforeach; echo $source .= '">'; endforeach; endforeach; ?> <img src="<?=$basePath?>-lg.jpg" width="1200" height="800" alt="<?=$image['caption']?>"> </picture> </figure> 

Answer 1

Personally, I don't like that much logic in the template. Even hate it. The code becomes unreadable. In such a case I would rather move all this intricate logic into the PHP part, doing some preprocessing that will result in the plain array, so the end code would be like this

<figure> <picture> <?php foreach ($image['srcset'] as $row): ?> <source media="(orientation: <?=$row['orientation']?>)" type="image/<?=$row['format']?>" srcset="<?=$row['srcset'] ?>"> <?php endforeach ?> <img src="<?=$imagePath?>lg.jpg" width="1200" height="800" alt="<?=$image['caption']?>"> </picture> </figure> 

The preprocessing PHP code should be exactly like your current code, just collecting the data into array instead of echoing it

$new = []; foreach ($image['srcset']['ratio'] as $orientation => $ratio) { $basePath = "assets/img/{$image['name']}/{$image['name']}-{$ratio}"; foreach($image['srcset']['format'] as $format) { $srcset = ''; foreach($sizes as $size => $vw) { $srcset .= $srcset ? ",":""; $srcset .= "{$basePath}-{$size}.{$format} {$vw}w"; } $new[] = [ 'orientation' => $orientation, 'format' => $format, 'srcset' => $srcset, ]; } } 

another possibility is to write sort of a helper function

<figure> <picture> <?php foreach ($image['srcset']['ratio'] as $orientation => $ratio): ?> <?php foreach($image['srcset']['format'] as $format): ?> <source media="(orientation: <?=$orientation?>)" type="image/<?=$format?>" srcset="<?=getsrcset($image, $ratio, $format, $key)"> <?php endforeach ?> <? endforeach ?> <img src="<?=$imagePath?>lg.jpg" width="1200" height="800" alt="<?=$image['caption']?>"> </picture> </figure> 

And two generic suggestions:

• short open tag is forbidden, always use <?php instead of <?
• do not neglect the code indentation. The proper formatting is very important, it helps to understand what does the code do