Automatic resizing of attached images in forum posts?

macavity · Heavy poster Offline Joined: Jun 23, 2004 Posts: 199

Hi all,

I just want to check something - am I right in thinking that automatic resizing of images attached to forum posts (using the attachment mod - I think that's what it's called) is not something offered in DF core? I'm aware that I can specify a max size but I don't see anything related to on the fly resizing (and certainly images aren't being resized in my forum at the moment).

Many thanks for any clarification!

layingback · Forum Admin Offline Joined: Apr 19, 2004 Posts: 1040

Not aware of any on-the-fly resizing.

I've added it to Pro_News for its own image upload, and to my Batch Upload for Users hack (included in Pro_News package). You're welcome to look at same for coding ideas - assuming I've done it the right way Wink

(function img)

macavity · Heavy poster Offline Joined: Jun 23, 2004 Posts: 199

Thanks layingback!

earth · Heavy poster Offline Joined: Mar 01, 2006 Posts: 268

can you take a screen shot of your admin => Forums => Config =>

On the settings page area, near the bottom where the attach settings are that pertains to it, please take a screen shot and post it up here,as an attachment.

Also, any changes made after an image is uploaded, may not show, if a created thumbnail was created with the previous settings.

Think there are a few settings if you note, will have a red asterix * and the connotation = could be a problem if you change the setting, if you got images already uploaded, or something like that..

macavity · Heavy poster Offline Joined: Jun 23, 2004 Posts: 199

Thanks for your input, earth, but this isn't related to thumbnails.

layingback · Forum Admin Offline Joined: Apr 19, 2004 Posts: 1040

@macavity, If you figure it out, please post the details for the rest of us. You are welcome to host it on my site, or here.

I resize mine to 800px max, but that's with a pop-up link from the thumbnail. You may need 600px or less for Forums, depending if you have 1 block column or 2.

macavity · Heavy poster Offline Joined: Jun 23, 2004 Posts: 199

Ah, confession time, truth is I don't have the knowledge/experience to figure it out (I was really just checking that I wasn't unaware of something I could just plug in). Sorry!

NanoCaiordo

As earth vaguely suggest,

Admin -> Forums
in Attachments Special Categories enable Create Thumbnail and set up other options to use your specified settings.

There is not difference between creating thumbnails and resizing pictures, they both do the same thing right Wink

Just make sure that Display Images Inline is also enabled (default settings) otherwise will display images as links.

macavity · Heavy poster Offline Joined: Jun 23, 2004 Posts: 199

Aha, that's very interesting, I hadn't grasped that at all. Thanks for the pointer, I'll go away and play with it!

greenday2k

This, instead resizes ALL Forums images ON THE FLY (client sided, it maybe make forums posts with large number of images a little bit in slower for the visitor) generated by the [IMG][/IMG] tags on the forums (when people posts an image using the [IMG] bbcodes).

open:
includes/javascript/bbcode.js

and insert this code at the end:

Code::


/*

   "Resize Posted Images Based on Max Width" 2.4.5
   A phpBB MOD originally created by Christian Fecteau.

   This MOD is copyright (c) Christian Fecteau 2004-2005

   This MOD is released under the Creative Commons licence:
   http://creativecommons.org/licenses/by-nc-sa/2.0/
   Read carefully this licence before making any use of my code.

   Credits must be given with my full name (Christian Fecteau)
   and a link to my portfolio: http://portfolio.christianfecteau.com/

   Removal or alteration of this notice is strongly prohibited.

*/



// don't change anything below

