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:
Video Tutorial:
Steps:
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.
Tips, optimize your image first.
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 href
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.
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!
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 ð
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.
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.
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.
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.
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?
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.
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
Hi Junior,
I can’t help more if I don’t see the site..
Kimi.
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….
Hi Junior,
I can’t see the code ð
It is best to see the page source of the site though
Kind regards
Kimi.
Heey very nice blog!