Image resizer-Client sided
Posted February 1st 2012, 2:39pm
I am writing this to know how the image resizing techniques work (default in FM). If we intentionally degrade internet speed the image posted loads full-sized but after a while resizes...meaning its client sided technique.
Now provided that FM editor doesnt ask for width & height of an image we input as URL how do it identifies that image is larger than the prescribed value & resizes it...most important gives a link above it to see it in full size??


Using css we can define a max-width & max-height properties for .content img but how do we get a url above the img?
The URL above the img cannot be placed if in html we have something like this:
<img alt="Image" src="http://www.webpagescreenshot.info/i/662537-212012101629pm.png">


I mean you don't have any width/height attributes that we can reference via js...do plz giv me any resourceful links
φ
Posts: 163
Joined: August 5th 2011, 11:00pm
Location: Pakistan
Likes Given: 34
Likes Received: 3
1
#2
Re: Image resizer-Client sided
Posted February 1st 2012, 3:53pm
If you want to know why I will NEVER use the eToxic-written image resizer, here is the actual function in the forumotion system script that resizes images:

function resize_images(o) {

    if ($(document.body).data('image_resize')) {
        o.delayed = true;
        $(document.body).one('resized', o, function (e) {
            resize_images(e.data)
        })
    }
    else {
        instance = $(document.body).data('current_resize_instance') || 0;
        $(document.body).data('current_resize_instance', ++instance);
        $(document.body).data('image_resize', true);
        $(document.body).addClass('resize_process');
        var imgs = $(o.selector ? o.selector + ' img' : '.postbody img').not('.signature_div img').not('.attachbox img').addClass('resize_img');
        resize_div = document.createElement('span');
        resize_border_div = document.createElement('span');
        resize_content_div = document.createElement('span');
        enlarge_a = document.createElement('a');
        resize_a = document.createElement('a');
        fullsize_a = document.createElement('a');
        resize_filler_div = document.createElement('span');
        $(resize_div).click(function (e) {
            if (!$(e.target).hasClass('enlarge') && !$(e.target).hasClass('resize') && !$(e.target).hasClass('fullsize') && !$(e.target).hasClass('resizebox')) return false
        }).addClass('resizebox gensmall clearfix');
        $(resize_border_div).addClass('resize_border clearfix');
        $(resize_div).append(resize_border_div);
        $(resize_content_div).addClass('resize_content clearfix');
        $(resize_border_div).append(resize_content_div);
        enlarge_a.href = '#';
        resize_a.href = '#';
        fullsize_a.href = '#';
        $(enlarge_a).addClass('enlarge').text("Enlarge this image");
        $(resize_a).addClass('resize').text("Reduce this image");
        $(fullsize_a).addClass('fullsize').text("Click to see fullsize");
        $(resize_filler_div).addClass('resize_filler').text(' ');
        $(resize_content_div).append(enlarge_a);
        $(resize_content_div).append(resize_a);
        $(resize_content_div).append(resize_filler_div);
        $(resize_content_div).append(fullsize_a);
        tmp = jQuery.makeArray(imgs);
        refs = {
            'imgs': tmp,
            'resize_div': resize_div,
            'max_width': o.max_width,
            'max_height': o.max_height
        };
        delete(resize_div);
        $(document.body).data('refs_' + instance, refs).bind('load', function (e, instance) {
            current_instance = instance || $(document.body).data('current_resize_instance');
            skip_post = false;
            var refs = $(this).data('refs_' + current_instance);
            index = jQuery.inArray(e.target, refs.imgs);
            img_el = e.target;
            var img = $(img_el);
            if (index != -1 && !$(this).data('img_' + current_instance + '_' + index) && !img.data('data')) {
                img_style = img_el.style && (img_el.style.width || img_el.style.height) ? {
                    width: parseInt(img_el.style.width) || false,
                    height: parseInt(img_el.style.height) || false
                } : false;
                if (!img_style) {
                    img.attr('style', 'display:inline')
                }
                img_width = img_style.width || img_el.width;
                img_height = img_style.height || img_el.height;
                if ((img_width == 0 || img_height == 0) && ($(this).data('img_' + current_instance + '_' + index + '_count') || 0) < 10) {
                    $(this).data('img_' + current_instance + '_' + index + '_count', ($(this).data('img_' + current_instance + '_' + index + '_count') || 0) + 1);
                    window.setTimeout("$($(document.body).data('refs_" + current_instance + "').imgs[" + index + "]).trigger('load',[" + current_instance + "]);", 100);
                    skip_post = true
                }
                if ((img_width > refs.max_width && refs.max_width != 0) || (img_height > refs.max_height && refs.max_height != 0)) {
                    img.removeAttr('style');
                    $(this).data('img_' + current_instance + '_' + index, true);
                    var resize_div = $(refs.resize_div).clone(true);
                    img_el.parentNode.insertBefore(document.createElement('br'), img_el);
                    img_el.parentNode.insertBefore($(resize_div).get(0), img_el);
                    img_el.parentNode.insertBefore(document.createElement('br'), img_el);
                    resize_div.data('img_ref', img);
                    resize_div.attr('style', 'display:block');
                    max_width = document.defaultView ? parseInt(document.defaultView.getComputedStyle(resize_div.get(0), "").getPropertyValue("width")) : resize_div.get(0).offsetWidth;
                    resize_div.removeAttr('style');
                    if (img_width > max_width) {
                        resize_div.addClass('showfull')
                    }
                    new_width = img_width * ((refs.max_width != 0 && (refs.max_height == 0 || img_width / img_height > refs.max_width / refs.max_height)) ? refs.max_width / img_width : refs.max_height / img_height);
                    img_el.width = new_width;
                    data = {
                        'width': img_width,
                        'resize_width': new_width,
                        'max_sized': (img_width > max_width)
                    };
                    if (img_style) {
                        data.height = img_height;
                        data.resize_height = new_width * img_height / img_width;
                        img_el.height = data.resize_height
                    }
                    img.data('data', data);
                    delete(data);
                    resize_div.attr('style', 'width:' + new_width + 'px');
                    delete(max_width);
                    delete(new_width)
                }
                else if (!skip_post) {
                    $(this).data('img_' + current_instance + '_' + index, true);
                    img.removeClass('resize_img')
                }
                delete(img_width);
                delete(img_height);
                delete(img_style)
            }
            delete(img_el);
            delete(index)
        });
        if (instance == 1) {
            $(document.body).bind('click', function (e) {
                switch (true) {
                case $(e.target).hasClass('enlarge'):
                    resize_div = $(e.target).parents('span.resizebox');
                    if (resize_div.length) {
                        var img = $(resize_div.data('img_ref'));
                        var img_data = img.data('data');
                        resize_div.attr('style', 'display:block');
                        resize_width = resize_div.width();
                        img.removeAttr('width');
                        img_width = img_data.width;
                        if (resize_width < img_width) {
                            new_width = resize_width;
                            resize_div.addClass('showfull')
                        }
                        else {
                            new_width = img_width;
                            resize_div.removeClass('showfull')
                        }
                        img.attr('width', new_width);
                        if (img_data.height) {
                            img.attr('height', img_data.height * new_width / img_width)
                        }
                        resize_div.removeAttr('style');
                        resize_div.attr('style', 'width:' + new_width + 'px');
                        resize_div.toggleClass('enlarged');
                        return false
                    }
                    break;
                case $(e.target).hasClass('resize'):
                    resize_div = $(e.target).parents('span.resizebox');
                    if (resize_div.length) {
                        var img = resize_div.data('img_ref');
                        var img_data = img.data('data');
                        img.attr('width', img_data.resize_width);
                        if (img_data.resize_height) {
                            img.attr('height', img_data.resize_height)
                        }
                        resize_div.attr('style', 'width:' + img_data.resize_width + 'px');
                        resize_div.toggleClass('enlarged');
                        return false
                    }
                    break;
                case $(e.target).hasClass('fullsize'):
                    resize_div = $(e.target).parents('span.resizebox');
                    if (resize_div.length) {
                        var img = $(resize_div.data('img_ref'));
                        window.open('/viewimage.forum?u=' + encodeURIComponent(img.attr('src')));
                        return false
                    }
                    break;
                default:
                }
            })
        }
        $(window).bind('load', function (e) {
            current_instance = $(document.body).data('current_resize_instance');
            tmp = $(document.body).data('refs_' + current_instance).imgs;
            hash = window.location.hash ? window.location.hash.substr(1) : false;
            for (i = 0, j = tmp.length; i < j; ++i) {
                if (!$(document.body).data('img_' + current_instance + '_' + i)) {
                    window.setTimeout("$($(document.body).data('refs_" + current_instance + "').imgs[" + i + "]).trigger('load');", i * 1)
                }
            }
            window.setTimeout("$(document.body).removeClass('resize_process').data('image_resize',false).trigger('resized');" + (is_ie ? "$('table').css('zoom',1);" : '') + (hash ? 'tmp = $(\'.post a[name="' + hash + '"]\').position();window.scrollTo(tmp.left, tmp.top);' : ''), is_ie ? 500 : 100);
            delete(tmp)
        });
        if (o.delayed) {
            tmp = $(document.body).data('refs_' + instance).imgs;
            hash = window.location.hash ? window.location.hash.substr(1) : false;
            for (i = 0, j = tmp.length; i < j; ++i) {
                if (!$(document.body).data('img_' + instance + '_' + i)) {
                    window.setTimeout("$($(document.body).data('refs_" + instance + "').imgs[" + i + "]).trigger('load');", i * 1)
                }
            }
            window.setTimeout("$(document.body).removeClass('resize_process').data('image_resize',false).trigger('resized');" + (is_ie ? "$('table').css('zoom',1);" : '') + (hash ? 'tmp = $(\'.post a[name="' + hash + '"]\').position();window.scrollTo(tmp.left, tmp.top);' : ''), is_ie ? 500 : 100);
            delete(tmp)
        }
        delete(refs)
    }
}

