Integrate resize images on demand code within img from tag

I want to integrate the img src from resize images on demand from Sebastian Eberlein into the img from this tag gallery-row

<?php kirbytext::$tags['gallery-row'] = array(
  'html' => function($tag) {
    $containers = explode('|', $tag->attr('gallery-row'));
    $html = '<div class="gallery-row col-md-12">';
    foreach($containers as $container) {
      // Remove space after the comma
        
      $container = trim($container);
      list($images, $size) = explode(':', $container);
      //get the image array
      $images = explode(',', $images);

      $html .= '<div class="gallery-image-' . $size . '">';
      foreach($images as $image) {
        // Remove space after the comma
        $image = trim($image);
        $html .= '<div class="thumbnail"><img class="img-responsive" src="' . $tag->page()->image()->url() . '"/></div>';
      }
      $html .= '</div>';
    }
    
    return $html . '</div>';
  }
);

with this bit from the Responsive Images on Demand

							<?php 
  $srcset = '';
  for ($i = 100; $i <= 3000; $i += 100) $srcset .= resizeOnDemand($cover, $i) . ' ' . $i . 'w,';
?>
<img 
  src="<?php echo resizeOnDemand($cover, 500) ?>" 
  srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
  data-srcset="<?php echo $srcset ?>" 
  data-sizes="auto" 
  data-optimumx="1.5" 
  alt="…" 
  class="lazyload">

Bare with me, I’m a designer :wink:

For future posts, it would be great if you could include a link to the code when you talk about a plugin and not just the Kirby core. As the Kirby community is growing not everyone knows every plugin :wink:

And if I understood you right, you need to change this line:

$html .= '<div class="thumbnail"><img class="img-responsive" src="' . $tag->page()->image()->url() . '"/></div>';

to this

$srcset = '';
for ($i = 100; $i <= 3000; $i += 100) $srcset .= resizeOnDemand($tag->page()->image(), $i) . ' ' . $i . 'w,';
$html. = '<img src="'.resizeOnDemand($tag->page()->image(), 500).'" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="'.$srcset.'" data-sizes="auto" data-optimumx="1.5" alt="…" class="lazyload">';

Thanks @distantnative, will do the next time. Was stuck in the markdown editor.
Big thanks for the solution, I let you when I’ve imeplemented it!

I’ve implemented it but it didn’t work, the whole site would not render anymore. Somethings wrong but I can’t seem to find the cause