Upload Images and Media (including Podcast Audio and Video)

This section explains how to incorporate media into your blog.

Upload an Image into a Blog Entry

Note: The blog supports GIF, JPEG and PNG formats.

You can view the video or read the text how-to below:

View Quicktime Video
  1. Log in to http://blogs.psu.edu and enter your blog.
  2. Click the Write Entry tab to begin writing an entry, then click the Insert Image button in the formatting toolbar.
    Insert Image button
  3. In the Insert Image window, click the Upload New Image link in the top.
    Insert Image Window
  4. In the upload window, click Browse and navigate to your image file on your local drive.
    Upload File Window for Images
  5. For Upload Desitnation, you can select the option for the current date in the drop-down menu. This will allow you to find images more easily at a later date.
    Note: If no path is set, the image loads directly into your /blogs directory on your Penn State Personal Web site.
  6. Click the Upload button to upload the image. A new window will open with additional options.
    File Options windows for images
  7. Fill in a descriptive title in the Name field. This will help you search for images more quickly
    Note:The Name field will become the ALT tag used by screen readers and the text that is seen when an image fails to load
  8. Add a description and appropriate tags separated by commas.
  9. Select an alignment option (left, center or right) for you want your image to be placed in reference to your text.
  10. Check Display image in entry if you want to see the image within a blog entry.
  11. Check Use thumbnail if you want to reduce the width of an image
    Note: The recommended maximum width is width is 500 pixels.
  12. Check Link image to full-size version if you want users to be able to click on a image and see the original size.
  13. Click Finish to complete the image insertion process.

Using the Same Image in Another Entry

  1. Click the Insert Image button following steps #1-2 above.
  2. The Insert Image window will show a list of previously used images (called Assets). Select the button next to the appropriate image, then click the Next button.
  3. Complete the File Options process as listed in Steps #6-12 above.

Create a Podcast Feed

You can use the Penn State blogs to quickly create a podcast feed. The feed will be accessible via iTunes or through a Web browser or news reader. To create the feed.

Create an MP3 File

First create an MP3 audio file. Both the Faculty Multimedia Center Tutorials Page and the Digital Commons Web Site (Click Podcasting under Platform) includes tutorials for software such as Garage Band or QuicktimePro.

Upload MP3 File into Blog

Note: There is a 50 M size limit for Blog file uploads. For larger files, use the Pass Explorer or SFTP to upload files into your Personal Web Space www directory.

  1. Log on to http://blogs.psu.edu and enter your blog,
  2. Click the Write Entry tab to begin writing an entry, then click the Insert File button in the formatting toolbar.
    Insert File Button
  3. In the Insert Asset window, click the Upload New File link in the top.
    Insert Asset
  4. In the upload window, click Browse and navigate to your image file on your local drive.
    Upload File Window for Images
  5. For Upload Destination, you can select the option for the current date in the drop-down menu. This will allow you to find images more easily at a later date.
    Note: If no path is set, the image loads directly into your /blogs directory on your Penn State Personal Web site.
  6. Click the Upload button to upload the file. A new window will open with additional options.
  7. Add a description and appropriate tags separated by commas. Click Finish to complete the image insertion process.
  8. A link to the file will be included in the blog entry. The text can be added as needed.

Viewing Podcast in iTunes

To view the podcast in iTunes, do the following.

  1. Navigate to your published blog (e.g. http://www.personal.psu.edu/xyz123/blogs/).
  2. Find the link for Subscribe to this blog's feed in the sidebar. Right click and select the option for copying the link URL.
  3. Open the iTunes application.
  4. Go to Advanced menu then Subscribe to Podcasts..., then paste the URL into the pop-up window.
  5. You will see a list of available files in that podcast. You will not see any text written in the blog entry.
    Note: The most recent file will be downloaded unless you select click the X cancel icon at top.

Other Podcast Viewing Options

  • Users can click on the link within the entry to listen to the file within an MP3 plugin such as Quicktime, Windows Media Player or iTunes.
  • Users can subscribe to the feed using a news reader such as Feed Reader (Windows) and NetNewsWire Lite (Mac) and click on links for audio.

Podcast Through iTunes U

If you wish to use the iTunes podcasting service, please review information at http://podcasts.psu.edu/. This service allows you to lock down podcast viewing rights by course or other Penn State unit and to navigate to the podcast directly within iTunes but is acessible only through iTunes.

Basic Mashups: Incorporating YouTube Videos, Flickr Photos and other Content

You can embed many media objects within your blog site including YouTube Videos, your personal Flickr Photos and other objects by including the "HTML Embed code" within your blog entry

Note: In order for the embed codes to work, you must switch your entry format from Rich Text to one showing HTML tags such as None.

YouTube

 

  1. Log on to http://blogs.psu.edu and create a New Entry.
  2. Write and format the text for the body of your entry.
    Note: The easiest approach is the describe the video first, then insert it.
  3. Click the <A> HTML Mode button. You will see the HTML tags for your entry.
  4. Open a new browser window and search for a video on YouTube.
    Note: Please be sure that the YouTube is free of copyright issues.
  5. Look for the Embed code on the YouTube page and cut and paste it into the text body.
    Note: The embed code begins as "<object width =..."
  6. Save and publish the entry. The video stream will be displayed in your blog.
    Note: If the entry shows the code instead of the video, make sure your Format is NOT Rich Text.

FlickrPhotos

These instructions only work for your own Flickr photos.

  1. Upload any image files you wish to post on to your blog into your Flickr account.
  2. Log on to http://blogs.psu.edu and create a New Entry.
  3. Write and format the text for the body of your entry.
    Note: The easiest approach is the describe the photos first, then insert them.
  4. Click the <A> HTML Mode button. You will see the HTML tags for your entry.
  5. Open a new browser window and search for the uploaded Flickr photo.
  6. Select the All Sizes button in the Flickr Toolbar and selct the appropriate size.
  7. Save and publish the entry. Your Flickr photo will be displayed in your blog.
    Note: If the entry shows the code instead of the photo, make sure are outside WYSIWYG mode.

Google Maps

These instructions only work for your own Google Maps and Google Maps released to the public.

  1. Create a custom Google Map following the Google MyMaps Instructions.
  2. Click Link to this Map in the upper right, then click Customize and preview embedded map
  3. Set the zoom and location in the preview window to the appropriate settings.
  4. Log on to http://blogs.psu.edu and create a New Entry.
  5. Write and format the text for the body of your entry.
    Note: The easiest approach is the describe the map first, then insert it.
  6. Click the <A> HTML Mode button. You will see the HTML tags for your entry.
  7. Close the window, then cut and post the HTML code into your blog entry. The code looks something like

    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&hl=en&geocode=&q=16805&ie=UTF8&om=1&s=AARTsJpP8HuZttzsTmaO5qSXfC_JN95p2w&ll=40.822643,-77.844315&spn=0.181863,0.291824&z=11&iwloc=addr&output=embed">
    </iframe><br />
    <small><a href="http://maps.google.com/maps?f=q&hl=en&geocode=&q=16805&ie=UTF8&om=1&ll=40.822643,-77.844315&spn=0.181863,0.291824&z=11&iwloc=addr&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

See Google Maps for instructions with screen captures.

Other Content

The capability of embedding content from other sites depends on whether they release an embed code or not. Some sites may only allow you to embed your own items.