wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog Tutorials Add Image To WordPress

Tutorials

Add Image To WordPress

Last updated on February 18, 2017
Posted on October 8, 2010

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:

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

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.

blog code images post wrap

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Automatically Tweet Blog Posts
→ Change Link Color WordPress

Comments

  1. Suresh Khanal says

    October 9, 2010 at 10:08 am

    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!

    • Kimi says

      October 9, 2010 at 11:35 am

      Thank you for the compliments 😀

      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

    October 11, 2010 at 10:16 pm

    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.

    • Kimi says

      October 11, 2010 at 10:36 pm

      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

    December 29, 2010 at 9:15 pm

    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.

    • Kimi says

      December 30, 2010 at 8:03 am

      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. Phil @ Outsourcing says

    February 3, 2011 at 6:23 am

    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?

    • Kimi says

      February 4, 2011 at 7:08 am

      Hey Phil,

      It depends on your theme, if you use Twenty Ten, here is quick link for my video tutorial: https://www.wpvidz.com/add-logo-to-twenty-ten-wordpress/

      If you use another theme, then we must ask this to the theme creator, as every themes have different coding.

      I hope this helps, thanks!

      Kimi.

  5. Junior says

    August 4, 2011 at 2:23 am

    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

    • Kimi says

      August 4, 2011 at 6:58 am

      Hi Junior,

      I can’t help more if I don’t see the site..

      Kimi.

  6. Junior says

    August 4, 2011 at 8:56 am

    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….

    • Kimi says

      August 4, 2011 at 8:00 pm

      Hi Junior,

      I can’t see the code 🙁

      It is best to see the page source of the site though

      Kind regards

      Kimi.

  7. Keri says

    May 2, 2014 at 6:42 pm

    Heey very nice blog!

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • WordPress CDN setupWordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • WordPress Google maps in contact pageHow To Add Google Map in WordPress Contact Page
  • The configuration of YouTube Subscribe button in Google Developers web pageHow To Add YouTube Subscribe Button To WordPress Website
  • Adding Social Media Links to WordPress Menu With CSS Classes
  • Unable to create directory wp-content/uploads in WordPress
  • Forward Twitter to Facebook Using App and Feedburner Tutorial
  • Kitchen Sink WordPress - Seem Simple But Important
  • Admin Pointers, Drag and Drop WordPress 3.3 Media Upload Features
  • How to sell ebook in a wordpress blog?
  • Check your site's performance using Google labs Page Speed

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept