How to add image to wordpress blog posts or content and place them accordingly, so that the text wraps around this image.
Best practice to always compress your images before you upload them to be displayed in your wordpress blog post.
This way it will make your image size smaller.
I have posted a tutorial to add image to your sidebar, and in this video i am going to show you how to position your image so the post pharagraph will wrap your image.
This is actually personal taste, some want to have wrapped text around the image, or just plain image.
What we are going to make:
1.In your admin page, post box, put your cursor where you want the image appears, and click “upload media button”.
2. A dialog box “Add an Image”, then will show up.
Here you can choose “From Computer”, “From URL” or “Media Library”.
From Computer = Upload image from your computer.
From URL = This image is belog to another website, and you put the image’s URL, the image will show in your blog. Always be careful with copyright, and hotlinking issue.
“Media Library” = Images that you have uploaded.
In this tutorial, we will upload an image from our computer, click “Select Files”. Browse the image you want to upload.
3. WordPress will process your image, you will see this dialog box.
Title: By default wordpress will put your image name there. It’s always an advantage if you put keywords of your post in this title.
Alternate Text: Put short description of your image.
Caption: If you want to wrap the image with the text, leave it empty, but if you don’t, type something short about the image.
Description: It is optional to type in, but in case your image won’t show up, this description will show.
Link URL : leave it by default.
Alignment : None.
Size: Full size. I always put my image in full size, because cropping the size from original size will make your site runs slower.
Once you’re done, click “Insert into Post” button.
4.So, our image is uploaded, now in our post, switch from “Visual” to “html” tab.
5. You will see the html code of our image.
6. Add this code after the
<a and before
style="float:left; padding:8px 15px 0 0;"
End result image where the code should be placed:
7. Click Publish or Update of your post.
Tips: Change the value to suit your need, and you can add some additional css attributes if you like.