Quebrando o texto ao redor de imagens inseridas em artigos no WordPress

Se este artigo lhe ajudar, por favor, considere em retribuir também. Obrigado.

Contorno de texto com imagem à esquerda.Olá pessoal. Hoje eu vou contar um pequeno truque de como quebrar o texto ao redor de imagens inseridas nos artigos com textos como este por exemplo. Algumas pessoas utilizam o termo contornar texto, quebrar texto, embrulhar com texto ou ainda em inglês wrap text. Bem, vou destacar duas possibilidades. Uma possibilidade é inserindo o código diretamente na tag IMG em HTML e outra é editando a folha de estilo Style.css e chamando posteriormente o estilo na tag IMG em HTML. A opção de editar a folha de estilo tem a vantagem de usar um código menor na tag IMG, mas em contrapartida você fica limitado a fazer ajustes nos valores das distâncias das margens/bordas entre o texto e a imagem individualmente, pois ficaria definido para todas imagens na folha de estilo. Bem, você entenderá melhor mais para frente. Já na opção de inserir o código por completo na tag IMG sem usar a folha de estilo, você pode definir os valores das distâncias das margens/bordas entre o texto e a imagem individualmente. Neste artigo, na imagem aqui inserida à esquerda temos o seguinte código:

<img style="border: 0pt none; float:left; padding-right:10px; padding-bottom:1px" title="" src="http://www.meusite.com.br/minhaimagem.jpg" alt="...>

O que nos interessa para quebrar o texto ao redor da imagem é a inserção do código marcado em vermelho na tag IMG acima. Então temos:

float:left – Aqui em float utilizei left para indicar que a imagem fica posicionada à esquerda. Se fosse à direita seria right;
padding-right:10px – Neste caso estando a imagem à esquerda (left), em padding-right usa-se o right para  informar a distância em pixels que o texto vai ter da margem/borda direita (right) da imagem. Aqui todo texto inicia afastado 10 pixels à direita da borda da imagem;
bottom:1px – Aqui em bottom é informado a distância em pixels que o texto vai ter da margem/borda inferior (bottom) da imagem. Aqui todo texto inicia afastado 1 pixel abaixo da borda inferior da imagem.

(c) 2009 - Luis C. Torres (Lucato) - Adquira esta imagem no iStockphoto.Para imagens inseridas no lado esquerdo temos algumas alterações no código acima. Como a imagem está agora à direita o comando float:left passa a ser float:right para indicar que a imagem fica posicionada à direita. O comando padding-right:10px agora passa a ser padding-left:10px para informar que o texto inicia afastado 10 pixels à esquerda da borda da imagem e não à direita como estava anteriormente. Uma nova possibilidade é a utilização do comando padding-top:5x para informar que o texto inicia afastado 5 pixels acima da borda da imagem superior. Pronto, com a inserção destes pequenos códigos na tag img você poderá inserir imagens em seus artigos e contornar os textos nas imagens. Anteriormente eu havia mencionado que há uma outra possibilidade de fazer o mesmo, mas editando a folha de estilo. Bem, na minha opinião, eu prefiro esta primeira opção devido a mobilidade de se definir individualmente as distâncias entre as margens e não deixar uma medida fixa na folha de estilo e poder visualizar na aba “visual” quando editando o texto já contornando a imagem. Bem, de qualquer forma, vamos a segunda opção onde será necessário editar a sua folha de estilo Style.css inserindo o seguinte código:

.contornoesq {border: 0pt none; float:left; padding-right:10px; padding-bottom:1px}
.contornodir {border: 0pt none; float:right; padding-left:10px; padding-bottom:1px}

Salve sua folha de estilho e evie para seu provedor e atualize a página no navegador (browser) com shift-F5 ou limpe o cache para carregar a página com a nova folha de estilo. Bem, agora ao invés de usar aquele código acima em style=”border…” em vermelho, você deverá utilizar o código da seguinte forma se a imagem estiver à esquerda:

<img class="contornoesq" title="" src="http://meusite.com.br/minhaimagem.jpg" alt="...>

E se a imagem estiver à direita utilize este código:

<img class="contornodir" title="" src="http://meusite.com.br/minhaimagem.jpg" alt="...>

É isso aí pessoal. Estas são as duas maneiras de contornar as imagens com textos quando criando um artigo no WordPress. Veja a qual você se adapta melhor. ;0)

Veja a lightbox People no iStockphoto.

Se algo aqui no iLucato foi útil para você, considere em retribuir das seguintes formas: 1 - Compre Equipamentos e Acessórios para Fotografia e outros com Lucato ML no MercadoLivre. São mais de 10 anos no MercadoLivre e 100% de reputação positiva; 2 - Contribua aqui e me incentive a criar novos artigos, vídeos, etc; ou aceite meu convite e cadastre-se no Patreon".


Arquivdo sob: Dicas e truquesWordPress

Tags:



Minhas imagens mais recentes a venda no Shutterstock:








RSSComentários (6)

Deixe um comentário | Trackback URL

  1. Cornelio A.Dias BRAZIL Google Chrome Windows says:

    Olá! Eu consigo contornar o texto quando a imagem é no formato png ou jpg sem problemas,porém o que estou querendo fazer é o mesmo procedimento porém em um arquivo flash ou SWF; é possível? E aproveitando a sua boa vontade se despuser, também gostaria de saber seu posso ou seja como eu faço para colocar uma ancora embutida no arquivo swf para ao clicar nele, a ancora direcionar para outra outra página! Agradeço pelo informação.

    • Olá, tente utilizar o mesmo formato na tag do flash. Quanto ancoragem, creio que precisa programar o link/botão no flash direcionando para a ancoragem desejada. Pesquise mais sobre usar:
      GetURL command.
      endereçoqualquer.html#nomeancora

  2. Carlos Alberto da Silva BRAZIL Mozilla Firefox Windows says:

    Olá,

    O código me foi muito útil, porém tem um problema sério, não funciona no Explorer 9.
    Existe alguma solução para isto?

    • Olá Carlos. Aqui visualizo o artigo normalmente no Explorer 9 e este artigo está utilizando tais códigos. Sendo assim, está funcionando ok. Você não visualiza o artigo corretamente ou o código que inseriu em sua página não está funcionando?
      Dê uma verificada nas aspas, espaços, etc. Experimente posicionar todo o conteúdo do style após o src.
      Bom fim de semana.

  3. o pegador Mozilla Firefox Windows says:

    nossa, me salvou. pesquisei muuito por isso e nao encontrei
    obrigado!

    • Pinguim BRAZIL PHP says:

      Olá, obrigado pela visita. Agora encontrou no iLucato. ;0) Fico contente que tenha sido útil para você. Espero que muitas outras dicas futuramente no iLucato venham lhe ajudar novamente. Boa semana. Ah, não esqueça de votar (ratings) com o polegar p/ cima se gostou do artigo e também assine o RSS para ficar antenado com as noviades postadas.

Deixe um comentário

me avise ao postarem uma resposta.