Make sure you have the kitchen sink open and look for the table icons on the bottom row.  Hover over each icon to learn what does what.

Insert your image making sure that the alignment is set to NONE. Always use None when using a table.  If you want a border, now is the time to add it using the advanced tab. If you forget and want to add a border after creation, click somewhere in the table cell that is not the image, find the table cell properties icon, click on the advanced tab and select your color.   You can see that I’ve added it to two cells below.

If you want to use larger photos, use the gallery option, however this would also work with larger photos if you used one column per row.

When you click on the link icon a window will pop up.  You will enter the URL,  give it a title and decide whether to open in a new window or not.  If the link goes to somewhere other than your own website, use the new window. You don’t want viewers to leave your website entirely.  If it is to your own website or previous content, then you can make a decision.

If you want to create an email link – select the text and change http:// to mailto:  No spaces, all lower case and the colon is necessary.  I.e. mailto:you@yourdomain.com

To remove a link, select the text and click on the broken link chain icon.

Embedding a video on a blog means that the viewer can look at the video right then and there without leaving your website.  It’s a very simple process.

Start at your YouTube video.  Under the video display there is a set of buttons. Click on the SHARE button, then EMBED.  You will see a set of check-boxes – at this point in time, uncheck them all except for OLD CODE.  Select the size; 480 x 390 will fit in most blogs if you have a sidebar and 640 x 510 might just fit also.  If one size breaks your blog layout, just go get a fresh code for a smaller size and replace in code view.

Select the code in the code window – copy or use cntrl+c – then find the html tab on your blog.

Design View

Click it to switch from design view to code view.

Code View

Place your cursor at the end of the text and hit enter to start a new paragraph.  Paste, or use cntrl+v to paste, your video code. Switch back to design view. You will not SEE your video – just a yellow placeholder. The video will be pulled in when your blog post is published.  You can then use your share button to post YOUR blog video on Facebook.

Note that if you have a subscription email service on your blog, the video will not display in most email programs, so be sure to add some text directing them to view it on your blog.  Just like I’m doing here.

Please contact me at PaintWebs if you would like a video made of your paintings for YouTube.

I’m going to use the Add an Image icon. Select the image, click upload, then without doing any formatting, select the size. Images do not have to be enormous to be effective so I chose a thumbnail size. Scroll down to the bottom of this window and click  Insert into post.  The result is what you see above.  No placement, plopped on the page, just where I left off typing.  So now let’s make it a little more effective.

Same image, placed alongside text, formatted to have the text wrap around it and a title added.  This time, place your cursor in front of the first word of your paragraph before uploading the image.  To create this effect I aligned the image LEFT so that text would be alongside and would wrap around if it was lengthy.  I added the wording in the caption field, and I set the URL link to none so that it would not show a larger image when clicked. To edit an image simply left click on it.  Two icons will pop up – one to edit, the other to delete.

When images are uploaded they go into both media and gallery files. There are many types of galleries and I prefer a plug-in gallery rather than the built in one, but it does have its uses so let’s try that one now.   Let’s say we want a row of thumbnail images and we don’t need text and we don’t want to bother with tables. We just want to pop some photos in quickly.

Add your images.  If you use cntrl+left click you can select a group of images.  After uploading, click on the Gallery tab at the top.

• Select whether you want to link to Image or Attachment Page. [Image shows just the image in a new window - attachment page places the image nicely on a blog page.]
• Select your sort order.
• Select the number of columns you want.  Caveat:  Columns MUST fit within the defined space so the more columns, the smaller the thumbnails will be.
• Select Insert Gallery and the results are below. Magic!

To change the gallery layout, EDIT the gallery by clicking on the gallery itself – looks like a light blue square – find the image icon at the top left corner – change the number of columns until it is the way you like it. The gallery above has the images set to Attachment Page. I think it looks nicer and I wanted you to see that cupcake in detail. *g*

To delete an image from the gallery, Edit the gallery, and over to the right, under Actions you will see “Show“.  Find delete down the page, then continue.  Be aware that it will delete the image from everywhere, so if you have used it elsewhere on your blog, you will now have a broken image.

You must have a current version of WordPress to use these features.

So go have fun. Next week we’ll explore another type of gallery, inserting a YouTube video and answer any questions you might have. They might be separate posts!  Email me or post on Facebook so that I don’t miss something you might need to know now!

When you start posting, make sure you have the “Kitchen Sink” open. Yes, that’s what it’s really called.  This gives you more options for styling, which you will need as you progress.  Take a few minutes to hover your cursor over each icon to familiarize yourself with their functions.  Especially take note of the Cleanup messy code, Remove formatting, Undo & Redo, bullet-ed lists and links.

You can change the color and size of a font, and you can use headings for emphasis. [Found under the Paragraph drop down.]  Be very careful about using fancy fonts in your text. There are a limited number of fonts that are on everyone’s computer globally and if the font you selected is not available, the results can be messy to say the least.  Usually, the font on your website or your blog is set site-wide for consistency so leave it set to the default and all will be well.

A few more text suggestions.

• Don’t underline anything that is not a link. In fact, don’t use underline at all within text.
• Don’t use italics, they are particularly difficult to read on monitors.
• Don’t think that if large is good, huge is better. It’s not. Limit your image sizes.
• Don’t center everything just because you can.
• Do  use bullet-ed lists, they are very easy to read and make your text stand out.
• Do use the built in spellchecker.  Errors will show as a wiggly red line.  Right click to see what is suggested.

Problems arise when inserting images, but these can be avoided with a little advance planning.  First, the width of all images in a single line MUST fit within the space allowed. Sometimes what you don’t see is a little padding added to each side of the content area to keep content from butting up directly to the images. That padding is included in the total width.

Secondly, if you want to display a group of pictures, consider using a table to format the layout.   A 2 row, 2 column table will nicely display 4 photos without them being all over the page.

The easiest way to learn how tables work is to try each of these icons to see what happens, then use the undo and try another one.  The time spent here will save you hours of frustration later.

In our next session we will insert images, add a description, add a border and add some padding. Stay tuned.