Autor Tópico: [TUTORIAL] Inserindo imagem com auto resize.(800px para 1024px)  (Lida 7852 vezes)

PeDrO_gAbRiEl

  • Trade Count: (1)
  • Membro Ativo
  • ***
  • Mensagens: 1.614
  • Sexo: Masculino
Olá,

Conforme as regras do site, qualquer imagem postada diretamente no tópico deve ter no máximo 800px no lado maior.
Como este tamanho já está ficando pequeno para alguns monitores (19" ou mais), resolvi criar um tutorial que ensina a postar a foto dentro das regras, porem com um "link" para uma foto maior (1024px no lado maior), assim cada um visualiza a imagem conforme o tamanho do monitor e o gosto pessoal.

Lembrando que este tutorial é valido para fotos que estão armazenadas no flickr.

1° Passo: Faça o upload da imagem em tamanho original para o flickr.

2° Passo: Entre na página da foto e acesse a guia "compartilhar".


3º Passo: Acesse "Obter o HTML/BBCode"; selecione BBCode; tamanho grande ou 1024; copie o código.


4ºPasso: Este código será usado diretamente no tópico, porém com algumas alteraçãoes;

Código: [Selecionar]
[url=http://www.flickr.com/photos/pedro-gabriel/6930625769/][img]http://farm8.staticflickr.com/7202/6930625769_4cd9fa2858_b.jpg[/img][/url]
[url=http://www.flickr.com/photos/pedro-gabriel/6930625769/]DSC_8273[/url] por [url=http://www.flickr.com/people/pedro-gabriel/]PeDrO_gAbRiEl[/url], no Flickr

5° Passo: Na primeira linha retire a primeira parte até onde começa o código "img" e depois no final da primeira linha retire o "url".
Esta parte retirada é responsável por direcionar o usuário a página do flickr ao clicar na foto, mas não queremos isto.
Até aqui o código irá ficar assim:
Código: [Selecionar]
[img]http://farm8.staticflickr.com/7202/6930625769_4cd9fa2858_b.jpg[/img]
[url=http://www.flickr.com/photos/pedro-gabriel/6930625769/]DSC_8273[/url] por [url=http://www.flickr.com/people/pedro-gabriel/]PeDrO_gAbRiEl[/url], no Flickr

6° Passo: Agora iremos adicionar ao código qual tamanho de exebição queremos a foto (800px pelas regras do fórum).
Adicione "width=800" se a foto estiver na horizontal ou "height=800" se a foto estiver na vertical.

ficando assim:
Código: [Selecionar]
[img width=800]http://farm8.staticflickr.com/7202/6930625769_4cd9fa2858_b.jpg[/img]
[url=http://www.flickr.com/photos/pedro-gabriel/6930625769/]DSC_8273[/url] por [url=http://www.flickr.com/people/pedro-gabriel/]PeDrO_gAbRiEl[/url], no Flickr

7° Passo: Seu código está pronto; após fazer a postagem a foto ficará com 800px inicialmente, e se a pessoa clicar nela aumentará o tamanho p/ 1024px.
Não se esqueça de escrever "Clique na foto para aumentar a visualização".



Clique na foto para aumentar a visualização

DSC_8273 por PeDrO_gAbRiEl, no Flickr

« Última modificação: 09 de Março de 2012, 20:52:24 por pedro_raythz »
Equipamento: câmera+lente =)
Evite Acidentes, Faça de Propósito


C. Ferrari

  • Trade Count: (11)
  • Colaborador(a)
  • ****
  • Mensagens: 2.762
  • Sexo: Masculino
  • Em busca de conhecimento, sempre.
    • Trabalhos
Resposta #1 Online: 09 de Março de 2012, 00:14:43
Muito bom, Obrigado!


Manga

  • Trade Count: (0)
  • Conhecendo
  • *
  • Mensagens: 100
Resposta #2 Online: 09 de Março de 2012, 00:41:12
 :clap: :clap: :clap: :clap: :clap:


Só um detalhezinho: acho que você queria dizer "height=800"


PeDrO_gAbRiEl

  • Trade Count: (1)
  • Membro Ativo
  • ***
  • Mensagens: 1.614
  • Sexo: Masculino
Resposta #3 Online: 09 de Março de 2012, 07:27:44
:clap: :clap: :clap: :clap: :clap:


Só um detalhezinho: acho que você queria dizer "height=800"

isto.. :ok:
Equipamento: câmera+lente =)
Evite Acidentes, Faça de Propósito


Helena Bsb

  • Trade Count: (37)
  • Referência
  • *****
  • Mensagens: 6.076
Resposta #4 Online: 09 de Março de 2012, 09:20:46
Um detalhe que é BASTANTE importante, e que pra mim, tem mais importância do que o tamanho da foto, já que uma foto pode ser grande e leve:

"3.1. As imagens postadas diretamente nos tópicos poderão ter no máximo 800 pixels em seu lado maior e 500KB."

é importantíssimo se atentar a isso, pois não adianta colocar aqui uma foto de 5 MB de tamanho, com auto resize. Ela continuará pesadíssima, e deixando a rolagem da página leeeeenta....
« Última modificação: 09 de Março de 2012, 09:22:25 por Helena Bsb »


dimigobbo

  • Trade Count: (10)
  • Referência
  • *****
  • Mensagens: 5.698
  • Sexo: Masculino
    • Meu Flickr
Resposta #5 Online: 09 de Março de 2012, 09:36:01
 :clap: :clap: :ok:

O Luiz que vai gostar!

Vlw moçada!
"If your pictures aren't good enough, you're not close enough"

RTFM


PeDrO_gAbRiEl

  • Trade Count: (1)
  • Membro Ativo
  • ***
  • Mensagens: 1.614
  • Sexo: Masculino
Resposta #6 Online: 09 de Março de 2012, 12:41:48
Um detalhe que é BASTANTE importante, e que pra mim, tem mais importância do que o tamanho da foto, já que uma foto pode ser grande e leve:

"3.1. As imagens postadas diretamente nos tópicos poderão ter no máximo 800 pixels em seu lado maior e 500KB."

é importantíssimo se atentar a isso, pois não adianta colocar aqui uma foto de 5 MB de tamanho, com auto resize. Ela continuará pesadíssima, e deixando a rolagem da página leeeeenta....

sempre que é feito o upload para o flickr ele redimensiona a imagem.
Somente contas Pro ficam com o arquivo original o resto tem sua imagem redimensionada para o maximo de 1024px, se voce der uma olhada no tamanho de várias imagens com este tamanho no flickr vai notar que nenhuma passa de 1Mb.

Se você olhar esta foto que eu usei de exemplo irá notar que em 1024 ela tem 190Kb, sendo que quando fiz o upload ela tinha 4Mb.

abs pedro
« Última modificação: 09 de Março de 2012, 12:43:53 por PeDrO_gAbRiEl »
Equipamento: câmera+lente =)
Evite Acidentes, Faça de Propósito