Add Image To WordPress

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:

End result of this tutorial.

Video Tutorial:

Steps:

1.In your admin page, post box, put your cursor where you want the image appears, and click “upload media button”.

Upload button.

2. A dialog box “Add an Image”, then will show up.

Add an Image box.

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.

Tips, optimize your image first.

3. WordPress will process your image, you will see this dialog box.

Upload Options.

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.

HTML tab, and HTML code.

5. You will see the html code of our image.

6. Add this code after the <a and before href

style="float:left; padding:8px 15px 0 0;"

End result image where the code should be placed:

After you add the code above.

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.

Share the knowledge
Share on Google+0Tweet about this on TwitterShare on Facebook0Pin on Pinterest0Share on Reddit0Email this to someonePrint this page

Comments

  1. Suresh Khanal says

    You are really doing great with these detailed tutorials. They can be a good reference for new bloggers.

    There are some blog editors like Windows Live Writer that should be used to create posts rather than entering post directly on the wordPress backend. I hope you’ll come with some tutorials about blog editors soon.

    enjoy blogging!

    • says

      Thank you for the compliments :D

      I usually gave tips and post things that i have tried myself. I haven’t tried with Windows Live Writer, might check it soon.

      Thanks for the idea, and you enjoy your blogging journey too :-)

  2. jai prakash says

    Hi Kimi,

    Your tips is so informatic as well as ur writing style about post is awesome.Thanks for sharing tips for newbie wordpress user.

    • says

      Hey Jai!

      I hope so too! that it can be informative for everyone who starts wordpress.

      Thanks for coming by and leaving a nice comment Jai.

  3. trevor says

    Nice, but this seems to only works when wrapping one single paragraph. If you have more than one paragraph to wrap around your image, then the second paragraph is been sent right below the image, leaving a blank space in the middle.

    So the issue really should be to teach how to get your text to wrap around an image REGARDLESS of how many paragraphs this text consist in.

    Indeed, WordPress insert hidden codes in whatever line you insert, that prevent your text to wrap correctly as soon as you have a return to the next line within the text to wrap.

    I’ve tried every possible way around using , css, etc. with no success so far. So any working cross-browsers tip is welcome.

    • says

      Trevor,

      I haven’t noticed about this problem, so i haven’t tried if there is any solution yet.

      I guess the solution will be really simple, adding some contents in the first paragraph.

      If i find the cross browsers tip, i will let you know.

      Kind regards,

      Kimi.

  4. says

    Love your WP tutorial posts. This is post is amazing, too. You were concise and the instructions were easy to follow. I just have a question: how can you add image next to the blog title?

  5. Junior says

    Hi Kimi,
    This might sound a bit silly, but after i insert picture, i switch to HTML view and i can see the code, however there is no

    <a href code .

    The rest is there,

    <img class="alignnone size-full wp-image-202" title="Yoga_Pose_Sunset". etc etc

    So do i simply add the missing code manually?

    Thankyou
    Junior

  6. Junior says

    Hi Kimi,
    Does this help, i copied it directly from site

    There seems to be a trend in the 40′s plus age group to reinvent their bodies to a better healthier version….