Search

I’ve been using mediathek a lot recently, the only issue I had was that some content editors didn’t or were unable to resize images themselves. Something all of us deal with at some point.

After they dragged an image into the markdown field, I was unable to change the image height or width. I thought about using Allen’s ninja technique but markdown doesn’t provide image width or height.

As a fix I wrote this little snippet in jQuery which checks the image width or height and rescales it proportionately so that it fits into the correct space. I send the image back through JIT so that it doesn’t bloat the page.

Please feel free to use it and adapt as required.

    var EX = {
    scaleImage : function(){
        $.fn.scaleSize = function(maxW, maxH, currW, currH){
            var ratio = currH / currW;
              if(currW >= maxW){
                    currW = maxW;
                    currH = currW * ratio;
              } else if(currH >= maxH){
                    currH = maxH;
                    currW = currH / ratio;
              }
            var oSrc = $(this).attr('src'),
            nPath = oSrc.split('/workspace/')[1],
            newSrc = '/image/1/'+currW+'/'+currH+'/0/'+nPath;
            $(this).attr('src', newSrc);
        }
        $('img', '.article').each(function(index, el) {             
            var img = $(el),
            initW = img.width(),
            initH = img.height();
            (initW > 400) ? img.scaleSize(400, 400, initW, initH) : null;
        });
    }
}
$(function() {
    if ($('.article img').length) {
        EX.scaleImage();
    };
});

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details