Обрабатываем изображения на фронтенде
$('.article-content img').each(function(){
var image = $(this);
var imglink = null;
var styles = image.attr('style');
var alt = image.attr('alt');
var src = image.attr('src');
//if this domain or relative link
if(src.indexOf('http') !== -1 && src.indexOf('mysite.com') || src.indexOf('http') == -1){
//get new src
$.ajax({
url: 'ajax/thumb.html',
data: {url: src, h: image.attr('height'), w: image.attr('width')}
}).done(function(thumb){
image.attr('src',thumb);
});
}
imglink = image.attr('style','').wrap('<a href="'+src+'"></a>').parent();
imglink.attr('title',alt).wrap('<figure style="'+styles+'"></figure>');
imglink.after('<figcaption>'+alt+'</figcaption>');
imglink.fancybox();
});
Импользуем пакет phpthumbon
Создаем ресурс ajax/thumb.html, в нем вызываем сниппет:
[[!ajaxThumb]]
if(empty($_GET['url'])) return false;
$pathinfo = pathinfo($_GET['url']);
if($pathinfo['extension'] == 'gif') return $_GET['url'];
$options = array();
if(!empty($_GET['h'])){
$options[] = "h=".$_GET['h'];
}
if(!empty($_GET['w'])){
$options[] = "w=".$_GET['w'];
}
return $modx->runSnippet('phpthumbon', array('input' => $_GET['url'], 'options' => implode('&',$options)));