Arquivo

Textos com Etiquetas ‘imagens’

WordPress 2.9: como usar as miniaturas automáticas

18, dezembro, 2009

A versão nova do WordPress chegou, e entre as novidades a principal é a das imagens (miniaturas) automáticas em posts, ou “post thumbnails”.

O que pode ser fonte de expectativa pra muita gente, também certamente vai ser fonte de decepção: o recurso de “post thumbnails” requer um tema preparado para eles, e não vai funcionar “fora da caixa” para qualquer tema instalado no site.

Entretanto, não é muito difícil de adaptar o seu tema para que o recurso das imagens de posts fiquem disponíveis.

O primeiro passo é habilitar no seu tema o suporte aos thumbnails, que é o que vai habilitar o painel de configuração da miniatura do seu post. Para fazer isso basta inserir em algum lugar do functions.php do tema o seguinte código:

<?php add_theme_support( 'post-thumbnails' ); ?>

Ao salvar esta alteração no functions.php, quando você entrar na página de edição de posts haverá um novo painel, como mostra a imagem abaixo.

Screen shot 2009-12-19 at 00.27.51

Para definir o thumbnail de cada post, basta clicar em Set Thumbnail e fazer o upload de uma imagem, ou escolher uma imagem das previamente enviadas para o blog, como você está acostumado a fazer para inserir uma ilustração no post. Só que em vez de clicar para inserir no post, você vai clicar na nova opção “set as thumbnail”.

Screen shot 2009-12-19 at 00.30.47

Na imagem acima você vê um post que já teve seu thumbnail definido.

Essa é a parte fácil. Agora vem a parte difícil, que é preparar o seu template para exibir o thumbnail correspondente a cada post.

Nota: pressupomos que você tenha conhecimento suficiente de PHP e de personalização de templates para fazer as modificações abaixo descritas. Não é nosso objetivo ensinar o básico do básico.

Na verdade, a função the_post_thumbnail() é quem faz todo o trabalho de encontrar, dimensionar e exibir as imagens de cada post, já com a tag IMG corretamente formatada.

Ela pode ter os seguintes formatos:

the_post_thumbnail("small");
the_post_thumbnail("medium");
the_post_thumbnail("large");
the_post_thumbnail(array($widht, $height));

Os strings small, medium e large acima vão fazer com que o WP exiba um thumbnail no tamanho padrão (que você configura nas opções do WP).

O quarto formato é o mais versátil de todos, do ponto de vista dos codificadores de temas para WordPress, porque permite que o designer defina tamanhos arbitrários exatos para as imagens, independentes das configurações do WordPress.

Caso você precise usar o HTML inteiro da imagem para algum outro fim, pode usar a forma abaixo.

<?php
$img = get_the_post_thumbnail(array(200,200));
?>

O código acima foi retirado do template do site Das Fútil, que usa uma versão Beta do WP 2.9, e com diversos tamanhos de post thumbnails na home page.

É só isso.

Há uma série de hooks para modificar o comportamento das imagens nos posts, mas quem sabe lidar com eles também saberá como encontrar a documentação necessária para utilizá-los no próprio WordPress.

Esperamos que com esta breve explicação mais gente possa usar o novo recurso de imagens de posts no WordPress 2.9, contribuindo com uma web mais bonita e mais simples de manter.

Janio Sarmento WordPress , , , , , , , , ,

Problemas com upload de imagens no WordPress

4, novembro, 2008

Quem é usuário do Firefox já percebeu que com as recentes atualizações do plugin Adobe Flash Player 10, algumas anomalias com vídeos (principalmente do YouTube e correlatos), áudio e demais animações tomaram conta dos sites que frequentemente visitamos. Eu, por exemplo, não consigo a mesma compatibilidade com os sites multimídia que conseguia até alguns dias atrás, tendo que, vez por outra, acessar o Internet Explorer e então consumir o conteúdo em questão.

Mas trazendo essa realidade pra o mundo dos blogs, constatei que o Flash 10 também é incompatível com um pedaço do WordPress: o upload de imagens. Aquele botãozinho que você usa para subir imagens em um post ou uma página, o Choose files to upload, parou de funcionar. Existem dois paliativos: o primeiro é simples, abaixo do botão, existe a frase:

