Embed Video from YouTube or Vimeo

It's a good idea to upload your videos to either YouTube or Vimeo before you embed them in a Post. If you have trouble, follow the steps below:

YouTube

  1. Upload your video to YouTube.
  2. Under the video click on the button that says Share.
  3. You'll see a shortcode and to the right a button that says Embed. Click on Embed.
  4. At the bottom of the Embed Options, you will see various sizes. Click on Custom and put 575 in the Width box (the Height box should automatically input a number).
  5. Look in the text box that has a long code that starts with "<ifram width=" and ends with "</iframe>". Select and copy the entire code (Comand C for Copy).
  6. Go to your Post on the website. Type up a description of your video, or whatever you want the post to say.
  7. When you're ready to insert the video, look at the tabs in the upper right hand corner of the edit box. One says Visual and one that says HTML. Click on HTML.
  8. Go to the bottom of the text and Paste-in the Code that you copied from YouTube or Vimeo (Command V for Paste).
  9. Click Publish. You're done.

Vimeo

  1. Upload your video to Vimeo.
  2. To the right hand side of the video click on the Share icon.
  3. A panel will pop up with some options. On the right hand side of the panel near the bottom, click on Customize embed options.
  4. Under Size put 575 in the first box (this value is for the Width), the other box should fill automatically.
  5. You can choose the color for the video title. Our highlight color for the website is #7a2f32, so you might want to use that.
  6. Under Other deselect any of the options.
  7. On the top right hand side of the panel is a text box that has a long code that starts with "<iframe src=" and ends with "</iframe>". Select and copy the entire code (Comand C for Copy).
  8. Go to your Post on the website. Type up a description of your video, or whatever you want the post to say.
  9. When you're ready to insert the video, look at the tabs in the upper right hand corner of the edit box. One says Visual and one that says HTML. Click on HTML.
  10. Go to the bottom of the text and Paste-in the Code that you copied from YouTube or Vimeo (Command V for Paste).
  11. Click Publish. You're done.
A few notes:
You can use the shortcode from Youtube that you first see when you click Embed; however, this code doesn't give you any control over the size of the video and sometimes parts of the video (often the top or bottom) get cut-off when you embed this way. It's best to choose the size of your video before embedding it.
When editing your post in the Visual tab, you'll only see a big box as a placeholder for the video. Don't worry, the video will show up when you view the post on the website.
Finally, the width specifications listed in this post are for the 2011 theme. You might have to adjust the pixel width for your website.

Categorizing your Post

If you prefer a short video, check out this “how to”  on WordPress.tv: Adding Categories and Tags to your Post

Categorizing your posts will help other students and automated features or a website to easily recognize, differentiate and assign a high-level description to content that you share on the blog.

After you finish typing your post up, choose the appropriate “category” from the right side of the screen.  For example, after you type up your “introduction” blog, you should make sure to check off “introductions” otherwise the post will simply show up as “uncategorized.”

Images in Posts

Follow the steps below to add an image to your post.

  1. Type up your post and then place your cursor at the point in your post where you’d like to insert the picture.
  2. Click on the rectangular button next to “Upload/Insert” just above the tool bars at the top of the post box (if you hover over the button you will see the text “Add an Image”).
  3. Click on “Select Files” (next to “Choose files to upload”).  If you are choosing a file from your computer, you can then browse for it (the same you would if you were uploading an attachment to an e-mail). Once you find the image you want, click “Select.”
  4. You may then re-title the image if you would like (to make it easier to manage/find later on). You may also add a “caption” that will appear under the image.
  5. At the bottom of the screen you can change the “Alignment” and “Size” of the image. FYI: if you have a large file and opt to have it show up as small or thumbnail size in order for it to fit better in your post, when you click on the image once the post is published, it will take you to a screen with a larger image.
  6. Don’t forget to click “Insert into Post” (just below the “Alignment” section) before clicking “Save Changes” at the bottom. If you don’t click “Insert into Post,” it won’t show up in your post when you publish it.
  7. You can always click “Preview Changes” (upper right hand corner) before you click “Publish” or “Update” to see what the post will like like after the images are added.
  8. Remember, if you don’t like something, even after it is published, you can go back and change it. Just click “edit” below the post and work away. If you want to change the image, hover over the image you will see a red circle with a line through it, which will let you delete the image, or you can select the small image icon next to the red circle in order to edit the image.

If you are copying and pasting a link from youtube, just paste the link directly into the post; WordPress should recognize the link and embed the video directly in the post. You can check to see if the embed worked by going to “Preview” (or “Preview Changes” depending on whether or not you’ve already published the page) in the upper right hand corner.

How to Resize Photos

1. Open your photo file in Preview, which is the default program for pictures in your MacBook.

2. Go to “Tools” -> “Adjust Size”- The first option is “fit into” with a drop-down menu. For website purpose, 800*600 pixels will be enough. (If you want people to click on the photo and show it full screen for details, you can use 1280*960. Also, note the resolution only needs to be 72 pixels/inch.)

3. Save as a new file and use it to upload! You will not only save our space, you’ll also find the uploading process much faster!

NEW! If you use iPhoto or would like batch re-size functions, see below!

1. Open iPhoto, select one or more photos.
2. Go to File->Export. Click on “Custom” from the dropdown menu of “Size.”
3. Enter 800 px (or bigger, for other purposes.) for max dimension.

4. Click “Export”- choose a new folder/location and save your newly resized photos!

Posts

In order to make a post, simply click on “My Sites” on the gray menu bar in the upper left hand corner of the screen , choose your website, and then go to “New Post.”  You can also add a new Page or Post by going to "Add New" on the gray menu bar and selecting either "Post" or "Page." Or go to your Dashboard from the same dropdown menu, and this will take you to the “back end” (the control panel) of the site.  From there, you can post or do a number of other things.

If you want to edit a previous post, you can look it up under “Posts” in the Dashboard view, or you can simply go to the post itself on the website and at the end of the post click “Edit.”

When you are done writing your post, be sure to either click “Save Draft” on the right side bar (in the “Publish” box) or click “Publish.” You can also opt to “Preview” the post (also located in the “Publish” box) before publishing.

One of the great things about WordPress is that you can always go back and make changes later. You can also revert to an earlier draft of your post by looking in the “Post Revisions” box at the bottom of the page.

**A few notes on terminology: a post is like a blog post that will show up in a blog roll or as individual posts under a specific category (we can talk about adding categories to your site). While posts are dynamic and you can add many, pages are static and don't change (though you can update them as often as you like).