Simple Machines Community Forum

I disabled all attachments on board because the only thing my members upload are images. So instead of using my space on my server, I decided to let members use tinypic without ever leaving the post page! When users click the button that says "upload image" a popup shows with an upload form. Then gives them the bbcode to insert the image in their message.

---

Step 1: Download the attached html file at the bottom of this post.

Step 2: Upload that html file to a folder of your choice on your server (I use my root. Example: mysite.com/tinypic.html)

Step 3: Download the attached image button at the bottom of this post.

Step 4: Upload the image button to whatever image folder on your site that you want.

Open /Themes/YourTheme/Post.template.php

Find:

echo '
</td>
</tr>';
}

// Now start printing all of the smileys.
if (!empty($context['smileys']['postform']))

Add before:

echo '&nbsp;&nbsp;<a onclick="window.open(\'URL FOR YOUR TINYPIC HTML FILE HERE\',\'POPUP\',\'width=280,height=540,scrollbars=0\');return false;" href="#"><img src="URL FOR THE IMAGE BUTTON HERE" border="0"></a>';

Don't forget to update the above code with your own URL's for tinypic.html and for your image button! It should create a nice popup on the post page, and your users never have to leave your site to host an image.


Screenshots:

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi39.tinypic.com%2F65og2h.gif&hash=4af0ce2004e98c53ab3384d74473cfbddadc14d3) (http://i39.tinypic.com/65og2h.gif)


(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi44.tinypic.com%2F2wp4cgk.gif&hash=4a5ce7ab6fe4dfab3ae5f5d6bd070080d6881cf6) (http://i44.tinypic.com/2wp4cgk.gif)


(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi39.tinypic.com%2F2dl273l.gif&hash=631a4e5d17f9a30936a26d0cf2930ce86fc5b47d) (http://i39.tinypic.com/2dl273l.gif)

Pretty nice tip :)
Do you want me to move this to Tips and Tricks (http://www.simplemachines.org/community/index.php?board=72.0)?

Quote from: Nas on January 25, 2009, 04:44:23 AM
Pretty nice tip :)
Do you want me to move this to Tips and Tricks (http://www.simplemachines.org/community/index.php?board=72.0)?

Be my guest!
:)

i have to say, it does work. thanks you.

Pretty nice tip
thanks you.

Thank you, i translate and share (with your name) my language board. http://www.simplemachines.org/community/index.php?topic=289634.0. is this np?

Quote from: Özgür´ on January 31, 2009, 02:25:43 PM
Thank you, i translate and share (with your name) my language board. http://www.simplemachines.org/community/index.php?topic=289634.0. is this np?

That's cool. no problem :)

simply great i love this

Hell Yeah!!! You rock buddy, everything is working fine. Any chance of automatically inserting the code after upload. :P

works fine

Quote from: SwapsRulez on February 01, 2009, 10:27:36 PM
Hell Yeah!!! You rock buddy, everything is working fine. Any chance of automatically inserting the code after upload. :P

this would be very tricky - i hope for it

Thanks!!! i translate (with credits) in spanish board.
http://www.simplemachines.org/community/index.php?topic=296442.0

Baiis!

thanks  for  sharing  tips  here

very useful thanks a lot!

It's work. thx

Very nice brandonroy.

gud job :)

i have used :)

many thank brandonroy :)

thanks brandonroy it very useful.

Where is the post.template at?

hi demonsmasher, tinypic mod is available in mod site, search it

thanks.

I found the post. temp.

nice :D

Is this different than the TinyPic mod mentioned on the thread below?

I posted this concern on the thread for that mod here:

http://www.simplemachines.org/community/index.php?topic=314047.msg2139031#msg2139031 (http://www.simplemachines.org/community/index.php?topic=314047.msg2139031#msg2139031)

but the threadstarter seems to have abandoned the thread.   

If I use your downloads and coding, do I need to remove that TinyPic mod, first and will using your version eliminate the issue seen on the two screenshots I've posted on the thread I referenced above?

Thanks to brandonroy or to anyone else who can answer this. 

gbsothere, I don't know about that other Tinypic mod and I haven't seen it in action - But you shouldn't have a problem with my version!

If you do use mine, there's no need for the one you have installed, so uninstall it if you do!

Quote from: brandonroy on July 02, 2009, 03:18:11 PM
gbsothere, I don't know about that other Tinypic mod and I haven't seen it in action - But you shouldn't have a problem with my version!

If you do use mine, there's no need for the one you have installed, so uninstall it if you do!

