Como colocar imagens no WordPress?

O WordPress é um sistema gerenciador de conteúdo que consegue ser extremamente poderoso e ainda assim muito fácil de usar, no entanto é normal que os novos usuários se sintam perdidos enquanto não entendem a sua interface, a forma de usá-lo. Por isso decidi fazer alguns artigos explicando algumas das atividades mais comuns.

Enviando fotos para o site

Normalmente as fotos que você quer publicar no seu post (artigo) ou page (página) estarão em seu computador. Para usá-las você terá que enviá-las para o seu site.

Primeiro entre na tela de edição de post ou page:

Imagem representando o editor de textos do WordPress
Editor de textos do WordPress

O botão para inserir imagens está acima da barra de ícones, logo à direita do texto Upload/Insert. Na imagem acima eu deixei o mouse sobre o ícone para fazer aparecer o texto de ajuda “Add an image” que você vê se sobrepondo à barra de ícones.

Ao clicar no botão a tela a seguir aparecerá sobre o post ou página sendo escrito. Essa tela é um centro de atividades de tudo que você pode fazer com imagens: enviar para o site, definir suas características, buscar imagens que já foram enviadas para o site, inserir imagens uma a uma ou em grupo.

Imagem da janela para seleção de imagem a enviar
Escolha a imagem

Ao clicar no botão “Select files” será aberto o programa do seu sistema operacional (Windows, MacOS, Linux) que permite navegar pelos arquivos do seu HD. Você pode selecionar várias fotos usando o botão CONTROL (Comand no Mac) ou o SHIFT.

Depois que você selecionar as fotos e clicar em Ok elas serão enviadas para o seu site. Observe enquanto o WordPress envia as fotos e faz o processo de “crushing” que consiste simplesmente em criar três versões das fotos em tamanhos diferentes. Geralmente é melhor usar o tamanho médio ou pequeno para que o artigo carregue rapidamente mesmo em celulares.

Quando o upload das fotos terminar a tela estará como essa:

Imagens do post

Essa, a propósito, é a imagem em tamanho médio. Clique nela para ver no tamanho original.

Clicando no link “Show” que aparece do lado direito você pode ver os detalhes da foto como:

  • Title: Importante. Ele é usado pelo Google para indexar suas fotos
  • Alternate Text: deve ter uma descrição para quem é cego. Esse texto é lido pelos programas especiais para eles.
  • Caption: é o texto que aparece sob a foto como o texto “Imagens do Post” sob a imagem acima
  • Description: Importante também para a indexação do Google e outros buscadores. É o texto que ele mostrará associado à foto

Os demais campos são para definir o alinhamento da foto ao ser inserida no post ou page e a versão (pequena, média ou full size) que deve ser usada. A tela abaixo mostra esses detalhes:

Captura de tela com os detalhes de uma imagem
Detalhes da imagem

As imagens que você acaba de enviar para o site são automaticamente associadas a esse post ou página que você está escrevendo e ficam sendo sua “Gallery” de imagens. Observe que na parte superior dessa janela que abriu quando clicamos em “Add an image” tem as opções “From Computer”, “From URL”, “Gallery” e “Media Library”. Basta clicar em “Gallery” para ver a tela abaixo:

Visualização da galeria de imagens de um post
Imagens do post

Note que essa tela lhe permite inserir todas as fotos da galeria com um único clique (o botão não está visível na imagem acima, mas fica logo abaixo de “Gallery columms”). Veja abaixo como ficam as imagens inseridas dessa forma:

E finalmente, podemos inserir imagens que já tenham sido enviadas para o site antes, basta ir na última opção dessa janela, “Media Library” A imagem está a seguir:

Imagem da listagem do banco de mídia do site
Banco de mídia

Você notará que nessa tela há a possibilidade de filtrar as fotos por data de envio ou por texto. Por isso é importante definir bem os detalhes (Title, caption etc.) ao enviar cada imagem para o site: para ficar mais fácil localizá-las para usar no futuro.

Caso você queira usar imagens da sua Media Library para fazer uma galeria como a que mostrei logo acima (com todas as imagens inseridas com um só clique) você terá que recorrer a um artifício:

  1. Insira as fotos que vai querer uma a uma: isso as fará passar a fazer parte da galeria de imagens desse post
  2. Apague todas as imagens do post. Elas continuarão fazendo parte da galeria dele
  3. Insira a galeria normalmente como mostrei mais acima.

Esse post está longe de esgotar todos os recursos com fotos disponíveis no WordPress, mas deve atender às necessidades de 90% dos casos.

