Topic: Request: JS popup for images wider than forum width

I was wondering if this has already been done or if someone would like to write a mod that detects when an image is going to be compressed (wider than forum), and have the image be a link that will pop up a new page with the image uncompressed. I've seen this before on a phpbb forum which gave me the idea, I just don't have the experience with the code to do it myself.

It might even be nice if it wrote somewhere on the compressed image or maybe above it that says 'click on image for full size' or something.

Re: Request: JS popup for images wider than forum width

bump for some help smile

Re: Request: JS popup for images wider than forum width

one more bump for some help cool

Re: Request: JS popup for images wider than forum width

I've seen that mod out there for snitz.  I'm sure you could download the mods for the other bb's and add it into punbb's image bb code parser.

Re: Request: JS popup for images wider than forum width

well i found one that is for phpbb, but i wouldn't be able to convert it. if someone wants to, here is the code: (it would be greatly appreciated!)

## MOD Title: Post Image Size
## Files To Edit: 
##          includes/bbcode.php
##          admin/admin_board.php
##          templates/subSilver/bbcode.tpl
##          templates/subSilver/admin/board_config_body.tpl
##          language/lang_english/lang_main.php
##          language/lang_english/lang_admin.php
############################################################## 

# 
#-----[ SQL ]------------------------------------------ 
# 

INSERT INTO phpbb_config( config_name, config_value ) VALUES ( 'postimg_width', '800' );
INSERT INTO phpbb_config( config_name, config_value ) VALUES ( 'postimg_height', '600' );

# 
#-----[ OPEN ]------------------------------------------ 
# 

includes/bbcode.php

# 
#-----[ FIND ]------------------------------------------ 
# 

$bbcode_tpl = null;

# 
#-----[ AFTER, ADD ]------------------------------------------ 
# 

// mod img size add
function makeimgsize ( $width, $height ) 
{
    global $board_config;
    
    $size = '';
    
    // check for smallness
    if ( $width < $board_config['postimg_width'] && $height < $board_config['postimg_height'] )
    {
        return 'SMALL';
    }
    elseif ( $width > $height ) 
    {
        if ( $board_config['postimg_width'] < $width )
        {
            $size = 'width="' . $board_config['postimg_width'] . '"';
        }
    }else
    {
        if ( $board_config['postimg_height'] < $height )
        {
            $size = 'height="' . $board_config['postimg_height'] . '"';
        }
    }
    
    return $size;
}

function image_parse ( $post, $uid ) 
{
    global $board_config, $lang, $bbcode_tpl;

    preg_match_all( "/\[img(.*?):$uid\](.*?)\[\/img:$uid\]/i", $post, $matches);
    foreach ( $matches[0] as $i => $img ) 
    { 
        $stuff = $matches[1][$i];
        $stuff = explode( ':', $stuff );
        if ( count( $stuff ) != 4 )
        { // old image or something
            $post = preg_replace( "#\[img:$uid\]([^?].*?)\[/img:$uid\]#i", $bbcode_tpl['img'], $post );
        }
        switch($stuff[0]) 
        {
            case '=right': 
                $align = $lang['RIGHT']; 
                break;
            case '=center':
                $align = 'center';
                break;
            case '=left':
                default: 
                $align = $lang['LEFT']; 
            break; 
        }
        $width = $stuff[1];
        $height = $stuff[2];
        $size = makeimgsize( $width, $height );
        
        if ( $size != 'SMALL' )
        {
            $replace = $bbcode_tpl['thmbimg'];
            $seek = array( '{IMAGE}', '{WIDTH}', '{HEIGHT}', '{SIZE}', '{NOTICE}', '{ALIGN}' );
            $with = ( !empty( $size ) ) ? array( $matches[2][$i] , $width, $height, $size, $lang['postimg_clickme'], $align ) : array( $matches[2][$i] , $width, $height, $size, '', $align );
            $replace = str_replace( $seek, $with, $replace );
        }
        else
        {
            $replace = str_replace( '\1', $matches[2][$i], $bbcode_tpl['img'] );
        }
        $post = str_replace( $img, $replace, $post );
    }
        
    return $post;
}
// mod img size end

# 
#-----[ FIND ]------------------------------------------ 
# 

$patterns[] = "#\[img:$uid\]([^?].*?)\[/img:$uid\]#i";

# 
#-----[ BEFORE, ADD ]------------------------------------------ 
# 

// mod img size replace with call to image parsing function
$text = image_parse ( $text, $uid );

# 
#-----[ FIND ]------------------------------------------ 
# 

