Wrapping text around images inserted into posts in WordPress

If this article is useful for you, please, consider to retribute. Thanks

Contorno de texto com imagem à esquerda.Hi folks. Today I’m going to tell you a little trick of how to wrap a text around an image placed into an article as in this article. Some people call it as breaking text or wrapping text. Well, here I’ll point two way to get to achieve the same results. A possibility is inserting the code directly in the IMG tag and the other one is editing the stylesheet (Style.css) and calling the style code later in the IMG tag into the HTML code. The option of editing the stylesheet has the advantage of using a smaller code in the IMG tag, in other hand you are limited to do some adjustments of the text distance of the image/edges individually, because in the stylesheet it will be defined for all images instead of individually. Well, you will understand better next. In the option of inserting the entirely code in the IMG tag without using the stylesheet, you can define texts distances from the image border individually. In this article, on the image on the left I’ve inserted the following code:

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

What interest us to wrap the text around the image is the marked text in red in the IMG tag above. So we have:

float:left – Here I’ve used left to indicate that the image will be positioned at left, if it was to be positioned at right I should use right instead;
padding-right:10px – In this case as the image is on the left, I need to use padding-right to inform the distance in pixels that the text may take from the border/edge of the image;
bottom:1px – Here by using bottom, it will inform the distance in pixels that the text will take from the bottom of the image, so the text will show 10pixels away from the image border/edge;

(c) 2009 - Luis C. Torres (Lucato) - Acquire this image from iStockphoto.For images placed on the left side we have some changes in the code above. How the image is now in the right side, the command float:left will be now float:right to indicate that the image will be placed on the right side. The command padding-right:10px now will be padding-left:10px that the text will start 10 pixels away from the left border/edge of the image and not from the right was it was before. A new possibility is the use of the command padding-top:5x to inform that the text starts 5px away from the top of the border/edge of the image. There you go! With these commands added in the IMG tag withing the style=”” you will get to add images into your posts and wrap the texts around the images. Previously I had mentioned that there is another way to do the same by editing the stylesheet (Style.css). Well, in my opinion, I prefer this first option due the mobility to define the distance values individually and not leave a fixed distance in the stylesheet, besides that you get to view the text wrapped in the visual tab while editing. Well, anyway, let’s mention the second option where it will be needed to edit the stylesheet file Style.css by adding the following code:

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

Save your stylesheet and send it to your server and refresh your browser page with sift+f5 or clean the cache to load the page with the new stylesheet. Well, now instead of using that code above in the style=”border…” in red, you may use the code in the way below if the image is on the left:

<img class="wrapleft" title="" src="http://www.mysite.com/myimage.jpg" alt="...>

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

<img class="warpright" title="" src="http://www.mysite.com/myimage.jpg" alt="...>

That’s it folks. These are the two ways to wrap the texts around the images when creating an article with WordPress. See what option fits better for you. ;0)

Veja a lightbox People no iStockphoto.

If you think that some article from iLucato was useful, help ilucato by contributing here with the amount you think is fair for the help you have received and incentive to create more videos and articles. Thanks in advance..

Filed Under: Tips & TricksWordPress

Tags:

My latest images for sale at Shutterstock:








RSSComments (6)

Leave a Reply | 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.

Leave a Reply

notify me when a reply is posted.