27 thoughts on “Como colocar imagens no WordPress?”

  1. E existe alguma maneira de inserir todas as fotos já “upadas” de uma vez? Em posts com muitas imagens, é extremamente cansativo ter que ficar inserindo uma a uma no post.

    obs.: As galerias não resolvem, visto que eu gostaria que elas tivessem tamanho real.

    Se puder ajudar, agradeço. Abs

    1. Creio que você consegue isso com um plugin como o NextGen, mas terá que tomar o cuidado de subir as imagens em um tamanho que não quebrem o design do site ao serem exibidas no tamanho original.

  2. Olá, no meu site tem trabalhos recentes, aonde eu escrevo um texto sobre um cliente e depois gostaria de colocar as fotos referentes a esse trabalho. Fiz como você explicou e deu certo…mas agora tenho um novo cliente, escrevi o texto e quando vou colocar as fotos, elas se misturam com as fotos do primeiro cliente, ele não cria uma nova galeria de fotos e sim continua a anterior. Tem como eu colocar outras galerias na mesma página cada uma com as fotos relativas a um cliente?

    1. Você está fazendo várias galerias dentro de um mesmo artigo ou página é isso?

      O ideal seria criar um artigo para cada cliente.

      Creio que, para fazer o que você quer seria necessário instalar um plugin como o NextGen Gallery que oferece um gerenciamento de galerias mais sofisticado.

    1. Para colocar imagens na barra lateral você tem duas opções:
      1- Usar os widgets se o template que você usa for moderno e tiver suporte para eles;
      2- Editar diretamente o arquivo php que constrói a sidebar.

      Em ambos os casos você terá que inserir o código html para exibir a imagem.

      Há uma terceira opção que é usar um pugin como o NextGen que serve para fazer galerias de imagens e tem widgets para inserir imagens na barra lateral.

      Tem gente que distribui as imagens do post lateralmente ao lado do texto e o editor de posts do WordPress não suporta isso infelizmente.

      Nesse caso a solução é inserir um código html dentro do próprio post para criar uma div lateral onde as imagens serão exibidas.

      Talvez haja soluções melhores que um webdesigner conheça, essas são as que me passam pela cabeça.

    1. Tem as opções none (nenhum alinhamento específico), left (esquerda), center (centro) e right (direita). É só clicar na desejada antes de clicar em inserir.

  3. Olá, desde hoje não consigo mais carregar fotos. Eu fazia desta maneira que vc explicou, mas agora o sistema mudou. Você sabe como carregar fotos no sistema novo?

    Obrigada!

    1. Olá,

      No sistema novo tem um ícone logo acima da área onde escrevemos o post que permite inserir fotos. Basta cliar nele que abre uma janela onde você pode escolher um arquivo do seu computador, um link para uma imagem online ou escolher entre as já enviadas para os seus albuns.

  4. Olá, meu nome é Mirella e acabei de criar um blog. O meu problema é que quando eu coloco as fotos, eu coloco de uma maneira. Por exemplo, uma do lado da outra. Quando eu atualizo o post elas ficam de uma maneira totalmente diferente. Não sei o que fazer! :/

    1. Mirella, isso vai depender muito do template que você está usando, mas, em geral, imagine que a coluna onde fica o texto e as imagens tem 600 pixels de largura, ok? E suas fotos, lado a lado, tem 620 pixels de largura.

      Nesse caso provavelmente uma das imagens vai sair da área de texto passando por cima do que esitver ao lado, provavelmente o menu.

      Tem também o alinhamento. Se você quer três imagens lado a lado tente colocar uma alinhada à esquerda, uma à direita e a outra no centro.

      Uma outra solução que pode te ajudar é um plugin de gerenciamento de galerias de fotos como o NextGen.

      Espero que uma dessas dicas te ajude a resovover o problema!

  5. Olá! Meu nome é Aline e estou precisando de ajuda… Não consigo colocar as fotos em tamanho maior para o meu blog. Sempre que eu faço o upload do arquivo, o WordPress coloca ela bem pequena no meu post. Quando clico na imagem para mudar ela já aparece como 100% do tamanho e só dá opção para diminuir, nunca para aumentar. No Blogspot eu não tinha esse problema!! Eles já me davam a opção de ampliar a foto e não perdia em nada a qualidade dela.
    Tentei mudar o tamanho nas Configurações Avançadas, passando de 225 x 300 para 525 x 300 por exemplo, mas elas perdem muita qualidade, ficam horríveis! Mesmo as fotos com 3 MB, por exemplo, ficam impossíveis de serem publicadas após ampliadas dessa maneira. Gostaria de saber se há outra forma de ampliar o tamanho das minhas imagens do WordPress sem perder a qualidade. Preciso muito conseguir isso! Se puderem me ajudar, agradeço demais!!!!

    1. Oi Aline,

      Faz muito tempmo que não uso o BLogspot, mas imagino que ele te dê a opção de inserir a imagem menor, mas só a exibe menor sem mexer na foto.

      Vou esplicar melhor.

      Uma foto pode ter um tamanho de 100×100, certo? Quando você manda essa foto para o WordPress ele cria duas versões reduzidas, de digamos, 25×25 e 50×50. Sua foto original tem 100×100 e só vai ficar legal no máximo nesse tamanho. O que imagino que aconteça no Blogspot é que ele pega a imagem 100×100 e mostra em 50×50 o que é ruim pq continua com o mesmo tamanho (em KB) do original e isso torna o site mais lento.

      Quando você muda o tamanho nas configurações da foto inserida dentro do post para, digamos, 200×200, ela vai perder qualidade pois o original é 100×100. Entendeu?

      Se a sua imagem tem que ter 300×300 o original tem que ter esse tamanho.

      O tamanho em KB não tem muito a ver com a qualidade da imagem. Por exemplo, a mesmíssima imagem em formato tiff, bmp e jpg pode variar de MBs até uns poucos KB.

      Em resumo: não tem como aumentar uma imagem para além do seu tamanho original sem perder qualidade.

  6. Oi, obrigada pela atenção, mas acho que você não entendeu bem… Quando eu usava o Blogspot eu não tinha problema algum para ampliar a foto, já aparecia as opções de deixá-las pequena / grande / muito grande etc. E qualquer tamanho que eu escolhia ele aumentava sem perder a qualidade. Mas atualmente estou usando o WordPress e é justamente nele que tenho tido problema. As fotos são grandes, mas sempre que baixadas para o WordPress elas aparecem muito pequenas. Impossível usá-las tão pequenas assim… Aí quando eu tento aumentar, clicando na foto e mudando o seu tamanho em Configurações Avançadas, elas aparecem do tamanho que eu quero, que é mais ou menos 525 x 600. Porém, perdem muito a qualidade e nã dá para serem publicadas. Você sabe me dizer o que pode estar acontecendo? Pq deve ter um jeito de publicá-las grandes e com a qualidade original, vejo todos os blogs fazendo assim. Por que no Blogspot eu não tinha esse problema e no WordPress eu tenho? Obrigada mais uma vez.

    1. Acho que entendi, mas não expliquei direito 🙂

      O normal é o WordPress te oferecer três opções na janela onde você escolhe a foto para inserir no post: tumbnail, média e full size.

      Inserindo em full size a imagem entra com seu tamanho completo.

      Se isso não está acontecendo, se você está sem a opção de inserir a foto em full size, então tem algo errado na instalação do Seu Worpress e não posso ajudar muito.

      O que eu tentei explicar é que esse recurso é uma vantagem do WP na verdade pois ele cria versões menores das fotos para o site ficar mais rápido quando vc usar as fotos menores.

  7. Ah, já tentei colocar ela no tamanho que eu quero no PhotoShop, aumentandos os pixels. Ela fica bacana, com qualidade e tudo mais. E chega no WordPress fica minúscula de novo…

  8. Olá,
    Sou iniciante em matéria de site e não tenho conhecimento técnico.
    Tenho um domínio no registro.br e já o hospedei em um provedor que gentilmente instalou o WordPress com os temas Make e NewMedia sugerido por mim.
    O Make segundo o autor é fácil de usar através do construtor que utiliza o sistema de arrastar e soltar, só que não estou conseguindo colocar uma foto abaixo do nome do blog.
    Se puder dar uma ajuda nisto e aproveitando a oportunidade eu pedi para o meu provedor instalar também o NewMedia, porque acho a disposição das colunas muito interessantes e achei que poderia utilizar a mesma ideia no Make.
    Por favor também comente se isto é possível no Make ou se é melhor utilizar o NewMedia.

    Abraços e muito sucesso a vocês.

    José Carlos

    1. Olá,
      É possível usar mais de um tema no site, mas acho que isso insere um nível de complexidade que atrapalha mais do que ajuda na maioria dos casos.
      A princípio minha sugestão seria você escolher um dos dois temas e configurá-los para ficarem o mais próximo possível do que você quer.
      O Make de que você está falando é esse?

      http://themeforest.net/item/make-responsive-parallax-onepage-wordpress-theme/6097760

      Na página tem link para vários tutoriais. Nunca usei esse tema então não posso garantir, mas eles costumam ter uma área “Home Configuration” ou coisa parecida que te permite personalizar a home. Entre as opções dela deve ter a imagem de cabeçalho.

      Espero ter ajudado!

      1. Olá Roney,

        Quando coloco uma imagem no cabeçalho, a foto tampa completamente o nome do blog.
        Ao que parece o Make é muito bom apenas na versão paga.
        Migrei para o NewMedia e o mesmo problema aconteceu, ou seja, o nome do blog não aparece no cabeçalho, quando insiro uma foto.
        Como sou iniciante, vou tentar achar outro tema e um possível passo a passo para começar e depois com o tempo me aprimorar e fazer as mudanças que achar conveniente a medida que o blog for trazendo mais visitantes. De qualquer forma, agradeço seu retorno.

        José Carlos

    1. O WordPress mudou um bocado desde que fiz esse tutorial, hoje a opção fica mais à esquerda e acima da área onde editamos o post. Se não está aparecendo realmente em lugar algum, então deve haver alguma coisa errada com a instalação do seu WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *