Topic: Imagem Upload Popup (Tinypic)

[Darkness_Black]

Imagem Upload Popup (Tinypic)

Bom galera como sei que a duvida de como por um popup upload de imagem no forum onde ficara no bbc não era só minha emtao resolvi traduzir o tutorial e trazer aqui pra voces, estou usando ele no meu forum e naum tive problema algum o mod esta perfeito ainda naum achei melhor.

Original English: http://www.simplemachines.org/community/index.php?topic=288169.0
Tradução Spanish: http://www.simplemachines.org/community/index.php?topic=296442.0

1) Baixar o arquivo HTML que esta anexo no fim deste Post.

2) Subir o arquivo HTML para a pasta raiz do seu forum via FTP (Dica Filezilla no baixaki) Ex: meusite.com/tinypic.htm.

3) Baixar a imagem do botão que esta em anexo no fim deste Post.

4) Subir a imagem na sua pasta de imagens do forum ou em qualquer outra pasta de imagens do forum via FTP.
Ficando assim: seutite.com/nome da pasta /uploadimage.gif.

Editar o Fixeiro


Abrir /Themes/seuThema ou defaut/Post.template.php

Encontre:

Code: [Select]

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

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

Insira antes:

Code: [Select]

echo '&nbsp;&nbsp;<a onclick="window.open(\'URL do arquivo html\',\'POPUP\',\'width=280,height=540,scrollbars=0\');return false;" href="#"><img src="URL da imagem do botão" border="0"></a>';
Obs: Note que neste arquivo ele pede pra voce inserir o url  da imagem e do html.

Screens:

Obrigado Galera façam bom proveito. No meu testei e esta a funcionar corretamente o mesmo consegui adaptar no bbc de resposta rapida e no bbc de assinaturas.
Segue abaixo os arquivos em anexo:

[arkanoidblue]

Aproveitando a deixa, segue codigo para traduzir para PT o idioma do tinyPic.

Abra seu arquivo tinypic.html com o word pad e troque o codigo interno :

Code: [Select]

<script type="text/javascript">
tinypic_layout = 'narrow';
tinypic_type = 'images';
tinypic_links = 'forum';
tinypic_language = 'en';
tinypic_search = 'false';
tinypic_autoload = false;
</script>
<script src="http://plugin.tinypic.com/j/plugin.js" type="text/javascript"></script>
Por esse abaixo.
(alterar para pt-pt caso queira)

Code: [Select]

<script type="text/javascript">
tinypic_layout = 'narrow';
tinypic_type = 'images';
tinypic_links = 'forum';
tinypic_language = 'pt-br';
tinypic_search = 'false';
tinypic_autoload = false;
</script>
<script src="http://plugin.tinypic.com/j/plugin.js" type="text/javascript"></script>
<input type="button" value="TinyPic Plugin" onclick="javascript:showTinypicPlugin();"/>

Note que foi inserido a função de abrir o popup com um botão, ao invez de abrir a pagina toda.

Verifique que foi add as funções:

input type="

e

onclick="

veja como é o codigo adicional:

Code: [Select]

<input type="button" value="TinyPic Plugin" onclick="javascript:showTinypicPlugin();"/>
Se quizer ele pronto.

É tão somente baixar o anexo e substituir seu html 

[Darkness_Black]

Vlw arka o arquivo agora esta upado no post agora quando baixarem jah estara em portugues.
Vlw pela força.

[Amendoim]

Mesmo muito bom..

Parabens darkness_black  e ao arkanoidblue pela breve tradução

Vou exprimentar, e ja digo algo!


EDIT- ja exprimentei, mas o problema e na ultima linha

Code: [Select]

echo '&nbsp;&nbsp;<a onclick="window.open(\'URL do arquivo html\',\'POPUP\',\'width=280,height=540,scrollbars=0\');return false;" href="#"><img src="URL da imagem do botão" border="0"></a>';
Aquele local do url é mais complicado..
Ou seja, eu pus o meu ficheiro html que vem em anexo no Public_Html, la dentro, e depois ponho assim,  "url do arquivo html" e ponho public_html/nomedoarquivo.html

Ate ai tudo bem, depois no forum aparece uma Cruz, que e a imagem nao esta sicronizada com o ficheiro, mas, funciona na mesma, eu clico na cruz e diz pagina nao encontrada :S

O que fiz de mal?

Obrigado!

[Darkness_Black]

Opa que bom que gostou e o arquivo traduzido do html jah esta em anexo boa sorte duvidas só postar aqui.

[Amendoim]

Editei a minha resposta acima com o meu problema..

Abraço!

[Amendoim]

Bem, relatando um novo problema..

COnsegui tudo bem, agora ja me consigo ligar ao pop-pup para fazer up das imagens, o problema agora e o botao, nao aparece, aparece uma Cruz como se nao tive-se imagem :S

[Darkness_Black]

Voce tem que upar a imagem uploadimage.gif em uma pasta qualquer do teu forum e no codigo onde diz url da imagem vc substitui pelo link da img que postou se naum pra ficar ainda mais facil faça assim:

upe ela na pasta defaut/images/uploadimage.gif

dai onde pede url da imagem ponha assim:

http://seu dominio/images/uploadimage.gif
e aparecerá lah por que isso é problema da imagem upada.

[arkanoidblue]

Bem, relatando um novo problema..

COnsegui tudo bem, agora ja me consigo ligar ao pop-pup para fazer up das imagens, o problema agora e o botao, nao aparece, aparece uma Cruz como se nao tive-se imagem :S

Usaste o anexo meu ou do darkness?

Veja que o codigo HTML do arquivo  esta aqui.

Code: [Select]

<p><span style="font-family: verdana; font-size: 7.5pt; color: e10000;">Depois do UPLOAD, simplesmente copie/cole o codigo na sua menssagem! (Deixe o tamanho Default ligado)</span></p>

