Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A snippet that creates a <picture></picture> element with webp & jpg sources using pThumb with different media sizes depending on layout for bootstrap
<?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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.