Upload de imagens

Upload de imagens

“You are using the Flash Uploader. Problems? Try the Browser uploader instead” Ela dá opção de você clicar em browser uploader e fazer o serviço da forma antiga.

Mas se existe a extrema necessidade de usar a nova forma, via Flash, que foi incorporada ao CMS na versão 2.5.1, e que permite, a despeito da forma paliativa, o envio de várias imagens ao mesmo tempo para o post, existe uma “gambiarra” a ser aplicada no Firefox que resolve (eu já disse que é gambiarra?) em partes o problema. Ela resolveria, também, os problemas com o YouTube e demais players online.

Primeiro você baixa o Uninstall Flash Player. Depois fecha o seu Firefox, executa o arquivo baixado e pronto.

Em seguida, você pode escolher uma das versões antigas do Flash aqui e instalá-las para usar novamente. Eu recomendo a versão 9, que é a que funciona ao mesmo tempo com YouTube (e afins) e com o WP.

A dica da solução do problema foi do Anderssauro (aliás, ele está com editorial novo, layout novo, promoção nova com camiseta bacana de grátis. Aproveite e conheça!)

Daniel Becher WordPress , , , ,

Como personalizar a galeria de fotos do WordPress (thumbnails)

10, setembro, 2008

Não só atualizações de segurança foram feitas a partir do WordPress 2.5, mas muitas alterações de estrutura e estética do sistema de CMS apareceram. A maioria delas não apresentaram maiores intervenções e, também com o advento das atualizações automáticas de plugin, nem sentimos grande parte das mudanças estruturais da plataforma.

Entretanto, um recurso importante pra quem posta bastantes imagens foi adicionado: a galeria de imagens. Agora, é possível inserir uma galeria de fotos colocando-as todas num post e escolhendo deixá-las sob forma de thumbnails e o próprio WordPress se encarrega de gerenciar isso. Ao invés do antigo e tradicional link pra foto, a imagem é carregada, antes, dentro de uma página do próprio tema (carregando cabeçalho, barras laterais, um looping específico pra ela etc.)

Em um dos blogues em que escrevo, o JaPostei, é comum colocarmos essas galerias de fotos.  Mas como disse no parágrafo anterior, o WordPress cria uma página específica pra cada foto colocada na galeria e, por consequência, um permalink. Então se há página e permalink, juntamente com links diretos do post para visualizá-las, estas páginas também são indexadas no Google.

Eu não teria me dado conta disso até notar no blog em questão um acréscimo estrondoso de visitantes incompatível com os relatórios de impressões de páginas do AdSense. Ao passo que o blog atingia 2.500 visitas únicas para o post em questão, a exibição de anúncios e os clicks não acompanhavam esta evolução. Notei, então, que o que estava sendo indexado e trazendo visitas era justamente uma das fotos de uma das galerias que o WordPress, e na falta de uma customização daquela página (já que a grande maioria dos temas ainda não se adaptaram às imagens), exibia um modelo default — claro, sem anúncios.

Compartilho aqui com vocês como customizar a página de galerias de fotos, inclusive como inserir anúncios, o que é bastante importante.

1º passo – Não vamos reinventar a roda

Não é nossa intenção reaprender a mijar. Não vamos criar do zero uma página para exibir estas fotos. De acordo com nosso tema, vamos pegar um modelo e então personalizá-lo. No MEU caso, eu usei o single.php (e indico que seja este o modelo). Então baixe pro seu PC via FTP o arquivo single.php do seu tema, renomeie para image.php e jogue denovo no diretório do template.

2º passo – Tirando o que for desnecessário

Existem coisas desnecessárias para o image.php que vêm com o single.php. Uma delas é a tag the_content, pois uma vez que não vamos exibir o post, lembre-se que é uma página somente pra foto. É necessário, caso deseje, retirar as tags que puxa o sistema de comentários. Eu, pelo menos, saquei fora o   comments_template() pois não queria repetição de comentários em cada foto. Mas essa fica a seu critério.

3º passo – Inserindo o código fodão

Dentro do looping e abaixo da tag do título do post (the_title), você vai adicionar o seguinte código:

<p class=”attachment”><a href=”<?php echo wp_get_attachment_url($post->ID); ?>”><?php echo wp_get_attachment_image( $post->ID, ‘medium’ ); ?></a></p>
<div class=”caption”><?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the “caption” ?>

Este pequeno emaranhado de palavras estranhas vai fazer a foto ser exibida (juntamente com o caption dela).

4º passo – Colocando links de navegação

Já que é uma galeria, seria interessante dar ao seu leitor a possibilidade de ele navegar nas fotos sem precisar retornar ao post principal e escolher novamente outra foto. Abaixo (ou acima, você que sabe) coloque o seguinte código:

<div>
<div class=”alignleft”><?php previous_image_link() ?></div>
<div class=”alignright”><?php next_image_link() ?></div>
</div>

5º passo – Adicionando anúncios aos thumbnails

Você vai adicioná-lo da mesma forma que faz com o single.php, index.php ou barras laterais. Escolha o lugar onde quer posicioná-los e insira o respectivo código.

Resumo da ópera

Se você exatamente como eu ensinei, seu código ficou mais ou menos assim:

PS: Note que eu modifiquei algumas instruções perto da tag “the_title”, para que ficasse um pouco mais amigável e que o usuário que chegasse do Google soubesse que aquela página apenas exibia uma foto, inclusive linkando o post original.

E, se fez dessa forma, é provável que esteja funcionando agora :)

Daniel Becher WordPress , , , , , ,

Você otimiza suas imagens?

29, junho, 2008

Eu já escrevi aqui sobre a importância de otimizar as imagens que ilustram os posts de um blog. Quando se hospeda um blog em serviços gratuitos, egoísta que somos, acabamos não nos preocupando com isso. “Ah, dane-se, não vou gastar um centavo de banda”. É um pensamento errado. Banda custa dinheiro, infra-estrutura de comunicação custa caro e mesmo que para você seja gratuito, em algum lado vai estourar esse custo, em alguma ponta ou outra vai ter que ser compensado tal qual a inflação na economia. Isso é besteira falar, mas, enfim… como diz meu parceiro aqui no Viamão, tergiverso.

Vamos aos fatos, de fato: não custa otimizar imagens. Não custa deixá-las menos “pesadas”, facilitando a abertura do seu blog e fazendo isso em tempo satisfatório que não obrigue o leitor pular para outro resultado do Google ou tomar um café ao invés de ler o seu texto. Se você hospeda as imagens do blog no próprio servidor, sabe (sabe?) que além da demora, existe um custo.

Instalar no seu computador o Macromedia Adobe Fireworks, o Adobe Photoshop, Paint Shop Pro ou similar única e exclusivamente para otimizar uma imagem ou outra que você posta no blog é demais. Primeiro porque ele vai ocupar um espaço e tempo de carregamente desnecessários, e segundo porque você não vai baixar o Photoshop pirata, vai comprar o original e custa muito, muito, muito dinheiro. Tá, tem o GIMp, que é um editor de imagens gratuito, mas mesmo assim.

Que tal otimizar suas imagens em sites que não te cobram nada por isso? Então, aqui vai uma listinha de endereços que pode te ajudar nessa tarefa:

JPEG Optimizer: Além de comprimir sua imagem sem perdas consideráveis, ele mata a cobra e mostra o pau. Sim, ele te diz qual foi a porcentagem de compactação da imagem enviada num formulário simples. Ele permite, além de diminuir o peso dela, redimensioná-la.

GifBot: No site, há uma versão gratuita desta ferramenta para testes que você pode muito bem utilizá-la no dia-a-dia. Entretanto, é necessário inserir e-mail. Nos testes que eu realizei, não recebi nenhum spam ou qualquer incomodação na minah caixa de mensagens. Mas faça por sua conta e risco.

JPEG Wizard: Esta outra, além de fazer o que as outras duas acima propõe, você pode escolher qual a taxa de compressão da imagem, embora o visual seja mais arcaico. Pode também ajustar opções como Luminância, rotação, espelho e cores.

[UPDATE]

ImageMagick: Também conhecido como o Gimp/Photoshop da linha de comando. Faz resize, conversão de formatos, composição, aplica efeitos, cria gif animado. Perfeito para processamento batch de imagens. (Fábio Britto)

Faça um favor para seu leitor e para seu bolso: otimize suas imagens!

Daniel Becher Ferramentas , , , ,

Otimizando imagens: como reduzir o tamanho das imagens

5, fevereiro, 2008

Você fez uma escolha importante e, na minha opinião, mais lúcida: vai hospedar no seu próprio host as imagens que você vai usar nos seus posts. Ótimo. Mas em contra-partida quer otimizar ao máximo esse trabalho para que ele não consuma um recurso que pode sair caro, que é a banda. Vou dar algumas dicas para que isso não aconteça e você não tenha sustos como vez por outra encontrar seu blog fora do ar com o erro 509 (Bandwidht Limit Exceeded).

Saiba escolher o formato da imagem

PNG, GIF e, céus, TIFF são excelentes formatos que permitem oferecer poderio gráfico para algum trabalho mais específico. Aqui estamos falando de banda escassa ou racionalizada e de imagens que vão apenas ilustrar e ajudar a transmitir uma idéia. Você não vai ganhar nenhum concurso de photoshopeiro funboy com seu blog, a menos que ele se proponha a isso. Use imagens em formato JPEG que te permite uma compactação maior sem perder tanta qualidade. Uma boa imagem otimizada pode passar de seus absurdos 150kb para otimizados e ecologicamente corretos 20, 25 kilobytes.

O tamanho em pixels da sua imagem precisa condizer com o tamanho do seu blog

Nada de pegar imagens em 1024×728 e sair postando no seu blog. Não preciso lembrar você que nos propusemos a usar imagens somente (e tão somente) para ilustrar e completar idéias para o seu texto. Se não há necessidade de explicar o que você está escrevendo com uma imagem grande em resolução, então elimine aquele link maravilhoso de “clique aqui para ampliar“. Se você economizar no tamanho, economize. O mais importante é o texto, não esqueça disso.

Tenha um bom editor de imagens instalados no seu PC

Um editor de imagens prático e ágil instalado no computador é pré-requisito para qualquer blogueiro que se preze. Você pode se virar com softwares como o Picasa, por exemplo. Mas se tiver a oportunidade, instale um Photoshop, um Fireworks ou até mesmo o simplório Paint Shop Pro.

Ferramentas ONLINE para otimização de imagens

Se você não quiser instalar um software freeware ou quiser economizar numa licença de softwares como Photoshop ou Fireworks, pode usar duas ferramentas online que fazem o serviço parecido:

Online Image Optimizer – Limite de 300kb para “subir” a imagem a ser otimizada e só mexe na “qualidade” da imagem e não nas dimensões dela (o que, vendo abaixo, vai ajudar na otimização).

Image Optimizer .Net – Sem limites de upload e permite fazer o redimensionamento.

Um exemplo prático

Para dar um exemplo prático, achei um blogueiro que reclamou em um post que sua banda no PhotoBucket chegou ao limite. Ele provavelmente não sabe, mas aqui no metablog ele vai ganhar uma consultoria na faixa. Vamos aos fatos.

Como ia dizendo, ele reclamou que sua banda chegou ao limite. Não importa se é no PhotoBucket ou no seu próprio blog que as imagens são hospedadas, se há um limite ele deve otimizar. Mas vendo as suas imagens postadas, notei que quase nenhuma está abaixo dos 100kb. Como já disse na série, o ideal é que uma imagem nunca ultrapasse os 20kb. Uma delas, com 150kb:

Imagem não otimizada

Nota: outro erro muito grave que um blogueiro comete ao postar uma foto é não alterar a resolução dela em pixels. Não somente a resolução de pontos por pixels (DPI), mas o tamanho dela, horizontal e vertical. Vemos que a foto original do post dele estava redimensionada para 490px x 328px. Salvando a foto no PC, notei que ela tinha 748px x 500px. Ou seja, ela foi redimensionada para exibição, mas ela carregava o tamanho original.