<script type="text/javascript">
tinypic_layout = 'narrow';
tinypic_type = 'images';
tinypic_links = 'forum';
tinypic_language = 'pt-br';
tinypic_search = 'false';
tinypic_autoload = false;
</script>
<script src="http://plugin.tinypic.com/j/plugin.js" type="text/javascript"></script>
<input type="button" value="TinyPic Plugin" onclick="javascript:showTinypicPlugin();"/>
Edite-o com o WORDPAD e não com o NOTE PAD ou MS OFFICE.(verifique se seu arquivo tinypic.html está exatamente como indicado acima.

Traduzindo o codigo para refletir seu site:

Code: [Select]

echo '&nbsp;&nbsp;<a onclick="window.open(\'http://www.seusite/seuforum/tinypic.html\',\'POPUP\',\'width=280,height=540,scrollbars=0\');return false;" href="#"><img src="http://www.seusite/seuforum/images/bbc/uploadimage.gif" border="0"></a>';
Se seu forum estiver dentro de algum Diretório.

Geralmente diretorios, /forum ou /SMF

Code: [Select]

\'http://www.seusite.com/seuforum/tinypic.html\


Se seu forum estiver na raiz do servidor

Code: [Select]

\'http://www.seusite.com/tinypic.html\

Code: [Select]

<img src="http://www.seusite/seuforum/images/bbc/uploadimage.gif" border="0"></a>Use o diretorio do seu tema para enviar a IMG, pois assim ficará junto com os demais botoes do seu editor de postagens 


No aguardo de noticias.

[Amendoim]

Bem, o upload de imagem ja esta a funcionar, agora falta a imagem para clicarem..

e esta assim o meu endereço:

<img src="/public_html/Themes/dilbermc/images/bbc/uploadimage.gif

E ja tentei tambem assim: <img src="http://www.gamextuga.com/public_html/Themes/dilbermc/images/bbc/uploadimage.gif


E nunca aparece e imagem, nao estou a entender o que esta mal :S

[Darkness_Black]

Por que no teu caso public representa o seu dominio entao n precisaria por ele no link coloque assim:

http://www.gamextuga.com/Themes/dilbermc/images/bbc/uploadimage.gif

[Amendoim]

Por que no teu caso public representa o seu dominio entao n precisaria por ele no link coloque assim:

http://www.gamextuga.com/Themes/dilbermc/images/bbc/uploadimage.gif

Funcionou.. Obrigado!!

Aprovado o MOD manualmente...

[Darkness_Black]

Vlw 

[margarett]

Boa malha!

--> Índice

[Darkness_Black]

Opa mais uma minha vlw 

[Amendoim]

Olha, sempre que inicio o upload imagem, no meu forum (ja tenho esse metodo introduzido nele)

Abre uma janela a dizer

"Depois do UPLOAD, simplesmente copie/cole o codigo na sua menssagem! (Deixe o tamnho Default ligado)"

E um botao a dizer "tinik Plugin"..

Só depois de clicado aparece para fazer o upload da imagem, nao da para ser directamente? ou seja nao ser presiso clicar no botao para ir para a parte de escolher a imagem tamanho etc?
Quando aberto o upload de imagens, ser directamete?


Obrigado!

[margarett]

Pois, não sei, será a forma que o MOD tem de trabalhar...

Talvez só pedindo ao autor do MOD...

Nota: se instalares, por exemplo, a barra de ferramentas do imageshack no teu browser, passa a ser possível fazer upload de imagens  arrastando-as para a caixa de "postagem" directamente

Claro que só quem tenha instalado é que pode usar isso por não fazer parte do fórum, mas...

[Ederson Lima]

Estava analizando o documento "tinypic.html" e vi que o que chama a função do plugin é o botão, então o que fiz!!!

Declarei a função "javascript:showTinypicPlugin()" dentro da tag head e de quebra ainda pude adicionar um título para a janela!

Assim, essa janela já aparece sem a necessidade de clicar no botão.

Code: [Select]

<html>
<head>
<title>Tinypic Upload</title>
<script LANGUAGE="Javascript">
<--
function javascript:showTinypicPlugin() {
document.write("");
}
//-->
</script>
</head>
<body onLoad="javascript:showTinypicPlugin()">
<p><span style="font-family: verdana; font-size: 7.5pt; color: e10000;">Depois do UPLOAD, simplesmente copie/cole o codigo na sua menssagem! (Deixe o tamnho Default ligado)</span></p>

<script type="text/javascript">
tinypic_layout = 'narrow';
tinypic_type = 'images';
tinypic_links = 'forum';
tinypic_language = 'pt-br';
tinypic_search = 'false';
tinypic_autoload = false;
</script>
<script src="http://plugin.tinypic.com/j/plugin.js" type="text/javascript"></script>
</body>
</html>


[Darkness_Black]

Opa vlw boa resposta 

[Amendoim]

O plugin agora abre sem ser presiso clicar no botão,

Obrigado pela ajuda

Abraço

[Ederson Lima]

Opa, fico feliz por ter sido útil!!! 

Também coloquei no meu fórum, tá a funcionar perfeitamente!

[codezito]

Alguém me dá um help...

Onde encontrar ?

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

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

??

Já procurei no index.template do meu tema... e no post.template dentro da pasta default... Porém não consigo encontrar o code... Onde inserir ?

Valeu pela ajuda...

[Darkness_Black]

qual thema usas?

[codezito]

Gostaria de agradecer a ajuda de todos..

Acabei procurando um pouco mais e encontrei uma área semelhante..

Substitui e deu tudo certo!

Forte abraço!

[Darkness_Black]

Vlw precisando estamos aqui 

[Jumper™]

olá amigos
Coloquei a imagem em "/Themes/BlackRain117/images/portuguese-utf8"

Coloquei o html em "/public_html"

Acrescentei a instrução no Post.template, mas não me aparece o botão

Agradeço uma ajudinha

Tanks

[Ederson Lima]

Você indicou as urls certas do Arquivo HTML e do Botão??

Code: [Select]

echo '&nbsp;&nbsp;<a onclick="window.open(\'URL do arquivo html\',\'POPUP\',\'width=280,height=540,scrollbars=0\');return false;" href="#"><img src="URL da imagem do botão" border="0"></a>';

[Jumper™]

Olá amigo Ederson

Eu coloquei as urls, mas não sei se coloquei correcto


Eu fiz assim:

Code: [Select]

echo '&nbsp;&nbsp;<a onclick="window.open(\'www.megasom.biz\',\'POPUP\',\'width=280,height=540,scrollbars=0\');return false;" href="#"><img src="www.megasom.biz/Themes/default/images/portuguese-utf8/uploadimage.gif" border="0"></a>';

[margarett]

O "img src" não funciona sem o "http://" antes do "www"

[Jumper™]

Era mesmo isso que estava a faltar.

Obrigado amigo margarett

[Jumper™]

Cá vem o chato

Gostava que o redimensionar ficasse por defeito em "Website/Email (320x240) e que não fosse possível alterar.

Alguém sabe se é possível isto?

Obrigado

[margarett]

Code: [Select]

echo '&nbsp;&nbsp;<a onclick="window.open(\'www.megasom.biz\',\'POPUP\',\'width=320,height=240,scrollbars=0,status=no,menubar=no,resizable=no\');return false;" href="#"><img src="http://www.megasom.biz/Themes/default/images/portuguese-utf8/uploadimage.gif" border="0"></a>';
Vê assim

[Jumper™]

Isso é o tamanho do POPUP, já tinha experimentado, mas o que eu queria era o tamanho das imagens

[margarett]

Depois de partir aqui a carola durante um bocado, apercebi-me que o envio da mensagem é feito do lado do TP e que, por isso, não creio que dê para modificar, a não ser os parâmetros que estão lá.
Por isso, esquece o lixo que escrevi abaixo

A unica hipótese que vejo, e não sei se ele o aceita ou não, é colocar:

Code: [Select]

tinypic_resize = false;Mas aí terias de ter outra linha a indicar o tamanho Não sei mesmo...


Ah, isso

Dar TALVEZ dê... Mas o JS não é o meu forte...

Primeiro tens de criar um ficheiro chamado "plugin.js", e nele meter o código do ficheiro original:
http://plugin.tinypic.com/j/plugin.js

Depois tens de modificar o ficheiro tinypiuc.html para usar o teu ficheiro js (que deves meter algures no teu webspace) e não o do tinypic. Tipo:

Code: [Select]

<script src="http://plugin.tinypic.com/j/plugin.js" type="text/javascript"></script>Passa a:

Code: [Select]

<script src="http://www.OTEUFORUM.COM/plugin.js" type="text/javascript"></script>
Isto permite ter o código disponível localmente, para poder alterar à vontade...
Não creio que consigas alterar o layout do popup para sacar a parte do redimensionar. É a unica parte que me parece que não vais conseguir puxar para o teu lado...
Finalmente, no teu ficheiro JS, tens de descobrir o sítio onde é armazenado o tamanho... Eu penso que seja isto:

[Jumper™]

Agradeço na mesma o teu empenho.

Vou-me desenrrascando assim como está.

Um abraço

[Darkness_Black]

Isso n dá pra fazer mesmo só quem poderia fazer isso é o servidor TinyPic ele que é o dono do popup por isso se alguem pode mudar é ele tente entrar em contato pra ver no que dá 

[WoW[PT]]

Excelente tutorial, parabens 

[Darkness_Black]

 
Obrigado

[WoW[PT]]

Era brutal conseguíssemos um sistema similar mas para anexos. 

[Darkness_Black]

Não entendi poderia especificar melhor?

[WoW[PT]]

Não entendi poderia especificar melhor?

Anexos tipo ficheiros

[Darkness_Black]

Mas pra isso basta ativar o envio de fixeiros pelo proprio forum se ativa na admin e da permissoes para quem pode ou nao enviar fexeiros em anexo e tb quem pode ou não ver os fixeiros anexados

[WoW[PT]]

Mas pra isso basta ativar o envio de fixeiros pelo proprio forum se ativa na admin e da permissoes para quem pode ou nao enviar fexeiros em anexo e tb quem pode ou não ver os fixeiros anexados

Mas para quem tem pouco espaço no ftp dava um jeitão 

[Jonatas]

olá pessoal tudo bem!
Gostaria apenas de tirar uma dúvida.
Segui o tutorial conforme esse tópico e no internet explorer funcionou ... mas no mozila firefox não aparece nem a imagem do botão !!!
O que poderia estar acontecendo ?!!?!?!?!

[Costa]

Link para o forum e uma conta de teste?

[Darkness_Black]

Se fosse algum erro era pra não aparecer nem no IE mas jah que aparece no IE não sei ao certo o que pode ter ocorrido :S

[Amendoim]

Na versão 2.0 RC2 parece que estou tendo problemas.. a imagem aparece-me em cima do assunto :S

Nao consigo fazela aparecer a beira dos botoes BBCode..

[РØŦŦ€Ř]

Ola..
Não consigo encontrar

Code: [Select]

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

   // Now start printing all of the smileys.
   if (!empty($context['smileys']['postform']))
Meu tema é o Inferno 2.0 RC3.
Alguém poderia meu ajudar?
Agradeço desde já!

[Spectrum..!!]

Ola..
Não consigo encontrar

Code: [Select]

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

   // Now start printing all of the smileys.
   if (!empty($context['smileys']['postform']))
Meu tema é o Inferno 2.0 RC3.
Alguém poderia meu ajudar?
Agradeço desde já!

Não está conseguindo encontrar o código ou o arquivo (Post.template.php) ?

[РØŦŦ€Ř]

Não consigo encontrar o código no Post.template.php

[Spectrum..!!]

Não consigo encontrar o código no Post.template.php

hmmmmmm, estou olhando para isso...

[РØŦŦ€Ř]

Ok. Fico aguardando. Obrigado!

[РØŦŦ€Ř]

Encontrei!

Para 2.0 RC4 o correto seria procurar isto:

Code: (Procurar e colar acima) [Select]

echo '
<div id="bbcBox_message"></div>';
}