function rmw_go()
{
    var rmw_img_array = document.getElementsByTagName("IMG");
    for (var i = 0; i < rmw_img_array.length; i++)
    {
        var rmw_img = rmw_img_array[i];
        if (String(rmw_img.getAttribute('resizemod')) == 'on')
        {
            if (rmw_wait_for_width && rmw_img.width && !isNaN(rmw_img.width))
            {
                if ((rmw_img.width > Number(rmw_max_width)) || (rmw_img.height > Number(rmw_max_height)))
                {
                    rmw_img.setAttribute('resizemod','off');
                    rmw_img.onload = null;
                    rmw_img.removeAttribute('onload');
                    var rmw_clone = rmw_img.cloneNode(false);
                    var rmw_parent = rmw_img.parentNode;
                    rmw_clone.setAttribute('width',String(rmw_max_width));
                    rmw_parent.replaceChild(rmw_clone,rmw_img);
                    rmw_make_pop(rmw_clone, rmw_img.width, rmw_img.height);
                }
            }
            else if (!rmw_wait_for_width)
            {
                if ((rmw_img.width > Number(rmw_max_width)) || (rmw_img.height > Number(rmw_max_height))) {
                    rmw_img.setAttribute('resizemod','off');
                    var rmw_clone = rmw_img.cloneNode(false);
                    rmw_img.onload = null;
                    rmw_img.removeAttribute('onload');
                    var rmw_parent = rmw_img.parentNode;
                    var rmw_ind = rmw_count++;
                    rmw_clone.setAttribute('resizemod',String(rmw_ind));
                    rmw_preload[rmw_ind] = new Image();
                    rmw_preload[rmw_ind].src = rmw_img.src;
                    if (window.showModelessDialog)
                    {
                        rmw_clone.style.margin = '2px';
                    }
                    rmw_clone.style.border = rmw_border_1;
                    rmw_clone.style.width = '28px';
                    rmw_parent.replaceChild(rmw_clone,rmw_img);
                    rmw_make_pop(rmw_clone, rmw_img.width, rmw_img.height);
                }
            }
        }
    }
    if (!rmw_over && document.getElementById('resizemod'))
    {
        rmw_over = true;
        rmw_go();
    }
    else if (!rmw_over)
    {
        window.setTimeout('rmw_go()',2000);
    }
}
function rmw_img_loaded(rmw_obj)
{
    if (!document.getElementsByTagName || !document.createElement) {return;}
    var rmw_att = String(rmw_obj.getAttribute('resizemod'));
    var rmw_real_width = false;
    if ((rmw_att != 'on') && (rmw_att != 'off'))
    {
        var rmw_index = Number(rmw_att);
        if (rmw_preload[rmw_index].width)
        {
            rmw_real_width = rmw_preload[rmw_index].width;
            rmw_real_height = rmw_preload[rmw_index].height;
        }
    }
    else
    {
        rmw_obj.setAttribute('resizemod','off');
        if (rmw_obj.width)
        {
            rmw_real_width = rmw_obj.width;
            rmw_real_height = rmw_obj.height;
        }
    }
    if (!rmw_real_width || isNaN(rmw_real_width) || (rmw_real_width <= 0))
    {
        var rmw_rand1 = String(rmw_count++);
        eval("rmw_retry" + rmw_rand1 + " = rmw_obj;");
        eval("window.setTimeout('rmw_img_loaded(rmw_retry" + rmw_rand1 + ")',2000);");
        return;
    }
    if ((rmw_real_width > Number(rmw_max_width)) || (rmw_real_height > Number(rmw_max_height)))
    {
        if (window.showModelessDialog)
        {
            rmw_obj.style.margin = '2px';
        }
        rmw_make_pop(rmw_obj, rmw_real_width, rmw_real_height);
    }
    else if (!rmw_wait_for_width)
    {
        rmw_obj.style.width = String(rmw_real_width) + 'px';
        rmw_obj.style.border = '0';
        if (window.showModelessDialog)
        {
            rmw_obj.style.margin = '0px';
        }
    }
    if (window.ActiveXObject) // IE on Mac and Windows
    {
        window.clearTimeout(rmw_timer1);
        rmw_timer1 = window.setTimeout('rmw_refresh_tables()',10000);
    }
}
function rmw_refresh_tables()
{
    var rmw_tables = document.getElementsByTagName("TABLE");
    for (var j = 0; j < rmw_tables.length; j++)
    {
        rmw_tables[j].refresh();
    }
}
function rmw_make_pop(rmw_ref, width, height)
{
    rmw_ref.style.border = rmw_border_2;
    if ((width > rmw_max_width) && (height > rmw_max_height)) {
        if (width > height) {
            rmw_ref.style.width = String(rmw_max_width) + 'px';
            off = rmw_max_width / width;
            percent = Math.round(height * off);
            if (percent > 0) {
                rmw_ref.style.height = String(percent) + 'px';
            } else {
                rmw_ref.style.height = String(height) + 'px';
            }
        } else {
            rmw_ref.style.height = String(rmw_max_height) + 'px';
            off = rmw_max_height / height;
            percent = Math.round(width * off);
            if (percent > 0) {
                rmw_ref.style.width = String(percent) + 'px';
            } else {
                rmw_ref.style.width = String(width) + 'px';
            }
        }
    } else if (width > rmw_max_width){
        rmw_ref.style.width = String(rmw_max_width) + 'px';
        off = rmw_max_width / width;
        percent = Math.round(height * off);
        if (percent > 0) {
            rmw_ref.style.height = String(percent) + 'px';
        } else {
            rmw_ref.style.height = String(height) + 'px';
        }
    } else if (height > rmw_max_height){
        rmw_ref.style.height = String(rmw_max_height) + 'px';
        off = rmw_max_height / height;
        percent = Math.round(width * off);
        if (percent > 0) {
            rmw_ref.style.width = String(percent) + 'px';
        } else {
            rmw_ref.style.width = String(width) + 'px';
        }
    }

    if (!window.opera)
    {
        rmw_ref.onclick = function()
        {
            if (!rmw_pop.closed)
            {
                rmw_pop.close();
            }
            rmw_pop = window.open('about:blank','christianfecteaudotcom',rmw_pop_features);
            if (height == 0) {
                height = window.screen.availHeight;
            } else if (height > window.screen.availHeight) {
                height = window.screen.availHeight;
            }
            if (width == 0) {
                width = window.screen.availWidth;
            } else if (width > window.screen.availWidth) {
                width = window.screen.availWidth;
            }
            rmw_pop.resizeTo(width,height);
            rmw_pop.moveTo(0,0);
            rmw_pop.focus();
            rmw_pop.location.href = this.src;
        }
    }
    else
    {
        var rmw_rand2 = String(rmw_count++);
        eval("rmw_pop" + rmw_rand2 + " = new Function(\"rmw_pop = window.open('" + rmw_ref.src + "','christianfecteaudotcom','" + rmw_pop_features + "'); if (rmw_pop) {rmw_pop.focus();}\")");
        eval("rmw_ref.onclick = rmw_pop" + rmw_rand2 + ";");
    }
    document.all ? rmw_ref.style.cursor = 'hand' : rmw_ref.style.cursor = 'pointer';
    rmw_ref.title = rmw_image_title;
    if (window.showModelessDialog)
    {
        rmw_ref.style.margin = '0px';
    }
}
if (document.getElementsByTagName && document.createElement) // W3C DOM browsers
{
    rmw_preload = new Array();
    if (window.GeckoActiveXObject || window.showModelessDialog) // Firefox, NN7.1+, and IE5+ for Win
    {
        rmw_wait_for_width = false;
    }
    else
    {
        rmw_wait_for_width = true;
    }
    rmw_pop_features = 'top=0,left=0,width=' + String(window.screen.width-80) + ',height=' + String(window.screen.height-190) + ',scrollbars=1,resizable=1';
    rmw_over = false;
    rmw_count = 1;
    rmw_timer1 = null;
    if (!window.opera)
    {
        rmw_pop = new Object();
        rmw_pop.closed = true;
        rmw_old_onunload = window.onunload;
        window.onunload = function()
        {
            /*if (rmw_old_onunload)
            {
                rmw_old_onunload();
                rmw_old_onunload = null;
            }*/
            if (!rmw_pop.closed)
            {
                rmw_pop.close();
            }
        }
    }
    //window.setTimeout('rmw_go()',2000);
}