Thanks so much, brandonroy.  The other one is a bit glitchy (as you might have seen on that link I gave) and I believe that yours might just be the fix I'm looking for. 

*off to make it happen*

Thanks, again.

It works great, brandonroy, so much less problematic than the one I had.  Thanks!  :)

Any chance of automatically inserting the code after upload?

Quote from: Shadow1243 on July 05, 2009, 10:49:11 AM
Any chance of automatically inserting the code after upload?

Yeah It will be better,
Any Chance?

i'm new at this and kinda confused... Please help: where did i go wrong. i am using SMF 1.1.9. thank you joe  :'(

echo '<img src="', $settings['images_url'], '/bbc/divider.gif" alt="|" style="margin: 0 3px 0 3px;" />';
            $found_button = false;
         }
      }
        echo '&nbsp;&nbsp;<a onclick="window.open(\'http://hotrodgossip.org/tinypic.html\',\'POPUP\',\'width=280,height=540,scrollbars=0\');return false;" href="#"><img src="http://hotrodgossip.org/memberimages/uploadimage.gif" border="0"></a>';
      echo '
            </td>
         </tr>';
   }

   // Now start printing all of the smileys.
   if (!empty($context['smileys']['postform']))

Joe, I don't see your forum showing up in your links, just your main link.  For instance, if your forum directory is "smf" then that first link should be 'http://hotrodgossip.org/smf/tinypic.html\ and, again, if your forum directory is "smf" and say, for instance, you're using the default theme, then the next link to your image will be
<img src="http://hotrodgossip.org/smf/Themes/default/images/uploadimage.gif"

tinypic.html should be placed in smf's root directory, not hotrodgossips.org's root directory and your link should point to that.  uploadimage.gif should be placed in your theme's image folder and the link should point to that.  And, of course, Post.template.php should be put in your theme's directory.

Example:  smf---->tinypic.html
Example:  smf---->Themes--->default---->images---->uploadimage.gif
Example:  smf---->Themes---->default---->Post.template.php

(You'd have to change all that to the name of your forum's directory if it's not "smf" and to your own theme if it's not "default".)

Do you not have your forum in separate directory (like smf)?

gbsothere -thank you very much!
I have a lot to learn but it is fun when i make a ton of mistakes then wyolla~ it works, lol.
I appreciate your help and will post back the results. I'm going to give it a shot! thanks again joe  :)

Sorry for being such a putz but it would be nice if i could this this mod on my forum. I think i have everything in the correct place but the image button does not show in the post box. Maybe i didnot post the php code in the correct place???
i would appreciate any additional help

I'm sitting here staring at it, Joe and it looks as if everything's exactly where it should be.  Your links look good, your tinypic.html is in smf's root directory, Post.template.php looks parsed correctly and is in the default folder, uploadimage.gif is in default's images folder.   *stumped* 

Here is the link for your image and, as you can see, it's there:

http://hotrodgossip.org/simplemachinesforum/Themes/default/images/uploadimage.gif (http://hotrodgossip.org/simplemachinesforum/Themes/default/images/uploadimage.gif)

This is what it looks like in the reply area (different forums look different, but the image, itself, looks like this):  (https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwhereikeepmystuff.com%2Fup.jpg&hash=46722276aed725f2f7b632b3d424dc92319699e8)


I would suggest completely clearing the cache in your browser or even trying it in a different browser to see if that changes anything.  If not, then, hopefully, someone will come by with an "aha!" moment.    I hope this is resolved for you, Joe, because it really is a good mod and your posters will enjoy it.

gbsothere i appreciate your help. Normally i use Firefox, so i tried IE -the button is just not there maybe the mod does not work with version 1.1.9.

i can paste the http://hotrodgossip.org/simplemachinesforum/tinypic.html in my browser and up comes the Tinypic box, even uploads a pic and the code works in a post -the mod just doesn't show up in my forum.

thank you again, joe

Anyone else have and solutions or reason why i can't get this mod to work?

I have 1.1.9., Joe, and it works well for me....   I tell you, I'm really stumped.  It may end up being something so obvious that we'll both feel like dummies.  *grin*

The parsing looks fine to me.  Unless you have other mods that use Post.template.php and may be interfering, I can't think why it wouldn't work.  You might get a fresh copy of Post.template.php from the default folder of the smf zip that you downloaded when you installed your forum (or upgraded to 1.1.9) and try the parse again on a clean file, then upload it to your Theme/default folder to see if that makes a difference.

