A snippet that creates a <picture></picture> element with webp & jpg sources using pThumb with different media sizes depending on layout for bootstrap

createImg.pthumnb.modx.php

<?php
$img_src    = $modx->getOption('src', $scriptProperties);
$img_alt    = $modx->getOption('alt', $scriptProperties);
$img_width  = $modx->getOption('width', $scriptProperties,640);
$is_lazy    = $modx->getOption('lazy', $scriptProperties, false);
$img_class  = $modx->getOption('class', $scriptProperties, 'img-fluid');
$colums     = $modx->getOption('cols', $scriptProperties, '{"xs":12,"sm":12,"md":8,"lg":6,"xl":6}');
$img_type   = $modx->getOption('type', $scriptProperties, 'jpg');

$dataAttr = '';
if ($is_lazy) {
    $dataAttr = 'data-';
}

// IF SVG don't pass to pThumbs but return the image 
if ($img_type == 'svg') {
    $output_img = '<img ' . $dataAttr . 'src="' . $img_src . '" alt="' . $img_alt . '" class="' . $img_class . '" width="' . $img_width . '">';
    return $output_img;
}

$col_count = 12;
$source_data = array(
    "xs" => array(
        "width" => 420,
        "media" => '(max-width: 419px)'
    ),
    "sm" => array(
        "width" => 576,
        "media" => '(min-width: 420px) and (max-width:575px)'
    ),
    "md" => array(
        "width" => 768,
        "media" => '(min-width: 576px) and (max-width:767px)'
    ),
    "lg" => array(
        "width" => 992,
        "media" => '(min-width: 767px) and (max-width:991px)'
    ),
    "xl" => array(
        "width" => 1440,
        "media" => '(min-width: 991px)'
    )
);

// Create size array 
$sizes = json_decode($colums);

$output = '<picture>';

foreach ($sizes as $size_col => $size) {

    $calc_width         = $col_count / $size;
    $set_img_width      = $source_data[$size_col]['width'] / $calc_width;

    // WEBP SOURCE 
    $output .= '<source ' . $dataAttr . 'srcset="' . $modx->runSnippet("phpthumbof", array('input' => $img_src, 'options' => "w=$set_img_width&far=1&q=98&f=webp")) . ' ' . $set_img_width . 'w' . '" media="' . $source_data[$size_col]['media'] . '" type="image/webp">';
    // JPG/ PNG SOURCE
    $output .= '<source ' . $dataAttr . 'srcset="' . $modx->runSnippet("phpthumbof", array('input' => $img_src, 'options' => "w=$set_img_width&far=1&q=98&f=$img_type")) . ' ' . $set_img_width . 'w' . '" media="' . $source_data[$size_col]['media'] . '" type="image/'. $img_type .'">';
}

$output .= '<img ' . $dataAttr . 'src="' . $modx->runSnippet("phpthumbof", array('input' => $img_src, 'options' => "w=$img_width&far=1&q=98&f=$img_type")) . '" alt="' . $img_alt . '" class="' . $img_class . '">';
$output .= '</picture>';
return $output;