$text = preg_replace("#\[img\]

# 
#-----[ BEFORE, ADD ]------------------------------------------ 
# 

    // mod max img size changed the first pass thingo
    preg_match_all( "#\[(img.*?)\]((http|ftp|https|ftps)://)([^ \?&=\#\"\n\r\t<]*?(\.(jpg|jpeg|gif|png)))\[/img\]#sie", $text, $matches );
    // now we go through these matches and do what's needed
    foreach ( $matches[0] as $i => $m )
    {
        // easier use
        $tag = $matches[1][$i];
        $url1 = $matches[2][$i];
        $url2 = $matches[4][$i];
        
        // if we already tagged this one then we leave it be ;)
        preg_match( '#img.*?:(\d+):(\d+)#i', $tag, $match );
        if ( empty( $match ) )
        {
            // get the size so we can store it
            if ( !$size = @getimagesize( $url1 . $url2 ) )
            { // image will not get resized
                $width = '';
                $height = '';
            }
            else
            {
                $width = $size[0];
                $height = $size[1];
            }
        }
        else
        { // we already have the size
            $width = $match[1];
            $height = $match[2];
        }
        $tag = explode( ':', $tag ); // remove any possible left over : stuff
        $tag = $tag[0];
        // lastly we replace it within the text
        $text = str_replace( $m, '[' . $tag . ':' . $width . ':' . $height . ':' . $uid . ']' . $url1 . $url2 . '[/img:' . $uid . ']', $text );
    }

# 
#-----[ IN-LINE FIND ]------------------------------------------ 
# 

$text

# 
#-----[ IN-LINE BEFORE, ADD ]------------------------------------------ 
# 

//

# 
#-----[ AFTER, ADD ]------------------------------------------ 
# 

// end mod img size changes

# 
#-----[ OPEN ]------------------------------------------ 
# 

admin/admin_board.php

# 
#-----[ FIND ]------------------------------------------ 
# 

$namechange_no = ( !$new['allow_namechange'] ) ? "checked=\"checked\"" : "";

# 
#-----[ AFTER, ADD ]------------------------------------------ 
# 

// mod img size add
$postimg_width = $new['postimg_width'];
$postimg_height = $new['postimg_height'];
// mod img size end

# 
#-----[ FIND ]------------------------------------------ 
# 

"L_RESET" => $lang['Reset'], 

# 
#-----[ AFTER, ADD ]------------------------------------------ 
# 

// mod img size add
"L_POSTIMG_SIZE" => $lang['postimg_size'],
"POSTIMG_WIDTH" => $postimg_width,
"POSTIMG_HEIGHT" => $postimg_height,
// mod img size end

# 
#-----[ OPEN ]------------------------------------------ 
# 

templates/subSilver/bbcode.tpl

# 
#-----[ FIND ]------------------------------------------ 
# 

<!-- END email -->

# 
#-----[ AFTER, ADD ]------------------------------------------ 
# 

<!-- BEGIN thmbimg -->
<div align="{ALIGN}">
 <table border="0">
  <tr>
   <td><img src="{IMAGE}" align="center" border="0" {SIZE}  onclick="window.open( '{IMAGE}', 'imgpop',  'width={WIDTH},height={HEIGHT},status=no,toolbar=no,menubar=no' );return false" /></td>
  </tr>
  <tr>
   <td align="center" class="gensmall"><i>{NOTICE}</i></td>
  </tr>
 </table>
</div>
<!-- END thmbimg -->

# 
#-----[ OPEN ]------------------------------------------ 
# 

templates/subSilver/admin/board_config_body.tpl

# 
#-----[ FIND ]------------------------------------------ 
# 

    <tr>
        <td class="row1">{L_ENABLE_PRUNE}</td>
        <td class="row2"><input type="radio" name="prune_enable" value="1" {PRUNE_YES} /> {L_YES}  <input type="radio" name="prune_enable" value="0" {PRUNE_NO} /> {L_NO}</td>
    </tr>
    
# 
#-----[ AFTER, ADD ]------------------------------------------ 
# 

    <tr>
        <td class="row1">{L_POSTIMG_SIZE}</td>
        <td class="row2"><input type="text" size="5" maxlength="5" name="postimg_width" value="{POSTIMG_WIDTH}" /> X <input type="text" size="5" maxlength="5" name="postimg_height" value="{POSTIMG_HEIGHT}" /></td>
    </tr>

# 
#-----[ OPEN ]------------------------------------------ 
# 

language/lang_english/lang_main.php

# 
#-----[ FIND ]------------------------------------------ 
# 

?>

# 
#-----[ BEFORE, ADD ]------------------------------------------ 
# 

// mod img size add
$lang['postimg_clickme'] = 'Thumbnail, click to enlarge.';
    
# 
#-----[ OPEN ]------------------------------------------ 
# 

language/lang_english/lang_admin.php

# 
#-----[ FIND ]------------------------------------------ 
# 

?>

# 
#-----[ BEFORE, ADD ]------------------------------------------ 
# 

// mod img size add
$lang['postimg_size'] = 'Maximum size of images in posts';

# 
#-----[ SAVE/CLOSE ALL FILES ]------------------------------------------ 
# 
# EoM