Normally, I'd ask if you tried the Package Manager to install it, but this is simply a coding tip that brandonroy supplied, it didn't come with a zip file.

Good luck with it, Joe!

Thanks and it does work in smf 1.1.10.

I have edited as you say. So it should work with 1.1.9 version. You can see mine working at: http://www.liveatdhaka.com

Though I placed the button image in the tp-image folder, but if one can input the path correctly in the post template, then it should work for all versions of SMF .

A great feature would be if user could select various host to host the image. I think you understand not only tinypic.com but others like imageshack and etc.

Again thanks for a nice and great idea.

nice and simply great

I've found a way to make this work with RC1.2, although I don't like where the button is landing so if someone smarter than I would show me where to make a better choice, that would be great.   :)

In RC1.2, Themes/Post.template.php I found:

{
echo '
<tr>
<td align="right"></td>
<td valign="middle">
', template_control_richedit($context['post_box_name'], 'bbc'), '
</td>
</tr>';



And added AFTER:

echo '&nbsp;&nbsp;<a onclick="window.open(\'URL FOR YOUR TINYPIC HTML FILE HERE\',\'POPUP\',\'width=280,height=540,scrollbars=0\');return false;" href="#"><img src="URL FOR THE IMAGE BUTTON HERE" border="0"></a>';



The button is landing up at the top left of the BBC field, just above "Subject": but, hey, it works.   :D

Any update on this?

No.  I've been waiting on you to get here.   :D

Can you screenshot the button placement?

Sure, and thanks!

In 1.1.10, the Upload button is placed just to the right of the BBC buttons and just above the smilies:

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwhereitestmystuff.com%2Fimages%2F1xupload.jpg&hash=4a85b066d9871b2cf1e296415377d7635dd3dfe3)


But in 2.x, it's located above the subject line.  I can live with it, but others may prefer it to be similar to 1.1.10.  Try as I might, I can't seem to land it there. 

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwhereitestmystuff.com%2Fimages%2F2xupload.jpg&hash=1fb8e5ab37fd2ac67d0eada39b0db09c371171dc)

Ok, if you will post all the edits you are using then I can try to test it out and see if can come up with a fix. I know some of the edits may already be in this topic but I have a lot going on today and it will be easier to answer your question if I get the exact edits you have made for this (including any mods you may have installed along with this to add this to the forum).

Thanks for checking it out, Tyrsson and absolutely no hurry, at all.   :)

In RC1.2, Themes/Post.template.php I found:

{
echo '
<tr>
<td align="right"></td>
<td valign="middle">
', template_control_richedit($context['post_box_name'], 'bbc'), '
</td>
</tr>';



And added AFTER:

echo '&nbsp;&nbsp;<a onclick="window.open(\'URL FOR YOUR TINYPIC HTML FILE HERE\',\'POPUP\',\'width=280,height=540,scrollbars=0\');return false;" href="#"><img src="URL FOR THE IMAGE BUTTON HERE" border="0"></a>';

(I placed my own url for the tinypic.html file and the image in this code.)

On the first page/post of this thread, there is also the tinypic.html file to place in the forum's root and the uploadimage.gif to put in Themes/(theme)/images.  (I use default). 

Most of these mods were added after this TinyPic Tip but none of them use the Post.template.php.

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwhereikeepmystuff.com%2Fmodslist.jpg&hash=2cf86766707a67f686041a2ed03d1a67c4adc96f)

First of all i would like to thank the author of this trick ;) and gbsothere for porting it to smf 2.0

I think i did fix it on smf 2.0 RC1.2 :

In Post.template.php :

Find :

{
echo '
<tr>
<td align="right"></td>
<td valign="middle">
', template_control_richedit($context['post_box_name'], 'bbc'), '
</td>
</tr>';
}

And add after :

{
echo '
<tr>
<td align="right"></td>
<td valign="middle">
<a onclick="window.open(\'URL OF TINYPIC.HTML\',\'POPUP\',\'width=280,height=540,scrollbars=0\');return false;" href="#"><img src="URL OF THE GIF HERE" border="0"></a></td>
</tr>';
}


bombasa, it works beautifully and thanks so much for posting it.

:)


(Note for new viewers:  Bombasa's code is for 2.0.  The code for 1.x is found on the first post but the code alone isn't enough, you must download the attached tinypic.html file and uploadimage.gif.)

I added this like bombasa showed but only his is for 2.0 RC1.2 and I am on RC2. It works on RC2 only problem is that the button is placed right next to the Post and Preview buttons. I am wondering if somebody can fix it so the button can be right next to the smileys again? Thank You!

