Blogging Instructions/Help

Log in to Your Blog

To log into your blog, go to http://websites.umass.edu/ and enter your OIT Account NetID and password. When you log in, the Dashboard screen will open. This screen provides access to the administrative tools for your blog.

 

On First Login

On your first login, WordPress displays a Welcome panel.  You can use the links to WordPress help for guidance getting started, or use the help here on the OIT Support site, more specifically tailored to how WordPress is set up at UMass. There’s a link to Blogs at UMass Amherst Help at the top of every Dashboard screen.

 

Dashboard Overview

The front page of the Dashboard shows you an overview of recent activity in your blog, your themes and settings:

Dashboard

Write a Post

  1. Step 1: Log in to your blog and on the Dashboard toolbar click Posts, then Add New. The Add New Post screen will open.
  2. Step 2: On the Add New Post screen:
    • In the field at the top of the screen, enter a title for your post.
      Note: Use a descriptive title, since it will appear on your blog site and your RSS feed.
    • In the large field at the center of the screen, enter the content for your post.
    • In the Categories box at right, select the city from which your post is being sent (i.e. Munich, Salzburg, Vienna, or Prague)
  3. Step 3: To save your post as a draft, click Save Draft (at right). You can continue editing or return later. See Edit Posts below for more on how to return to finish your post.
    Note: The main Dashboard screen has a Quick Press box where you can create a simple post using fewer options.
  4. Step 4: To preview your post without publishing it, click Preview (at right). A preview of your post will open in a new window or tab in your Web browser, displaying the look of your current theme. Close the window to return to the Add New Post screen.
  5. Step 5: To save and publish your draft, click Submit for Review (at right). Once approved by an administrator (which may take up to 1 day), your post available on your blog. To save your post without publishing, click Save Draft. A “post updated” message at the top of the screen will confirm your save.
  6. Step 6: To view your post:
    • To view a published post on a single page, in the yellow confirmation bar (at top) click View Post.
    • To view your blog page, on the admin bar (at top) click your blog’s title, then click Visit Site.

Some screenshots of sample posts are displayed below.

Sample Posts

 

Besides just text, it is also possible to posts pictures and link to youtube videos withing your posts.

Insert a Youtube video

Step 1: Click the Youtube button in the editing toolbar

youtube posting

This will provide you with a place to enter the link to the youtube video you wish to post.

Step 2: Enter the URL of the video and click okay.

The URL should now appear in the editing pane bookended by [youtube]. If you click preview, you will see how the embedded video will look in your post.

 

Insert or Edit Images in Blog Posts or Pages

To add an image to a blog post or page,  you can upload a file from your computer, find an image file already in your blog’s Media Library, or link to an image hosted on another website or web service (such as Flickr or UDrive). You can adjust the image alignment in a paragraph, change the size an image appears on the page, and add a caption. WordPress also provides tools to crop, rotate and scale images stored in your blog’s media library.

To preserve storage space (your blog comes with 1 GIG of storage), we recommend resizing images before uploading. If you upload unprocessed digital camera files, you will soon run out of storage!

Note: For instructions on creating an image gallery or slide show, see Create Image Galleries & Slide Shows on Your Blog.

Insert an Image in a Blog Post or Page

  1. Step 1: On the Dashboard toolbar, click Posts or Pages. Add a new post or page, or edit one already on your blog.
  2. Step 2: On the Add /Edit screen, above the Editor Toolbar click Add media.
    The Add Media button is at the top-left above the tool bar
    Depending on what you last used, the Insert Media or Insert from URL screen will open.
  3. Step 3: To upload an image from your computer:
    Click Insert Media (at left), then under Insert Media (at top) click Upload Files. Drag and drop an image file from your computer onto the upload window, or click Select Files to browse for the file on your computer.
    Note: There is an upload limit of 20 MB per upload to your blog.
    Once the file uploads, the Media Library will open with the thumbnail for the newly added file highlighted blue and checked indicating it is selected to insert. (Skip to Step 5)
  4. Step 4: To choose an image already stored in your blog’s Media Library:
    Click Insert Media (at left), then under Insert Media (at top), click Media Library. A grid of thumbnails will appear.

    • To filter by media type (e.g. Images) change the top-left drop-down from All media items.
    • To search for a file in a large library, use the Search option (at top).

    Click on the thumbnail of the image to insert. The thumbnail will be highlighted blue and checked indicating it is selected to insert.

  5. Step 5: On the panel at right, under ATTACHMENT DETAILS, you can enter a Title, Caption, Alt text, and Description, for the selected image.
  6. Step 6: On the panel at right, under ATTACHMENT DISPLAY SETTINGS, you can adjust the Alignment, make the image into a Link, or change the Size the image displays on the page (thumbnail, medium or full-sized).
  7. Step 7: To crop, rotate, or scale the image, click Edit Image (under image thumbnail, at right). For details, see Crop and Scale Media Library Images, below.
  8. Step 8: To insert an image stored on an external Web site (e.g., UDrive*, Flickr, or Picasa):
    *By default, files stored on UDrive are “private” and cannot be viewed from your blog. For instructions on linking to images on UDrive, see Make Files and Folders on UDrive “Public”.

    1. At left, click Insert from URL. The window title will change from Insert Media, to Insert from URL.
    2. In the URL field, enter the Web address of the image file. Note: the URL must end with an image file extension, such as .jpg.
    3. Set properties for your image: Enter a Title, Caption, adjust the Alignment, or link the image to a Web page.
      Note: There are no options for cropping or rotating images from a URL.
  9. Step 9: Click Insert into Post or Page. You will be returned to the Edit screen where your image will appear on your post or page.
  10. Step 10: In the Publish panel, click Save Draft, Publish or Update to save your work!

Edit Image Properties for an Image on a Blog Post or Page

You can change way an image appears after it is inserted on a Page or Post.

  1. Step 1: On the Edit Post or Page screen, click the image. Two icons will briefly appear on top of the image: Edit and Delete.

    You can shrink the image without distorting it by dragging diagonally a corner handle. (If you enlarge the image, the quality will suffer.) You can also resize the image in the next steps by editing the image properties.
  2. Step 2: Click the Edit icon. The Edit Image window will open. A preview of the layout shows at the top of the window.
  3. Step 3: In the Edit Image window, set the properties for your image. There are two tabs in the window—Edit and Advanced Settings:
    Edit Settings:
    Edit Image screen   (Click to enlarge)

    • Size changes the size an image displays, but does not alter the original file uploaded to the Media Library. Use the % scale (to left of image preview) to scale without distorting the proportions. Note: Images or videos measuring 400 pixels wide or less will fit in most theme layouts.
    • Alignment places the image in relation to surrounding text. This is how you get text to wrap around an image. ((Watch the layout preview at the top of the window to preview results of settings).
    • Title shows a pop-up label when a visitor moves their mouse over the image (not in all browsers) and is shown in Image Galleries.
    • Caption appears under the image (styled according to your blog theme).
    • Alt text provides a description of the image that is read out by screen readers for accessibility.
    • Link URL makes your image into a hyperlink.

    Advanced Settings: 
    Advanced Image Settings screen (click to enlarge)
    Advanced Image Settings:

    • Size lets you resize by precise pixels.
    • Border lets you add a border around an image, however, some themes already provide borders that this setting will not override. Usually if you add a caption, a border will be automatically added.
    • Vertical & Horizontal space, helps to separate an image from surrounding text. Results vary depending on the theme in use.
    • Styles: If you know CSS, you can further adjust the image display properties.

    Advanced Link Settings:

    • The most commonly used option is the Target: Open in new window checkbox.
  4. Step 4: To save the changes to the image, click Save (under the preview image) or Update (at right).
  5. Step 5: On the Insert Media screen, click Insert into Post (at bottom-right).
  6. Step 6: To save the changes to the post or page, click Update (at right on Edit screen).

Leave a Reply