To say it is bloated, slow, and buggy would be an understatement. You're much better off using CSS to set maximum widths and maximum heights on images in posts.

If you want to see the image in full size, right-click on it and select "View Image".
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Image resizer-Client sided
Posted February 1st 2012, 4:12pm
Dion said:
If you want to know why I will NEVER use the eToxic-written image resizer, here is the actual function in the forumotion system script that resizes images:

errr...i didnt know that
The query was posted generally, is there any js technique to leech out height/width parameters of .gif/,png....
φ
Posts: 163
Joined: August 5th 2011, 11:00pm
Location: Pakistan
Likes Given: 34
Likes Received: 3
Image resizer-Client sided
Posted February 1st 2012, 4:42pm
There's really no good solution to the issue of large images in posts. If I notice that a member continually links to large images, I will contact them via PM and ask them to stop it. I will also remove the images from their recent posts. And for me, "large" is any image greater than 200K in filesize and/or greater than 800x600 in height/width.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
1
#5
Re: Image resizer-Client sided
Posted February 1st 2012, 4:51pm

img.height
img.width


CSS is obviously the best way. But a better way for browser-side resizing (which is still pointless) would be something like this:
(bare in mind i'm just writing this now... so expect a mistake somewhere lol)


var imgDimensions=[];

function createResize(img){
  if(img.height > 300 || img.width > 300) {     
    imgDimensions[img.src]=[img.height,img.width];
    img.height=300; img.width=300;
    var holder=document.createElement('DIV');
    holder.innerHTML='<a onclick="showFullImg(this.nextSibling)">Toggle Image Size</a><br> ';
    img.parentNode.insertBefore(holder,img);
    holder.appendChild(img);
  }
}

function showFullImg(img){
  var src=img.src;
  if (img.width == 300 || img.height == 300) {
    img.height=imgDimensions[src][0];
    img.width=imgDimensions[src][1];
  }
  else {
    img.height=300;
    img.width=300;
  }
}


The first function named 'createResize()' would be called in an onload event of the img, with the paramter as 'this'.
Its dimensions are saved into an associative array, using the src for identifying it. It then creates a new element with the link in for toggling the size. That function sends the img into it again to where it will look up the dimensions in the array. The deomnstration is for a maximum height and width of 300px.

EDIT: just took a look at that FM resizer, maaaan that is uuugly. lol
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Image resizer-Client sided
Posted February 2nd 2012, 11:58am
did not work.
φ
Posts:
Avatar
Guest
Image resizer-Client sided
Posted February 2nd 2012, 2:13pm
EmperorAdam said:
did not work.

it wasn't a TUTORIAL :(
φ
Posts: 163
Joined: August 5th 2011, 11:00pm
Location: Pakistan
Likes Given: 34
Likes Received: 3

Who is online

Users browsing this forum: No registered users and 0 guests