// What about smileys?
if (!empty($context['smileys']['postform']) || !empty($context['smileys']['popup']))
Apanhei bastante para colocar os caminhos corretos da URL e da Imagem.
Para que ninguem mais passe isso, este seria o caminho correto:

Code: [Select]

echo '&nbsp;&nbsp;<a onclick="window.open(\'http://www.SEU SITE.com/tinypic.html\',\'POPUP\',\'width=280,height=540,scrollbars=0\');return false;" href="#"><img src="http://www.SEU SITE.com/Themes/SEU TEMA/images/bbc/uploadimage.gif" border="0"></a>';
Muito obrigado.
Espero ter ajudado!

[Spectrum..!!]

Obrigado por informar amigo РØŦŦ€Ř.

abçs,

[Jumper™]

Boa noite.

Será que esta modificação funciona em SMF 2.0.2.

cumps

[Spectrum..!!]

Boa noite.

Será que esta modificação funciona em SMF 2.0.2.

cumps

Você pode instalar um fórum demo em seu computador e ver se funciona...

[Jumper™]

Você pode instalar um fórum demo em seu computador e ver se funciona...

Infelizmente não tenho conhecimentos suficientes para instalar um forum no meu computador   mas vou ler um pouco souber o assunto.

thanks

[Spectrum..!!]

Você pode instalar um fórum demo em seu computador e ver se funciona...

Infelizmente não tenho conhecimentos suficientes para instalar um forum no meu computador   mas vou ler um pouco souber o assunto.

thanks

Não há muito segredo, seguindo os passos com cuidado e sem pressa você consegue, o Tuto é este --> http://www.simplemachines.org/community/index.php?topic=322179.0