Salvei a imagem no meu computador, editei no Macromedia Fireworks 8 e exportei em JPG, diminui a qualidade dela e um pouco da resolução para “caber” no post sem sobrar para os lados. Vejam o resultado:

Imagem otimizada

Agora a imagem tem 450px x 301px, com a “qualidade” menor e 10x mais “leve”. O resultado é uma imagem de 16kb.

Fazendo uma pequena continha de matemática básica, na foto original do blog dele, 500 pessoas por dia visualizando aquela foto consumiriam mensalmente um total de banda de 2,15gb. A MINHA imagem otimizada consumiria 0,22gb no mesmo período. Uma economia de mais de 85%.

Exemplo prático usando os serviços online de otimização de imagens

Image Optimizer

O mesmo resultado de otimização, porém mais rápido, gratuito e online.

Conclusão da série

Usem essas dicas e não terão dores de cabeça com banda no blog. Ou pelo menos não por causa de falta de planejamento.

Daniel Becher Séries/Tutoriais , , , ,

Otimizando imagens: a banda e o desempenho agradecem

4, fevereiro, 2008

Começar um blog que tem um domínio registrado e por consequência necessita de um plano de hospedagem paga não é uma tarefa puramente burocrática. Se você quer que seu blog seja versátil ao carregar e não quer gastar dinheiro desnecessariamente, é bom planejar muito bem como você vai lidar com as imagens – que diga-se de passagem são indispensáveis para um bom post – assim que a idéia inicial do blog surgir.

Essa preocupação se dá por dois motivos:

  1. Banda. Quando você contrata um provedor de hospedagem você tem a opção de escolher a quantidade de banda a ser usada por mês, ou seja, quanto o seu blog como um todo vai trafegar de dados pelo link desse provedor. As imagens ganham um peso maior nesta escolha, pois uma imagem só num post é mais “pesada”, geralmente, que um texto com 1000 palavras.
  2. Velocidade. Independente se o seu blog for monetizado ou não, quanto mais rápido ele abrir melhor para o visitante e há menor probabilidade de ele cansar dessa navegabilidade pesada e fechá-lo sem mesmo ler algum parágrafo. Mais uma vez as imagens fazem diferença, quanto maiores em tamanho (kbytes) elas forem, mais demorado será o carregamento do seu blog.

Por quê planejar o esquema de imagens antes de começar o blog?

bandwidth exceeded

Simples. Digamos que você escolheu um plano de hospedagem básico que permite 2 gigabytes de transferência mensal de dados. Você até então está hospedando as imagens no seu próprio servidor. Sua visitação é baixa, suponhamos que você tenha 500 visitas por dia e suas imagens são pesadas – 150 kbytes, em média. Somente com as imagens, nestas condições, você já ultrapassaria o limite de banda do servidor.

Porque: 150kb (tamanho da imagem) * 500 (visitas diárias) = 75.000kb ou 73,5mb diários. Em um mês, 73,5mb * 30, você chegaria aos absurdos 2.205 megabytes (2,15gb) de banda consumida SOMENTE pelas imagens, sem considerarmos os textos e demais recursos do seu blog.

Mas você já criou as imagens, postou-as e o blog está tendo visitação. Para resolver este problema sem que a saída seja BANCAR financeiramente esta “extravagância”, você teria que pegar imagem por imagem (e aqui supomos que para você ter em média 500 visitantes por dia, você esteja mantendo seu blog há uns 6 meses e isso dá um bocado de posts com outro bocado de imagens) e ajustá-las. Depois desse tempo todo e dessa quantidade estrondosa de imagens uploadeadas no seu blog, você vai preferir, por conta da mão de obra, dobrar o plano e a bola de neve aumenta na próxima crise de banda.

Vai por mim, eu deveria vender este conselho: planeje o seu esquema imagens antes mesmo de escrever o primeiro post.

Mas peraí, o que é um esquema de imagens?

Você não necessariamente precisa hospedá-las no seu próprio blog, existem sistemas gratuitos e pagos que fazem este serviço pra você sem que a banda saia do seu bolso. Mas isso é um assunto que abordarei nos próximos artigos desta série.

Daniel Becher Séries/Tutoriais , , , ,