if (window.addEventListener)
    window.addEventListener("load", rmw_go, false)
else if (window.attachEvent)
    window.attachEvent("onload", rmw_go)
else if (document.getElementById)
    womAdd('rmw_go()');

// customize this PART 
// 
//<![CDATA[
<!--

var rmw_max_width = 501; // you can change this number, this is the max width in pixels for posted images
var rmw_max_height = 300; // you can change this number, this is the max height in pixels for posted images
var rmw_border_1 = '4px solid #FF0000';
var rmw_border_2 = '4px dotted #FF0000';
var rmw_image_title = 'Click to view image';

//-->
//]]>

function write_img(img){
var img_write = 0;
img_write = '<img src="'+img+'" class="foro_img" alt="" resizemod="on" onload="rmw_img_loaded(this)" />';
document.write(img_write);
}

Now open /includes/nbbcode.php

add $module_name to the global vars (line 19 aprox)

now find this:

Code::

# [img]image_url_here[/img] code..
$patterns[] = "#\[img\]([\w]+(://|\.|/)[^ (\"\n\r\t<]*?)\[/img\]#si";

And change it to

Code::

if ($module_name =='Forums'){
$replacements[] = '<img resizemod="on" onload="rmw_img_loaded(this)" src=\"\\1\" style=\"border:0;\" alt=\"\" />';
}
else {
$patterns[] = "#\[img\]([\w]+(://|\.|/)[^ (\"\n\r\t<]*?)\[/img\]#si";
}

now on your theme open: /themes/YourFAVTHEME/templates/viewtopic_body.html and FIND

Code::

   <!-- IF postrow.attachment.S_IMAGE_CAT -->
      <td colspan="2" align="center"><br /><img src="{postrow.attachment.U_DOWNLOAD_LINK}" alt="{postrow.attachment.DOWNLOAD_NAME}" style="border:0;" /><br /><br /></td>
    <!-- ELSEIF postrow.attachment.S_THUMB_CAT -->

then you just need to add the resizemod="on" onload="rmw_img_loaded(this)" to the IMG TAG:

Code::

<!-- IF postrow.attachment.S_IMAGE_CAT -->
      <td colspan="2" align="center"><br /><img src="{postrow.attachment.U_DOWNLOAD_LINK}" alt="{postrow.attachment.DOWNLOAD_NAME}" style="border:0;"  resizemod="on" onload="rmw_img_loaded(this)" /><br /><br /></td>
    <!-- ELSEIF postrow.attachment.S_THUMB_CAT -->

As said it resizes all images parsed on the forum: images on posts and signatures. Not XHTML complilant solution, but it works.

Also, Have a version for jquery with lightbox.

macavity · Heavy poster Offline Joined: Jun 23, 2004 Posts: 199

Thanks greenday2k. Just to clarify, though, this is intended only for offsite images linked to via the bbcode, not for attached images?

greenday2k

Works for both.

greenday2k

The simple, the better:

add to you css (themes/THEME/style/style.css);
div.postbody img {max-height:640px;max-height:400px;}

InspectorClueNo · Heavy poster Offline Joined: Mar 26, 2008 Posts: 211

you probably mean
div.postbody img {max-width:640px;max-height:400px;}

but it wont work with IE <= 6 ... and many offices still use outdated versions of IE.

Phoenix

To ensure full IE compatability, you need a css/js solution, as I've indicated on my site:

PHP:

div.postbody img {
max-width: 500px;
width: expression(document.body.clientWidth > 500 ? "500px" : "auto");
}

Or, as I've also indicated, just use jQuery and adopt forum admin values for maximum attachment width and height.

That way you don't affect attachments, but maintain uniform image sizes throughout posts (including sigs).