Insert images, WordPress tutorial

image-seen-in-visual-editing-mode-in-Wordpress-posts-or-pages

Probably the most difficult part for any WordPress beginner is to figure out the few tricks and twists to insert images into their WordPress posts or pages.

Here are the things to pay attention to:
Lets start with the various text. (See screenshot below). Note that using caption and centering the image will stop the word wrapping WordPress does by default. This WordPress default can annoy the living daylights out of you!
If you want to tell search engines what your image is all about you must enter the works:

inserting images into a WordPress post or page.with text
inserting images into a WordPress post or page.with text

You also need to pay extra attention to what size you want your image show. (Assuming here you want to insert single images, not an entire gallery, which would be a different WordPress tutorial at some later point in time) Using small image sizes always comes with a challenge, how does text wrap around it? This is a nerdy little chapter with WordPress in it’s own right, also this at some later point in time.
Inserting images in a size that fits the WIDTH of your WordPress blogs theme is the easiest way to go about because you will not experience any text wrapping issues around it at all.

various image size choices in WordPress blogs
various image size choices in WordPress blogs

Working with original (Full) size means 2 things you need to settle BEFORE you upload an image.

  1. Know what maximum WIDTH your blog theme offers for images, if you have a fluid width theme you have to check things out in the lowest screen resolution, 1024×768 pixels, and make it fit for that at least, otherwise things look ugly real quick.
  2. Resize your photo / graphic and give it a file name that adequatly reflects what the images shows, the better the file name the easier for search engines to determine to what search terms to show it. Do this BEFORE uploading the image to your WordPress blog, it will make things easier for you.

Now you insert it.
And voila, you just stumbled into the next pitfall…
The WordPress Admin area is devided into 3 columns, leaving little psace for showing images in full size.
The most part will simply be hidden below the right side column, and more annoingly, it makes it tricky to scroll down and start writing text below the image.

image-seen-in-visual-editing-mode-in-Wordpress-posts-or-pages
image-seen-in-visual-editing-mode-in-Wordpress-posts-or-pages

WordPress, however, has 2 editing panels for the main contents of a post or page!
So, if you inserted your image in the “visual” panel, yep, the above will be your problem, but, no problem really, simply switch to the “Text” (or sometimes, in older WP versions, called HTML) panel and the big image is reduced to some HTML code like this:

image-seen-in-text-editing-mode-in-Wordpress-posts-or-pages
image-seen-in-text-editing-mode-in-Wordpress-posts-or-pages

This solves your problem. You now can see where to start writing up your blog posts or pages text, simply one line below the HTML code for the image!

At this point one thing i can never get tired of telling anyone – stay inside the TEXT (or HTML) called panel for writing all your contents!
Why? Because writing contents in the Text panel allows you to write like in a simple email or plain text file, your line breaks will look like YOUR line breaks, not like the nonsense WordPress sometimes “thinks” it should do when you use the Visual panel.
Once you have all text written you can still switch over to the visual panel and use some text editing functions you do not have in the Text (or HTML) called panel.
In addition, use text editing options scarcely, especially if you have no HTML knowledge and thus do not know how to fix weird stuff WordPress does to your layout when you play around to many times or when trying to make corrections in the Visual panel

Leave a Reply

Your email address will not be published. Required fields are marked *