1 Topic by wenzlerpaul (edited by wenzlerpaul 2006-02-10 08:01)

  • Registered: 2005-10-29
  • Posts: 18

Topic: Adding ImageShack Image uploader to your PunBB

Hi,

I was looking for a way to minimize my server load but again offer an easy way for people to upload and post image(s).  I was looking over some options and I came up with this.  I hope it you will like it guys.

First step, BACK UP! BACK UP! BACK UP!!! (hehe)

1. open post.php and locate (approx line 516)

if (!empty($checkboxes))
{

?>
            </div>

Add after....

            <div class="inform">
                <fieldset>
                    <legend>Upload Images using ImageShack(tm)</legend>
                    <div class="infldset">
                        <div class="rbox">
                        <iframe src="http://imageshack.us/iframe.php?txtcolor=111111&type=blank&size=30" scrolling="no" allowtransparency="true" frameborder="0" width="280" height="80">Update your browser for ImageShack.us!</iframe><br /><br />
                        Note: To include image on post, use the form above and after it is uploaded, choose option "<b>Hotlink for forums (1)</b>, copy and paste inside message box.
                        </div>
                    </div>
                </fieldset>
            </div>

Save file.

2. open viewtopic.php and locate (approx line 382)

<p><input type="submit" name="submit" tabindex="2" value="<?php echo $lang_common['Submit'] ?>" accesskey="s" /></p>

Add before...

            <div class="inform">
                <fieldset>
                    <legend>Upload Images using ImageShack(tm)</legend>
                    <div class="infldset">
                        <div class="rbox">
                        <iframe src="http://imageshack.us/iframe.php?txtcolor=111111&type=blank&size=30" scrolling="no" allowtransparency="true" frameborder="0" width="280" height="80">Update your browser for ImageShack.us!</iframe><br /><br />
                        Note: To include image on post, use the form above and after it is uploaded, choose option "<b>Hotlink for forums (1)</b>, copy and paste inside message box.
                        </div>
                    </div>
                </fieldset>
            </div>

Save and upload both files.

This will include a small box that allows users to upload images through ImageShack(tm) through your website.

I find this cool since it allows people to post images and likewise saving you lots of bandwidth because of images being hosted on another server.

I hope it helps.

you will be able to find samples from my PunBB project

Post a Reply
http://img70.imageshack.us/img70/4157/post3fq.th.jpg

Quick Post
http://img70.imageshack.us/img70/8245/quickpost2ol.th.jpg


I hope it helps.

Paul

  • Registered: 2005-12-13
  • Posts: 16

Re: Adding ImageShack Image uploader to your PunBB

Looks interesting, I'll give it shot over the weekend. smile

Cheers

Proud hoster of PunBB's UK download mirror!
  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: Adding ImageShack Image uploader to your PunBB

Cool smile

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Rickard's Website

4 Reply by wenzlerpaul (edited by wenzlerpaul 2006-02-10 18:47)

  • Registered: 2005-10-29
  • Posts: 18

Re: Adding ImageShack Image uploader to your PunBB

Another version of this Mod is the "ImageShack Uploader Toggle Mode"

This version show/hide the upload box when link is clicked, default is hidden... pretty cool...

First step is Backup! Backup! Backup!!!

1. open viewtopic.php locate the following

<?php

// Display quick post if enabled
if ($quickpost)
{

?>

Add after:

<script language="javascript"> 
<!-- 
var state = 'none'; 

function showhide(layer_ref) { 

if (state == 'block') { 
state = 'none'; 
} 
else { 
state = 'block'; 
} 
if (document.all) { //IS IE 4 or 5 (or 6 beta) 
eval( "document.all." + layer_ref + ".style.display = state"); 
} 
if (document.layers) { //IS NETSCAPE 4 or below 
document.layers[layer_ref].display = state; 
} 
if (document.getElementById &&!document.all) { 
hza = document.getElementById(layer_ref); 
hza.style.display = state; 
} 
} 
//--> 
</script>

2. locate 

                            <li><a href="help.php#smilies" onclick="window.open(this.href); return false;"><?php echo $lang_common['Smilies'] ?></a>: <?php echo ($pun_config['o_smilies'] == '1') ? $lang_common['on'] : $lang_common['off']; ?></li>

add after

                            <li><a href="javascript:void(0)" onclick="showhide('div1');">Toggle ImageShack(tm) Upload</a></li>

3. locate

<p><input type="submit" name="submit" tabindex="2" value="<?php echo $lang_common['Submit'] ?>" accesskey="s" /></p>

before add

        <div id="div1" style="display: none;">
            <div class="inform">
                <fieldset>
                    <legend>Upload Images using ImageShack(tm)</legend>
                    <div class="infldset">
                        <div class="rbox">
                        <iframe src="http://imageshack.us/iframe.php?txtcolor=111111&type=blank&size=30" scrolling="no" allowtransparency="true" frameborder="0" width="280" height="80">Update your browser for ImageShack.us!</iframe><br /><br />
                        Note: To include image on post, use the form above and after it is uploaded, choose option "<b>Hotlink for forums (1)</b>, copy and paste inside message box.
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>

save and upload...

////////////////////////////////////////

1. open post.php and locate

<div class="blockform">
    <h2><span><?php echo $action ?></span></h2>

before add

<script language="javascript"> 
<!-- 
var state = 'none'; 

function showhide(layer_ref) { 

if (state == 'block') { 
state = 'none'; 
} 
else { 
state = 'block'; 
} 
if (document.all) { //IS IE 4 or 5 (or 6 beta) 
eval( "document.all." + layer_ref + ".style.display = state"); 
} 
if (document.layers) { //IS NETSCAPE 4 or below 
document.layers[layer_ref].display = state; 
} 
if (document.getElementById &&!document.all) { 
hza = document.getElementById(layer_ref); 
hza.style.display = state; 
} 
} 
//--> 
</script>

2. locate 

                            <li><a href="help.php#smilies" onclick="window.open(this.href); return false;"><?php echo $lang_common['Smilies'] ?></a>: <?php echo ($pun_config['o_smilies'] == '1') ? $lang_common['on'] : $lang_common['off']; ?></li>

add after

                            <li><a href="javascript:void(0)" onclick="showhide('div1');">Toggle ImageShack(tm) Upload</a></li>

3. locate

if (!empty($checkboxes))
{

?>
            </div>

add after

        <div id="div1" style="display: none;">
            <div class="inform">
                <fieldset>
                    <legend>Upload Images using ImageShack(tm)</legend>
                    <div class="infldset">
                        <div class="rbox">
                        <iframe src="http://imageshack.us/iframe.php?txtcolor=111111&type=blank&size=30" scrolling="no" allowtransparency="true" frameborder="0" width="280" height="80">Update your browser for ImageShack.us!</iframe><br /><br />
                        Note: To include image on post, use the form above and after it is uploaded, choose option "<b>Hotlink for forums (1)</b>, copy and paste inside message box.
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>

This option allows you to toggle the ImageShack uploader, by default, it is hidden so it preserves the original look and will only appear/disappear when clicked....

I hope this one helps...

Paul

5 Reply by minis

  • Registered: 2006-01-21
  • Posts: 62

Re: Adding ImageShack Image uploader to your PunBB

Paul - Maybe you could give a site with this example to see how it works?

  • Registered: 2006-01-26
  • Posts: 16

Re: Adding ImageShack Image uploader to your PunBB

it works!
if u want u can test it on my board: HERE

7 Reply by minis (edited by minis 2006-02-19 16:22)

  • Registered: 2006-01-21
  • Posts: 62

Re: Adding ImageShack Image uploader to your PunBB

How to add this "toggle..." to edit page?

ok, i did this by my self smile