Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Info
The permitted types of multimedia you can insert into your content will depend on settings specified by your Systems Administrator.

Displaying

...

the Media Insertion Dialog

There are 2 basic methods for displaying EditLive!'s media insertion dialog:

  • Toolbar Buttons
  • Menu Items 

 

Info
The toolbar and menu

...

items described below may not appear in your instance of EditLive!. This would be due to your Systems Administrator removing this functionality. For more information, see your Systems Administrator.

Toolbar Buttons

The Image Added toolbar button opens the Media Insertion dialog.

Menu Items 

The Image Added Insert Media... menu item

...

located under the Insert menu.

Using the

...

Media Insertion Dialog

The Multimedia Media Insertion Dialog allows you to perform the following functions:

...

Local File Option

Image Removed

Clicking the Browse button will launch the standard browse dialog used by your machine. You can use this dialog to search your local machine or network for the desired multimedia object.

Local objects will be uploaded to a server location to allow any user to view the object. For more information see your Systems Administrator.

Browse Server Option

Image Removed

Note

You will only be able to browse a server location for objects if this functionality has been implemented by your Systems Administrator.

You can use the Image Removed image to show all the available directories at the server location. Once selecting your desired directory you can then click any object listed.

Note
Depending on how the Systems Administrator has configured EditLive!, objects of any type may appear. Ensure you select an object that matches that multimedia object type displayed in the drop-down list at the top of the dialog.

...

  • Specify width / height - checking either of these boxes allows you to then specify the width or height the multimedia object will occupy in the HTML document.
  • Border Size - size, in pixels, of the border surrounding the multimedia object
  • Alignment - the location in the HTML document where the multimedia object will render.
  • Alternate HTML - the text that will display if the object is unable to render.

...

Image Removed

Here you can specify name - value pairs of additional information to be coupled with your multimedia object.

Press the Add button to add a blank name - value pair. Select any name - value pair and press Remove to delete the pair.

...

The advanced tab is used to specify the HTML attributes for the object when it's embedded in a HTML document

Note
Multimedia Objects will be represented in the content as a Image Removed placeholder image.

Editing a Multimedia Object's Properties

After inserting a multimedia object, you can adjust the object's properties by double-clicking the Image Removed placeholder. This will display the Multimedia Insertion dialog again with all the values set for your multimedia object.

You can also change the size of the multimedia object without having to use the Multimedia Object dialog. Selecting the Image Removed object placeholder will cause the image border to flash and nine black boxes to appear. These boxes represent the horizontal, vertical and diagonal sizing vertices.

You click and hold your mouse button to drag these vertices and increase the size of the objectinsert media in 4 ways:

  • Media Service
  • Embedded Code
  • Hosted Video
  • Hosted Audio

Media Service

Media Services allows the inclusion of content from YouTube, SlideShare, Instagram, Google Maps and over 200 other social media services.

Image Added

  • URL - Location of the Media Service content
  • Specify Size - Checking this box allows the width and height for the media to be adjusted.
  • Width - Width (in pixels) of the media
  • Height - Height (in pixels) of the media
  • Keep Aspect Ratio - Checking this box ensures the width-to-height ratio will always remain the same.
  • Alignment - Location of the embedded multimedia on the page.
  • Preview - A preview of the content supplied by the service.
Note

If the oEmbed content is a video a placeholder image thumbnail will be displayed as specified by the Media Service provider.

Embedded Code

Embedded Code allows the insertion of HTML code, for example and iFrame containing a website.

Image Added

Video

Video allows the insertion of hosted video content into the editor.

Image Added

  • URL - Location of the Video file
  • Type - Type of the video file.
    There are 3 video types supported
    • MP4
    • OGG
    • WEBM

Additional versions of the video can be inserted using the Image Added button. Versions can be removed using the Image Added button beside the desired version.

  • Poster - Location of the image to display for this video before being played in the browser.

    Note
    If no image is specified, the Image Added placeholder image will appear in the editor 
  • Width - Width (in pixels) of the video
  • Height - Height (in pixels) of the video
  • Alignment - Location of the video in the page
  • Controls Enabled - Checking this box will display playback controls for the video in the browser.
  • Fallback HTML - HTML of the content to display if the browser doesn't support the HTML 5 video tag.

Audio

Audio allows the insertion of hosted audio content into the editor.

Image Added

  • URL - Location of the audio file
  • Type - Type of the audio file.
    There are 3 audio types supported
    • WAV
    • MP3
    • OGG

Additional versions of the audio can be inserted using the Image Added button. Versions can be removed using the Image Added button beside the desired version.

  • Alignment - Location of the audio in the page
  • Fallback HTML - HTML of the content to display if the browser doesn't support the HTML 5 audio tag.
Note
Audio content will be displayed with the Image Added placeholder image within the editor.

Editing a Media Properties

After inserting multimedia, you can adjust the media's properties by double-clicking the placeholder. This will display the Media Insertion dialog for the particular media type with all the values set for the media.