really great effort.

thanks for this.

Does anybody know how to make this work for 2.0 RC2? Please if you do then please tell us  :)

Finally !!! I did it !

I managed to get it working with the help of this awsome MOD (http://custom.simplemachines.org/mods/index.php?mod=1862)

Well to apply the hack on 2.0 RC2, you should do the following :

Find : /Themes/default/GenericControls.template.php

Find :

<textarea class="editor" name="', $editor_id, '" id="', $editor_id, '" rows="', $editor_context['rows'], '" cols="', $editor_context['columns'], '" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onchange="storeCaret(this);" tabindex="', $context['tabindex']++, '" style="', $context['browser']['is_ie8'] ? 'max-width: ' . $editor_context['width'] . '; min-width: ' . $editor_context['width'] : 'width: ' . $editor_context['width'], '; height: ', $editor_context['height'], ';', isset($context['post_error']['no_message']) || isset($context['post_error']['long_message']) ? 'border: 1px solid red;' : '', '">', $editor_context['value'], '</textarea>

Add after :

<div>
<a onclick="window.open(\'url of html file\',\'POPUP\',\'width=280,height=540,scrollbars=0\');return false;" href="#"><img src="url of img file" border="0">
</div>

It should work

Edit : the new code position should prevent the popup window from being accessed while you click on the text area.

Quote from: bombasa on November 30, 2009, 11:05:10 AM
Finally !!! I did it !

I managed to get it working with the help of this awsome MOD (http://custom.simplemachines.org/mods/index.php?mod=1862)

Well to apply the hack on 2.0 RC2, you should do the following :

Find : /Themes/default/GenericControls.template.php

Find :

Code Select Expand

<textarea class="editor" name="', $editor_id, '" id="', $editor_id, '" rows="', $editor_context['rows'], '" cols="', $editor_context['columns'], '" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onchange="storeCaret(this);" tabindex="', $context['tabindex']++, '" style="', $context['browser']['is_ie8'] ? 'max-width: ' . $editor_context['width'] . '; min-width: ' . $editor_context['width'] : 'width: ' . $editor_context['width'], '; height: ', $editor_context['height'], ';', isset($context['post_error']['no_message']) || isset($context['post_error']['long_message']) ? 'border: 1px solid red;' : '', '">', $editor_context['value'], '</textarea>

Add after :

Code Select Expand

<div>
<a onclick="window.open(\'url of html file\',\'POPUP\',\'width=280,height=540,scrollbars=0\');return false;" href="#"><img src="url of img file" border="0">
</div>

It should work

Edit : the new code position should prevent the popup window from being accessed while you click on the text area.

bro can u tell where will the button will appear to upload pics ?

It should be like that

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi48.tinypic.com%2Fjf9ile.png&hash=07d40e5afd352c3122025b0aba681bb3bd4c22bc)

This is still a temporary fix, if anyone has a better one, he can post it there.

bro no such icon for me


(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi47.tinypic.com%2F8vqiwj.jpg&hash=c77a67ceccfea553def946585975068638623a1c)

You should upload the uploadimage.gif and tinypic.html from the first post : http://www.simplemachines.org/community/index.php?topic=288169.msg1894568#msg1894568 to your host then change the "url of html file" and "url of img file" with the current address of these files.

it worked .... thank you  :D thanx alot  :)

i just found a bug ...... after implementing this site is unable to send pm's to users ...

plz see the pic below


(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi48.tinypic.com%2F5bs7qg.jpg&hash=eb4a5f536e06b18ec3093127d5bcbece8b4f50b9)

bump  ::)

Quote from: sid2varun on December 07, 2009, 01:49:57 AM
i just found a bug ...... after implementing this site is unable to send pm's to users ...

plz see the pic below


(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi48.tinypic.com%2F5bs7qg.jpg&hash=eb4a5f536e06b18ec3093127d5bcbece8b4f50b9)

hasn't anyone faced the prob as i have faced ???

Is it possible to modify the code so we can control what "resize" options are available to the users?

Still working?

Made it working at last  ;D

open

/themes/default/post.template.php

Find:

// Finally, the submit buttons.


Add Before:

echo '<div>
      <a onclick="window.open(\'url of html file\',\'POPUP\',\'width=280,height=540,scrollbars=0\');return false;" href="#"><img

src="url of img file" border="0"></a>
</div>';

http://www.simplemachines.org/community/index.php?topic=288169.msg1894568#msg1894568 << get images from 1st post

i've tested on RC2 Default curve theme n its working absolutely fine ....

i check Private message problem also n it's also vanished ;)

like in tinypicu must have pic on ur pc to be uploaded

but on imageshack site there is option to give them any image link on web ... they will upload it themselves n give u imageshack link .....

so u dont have to do extra work to save the pic to ur pc first n then upload ....

Hope i was able to express myself this time properly ...

so i want imagehack.us instead of tinypic.com

for that i got 2 scripts also

http://ezbitz.com/tag/imageshack/
http://elliottback.com/wp/using-the-imageshack-xml-api/

i tried to use Ist site script in html file
n second one in js file

but nothing worked n im all confused right now...

can some one tell me a nice elaborated solution for this...

thanx in advance ;)

bookmark!

How can I integrate this into a quick reply?

Just noticed this, I will use, thanks

Thank you.... This is great!

i just love it. "Simplicity is technology" yeah as Joker said can we have this changed to Imageshack...

but i can live with this

working on imageshack thing these days ;) , hope one day can get it working

Quote from: Joker™ on August 04, 2010, 03:55:59 AM
working on imageshack thing these days ;) , hope one day can get it working

Check my Simple ImageShack mod
http://custom.simplemachines.org/mods/index.php?mod=134

The upcoming v4 will also feature 'auto-insert/insert-at-cursor', mark image private and resize.

-Rik©

ps transloading will be added too in due time...

Joker™ Great. thanks.

got this working on my SMF 1.1.11 and SMF 2 RC3

had the PM prob and fixed it too...

will see if we could put this into a mod in future.

if you need any help lemme know

This is a great tip, well done.

Quote from: Rik© on August 04, 2010, 04:29:46 AM

Quote from: Joker™ on August 04, 2010, 03:55:59 AM
working on imageshack thing these days ;) , hope one day can get it working

Check my Simple ImageShack mod
http://custom.simplemachines.org/mods/index.php?mod=134

The upcoming v4 will also feature 'auto-insert/insert-at-cursor', mark image private and resize.

-Rik©

ps transloading will be added too in due time...

hey Rik,

Nice mod. a suggestion :), remove all those other links and make it present only the forum code, so that it would be really easy for users, and also if u could make it auto insert the code that would be very nice.

cheers!

PS: i have a server error displayed when trying to use this mod. may be it clashes with other mods.

Quote from: Dharshan on August 06, 2010, 12:07:25 AM
hey Rik,

Nice mod. a suggestion :), remove all those other links and make it present only the forum code, so that it would be really easy for users, and also if u could make it auto insert the code that would be very nice.

cheers!

PS: i have a server error displayed when trying to use this mod. may be it clashes with other mods.

Which error? (error log)
Check the sis folder permission, should be 755....

-Rik©

ps With SIS4 you can select which 'links' to show.

Quote from: Joker™ on February 05, 2010, 07:51:23 AM
Made it working at last  ;D

open

/themes/default/post.template.php

Find:

Code Select Expand

// Finally, the submit buttons.


Add Before:

Code Select Expand

echo '<div>
      <a onclick="window.open(\'url of html file\',\'POPUP\',\'width=280,height=540,scrollbars=0\');return false;" href="#"><img

src="url of img file" border="0"></a>
</div>';

http://www.simplemachines.org/community/index.php?topic=288169.msg1894568#msg1894568 << get images from 1st post

i've tested on RC2 Default curve theme n its working absolutely fine ....

i check Private message problem also n it's also vanished ;)

works grand in 2.0.3

slightly funkier button  for those that like funky
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi36.tinypic.com%2F2yll46r.png&hash=c60d6df69998e5dec938ef596d995d44e2317bd3)

still working  ;D

It would be possible to upload the images to a specific user account? So do not be delete in the future

Thank you

Quote from: foropimiento on April 23, 2014, 03:51:36 AM
still working  ;D

It would be possible to upload the images to a specific user account? So do not be delete in the future

Thank you

• If you mean uploading them to a tynipic account it would be enough to login to tynipic and then upload the image because it will be saved among "yuor images".
• If you mean uploading them to an smf account i think posting them as attachments would be perfect but if you have a huge forum and everyone posts attachments you will get a lot of server load for that.

P.s.: Actually no need of editing files manually.. Just install this mod (http://custom.simplemachines.org/mods/index.php?mod=1862) that does the same thing without even opening another tab, it uses a javascript function and it still works on my smf 2.0.7

Post.template.php is not available in the template im using. for example: vVide by webtiryaki

how to edit in this template?