• Documentation
  InstallationUsing the Kentico interfaceDeveloping websitesConfiguring KenticoManaging usersSecuring websitesDeploying websitesManaging website contentMultilingual websitesMacro expressionsExternal utilitiesIntegrating 3rd party systemsCustom developmentE-commerce featuresOn-line marketing featuresIntranet featuresCommunity featuresRunning Kentico on Microsoft AzureUsing Amazon web services with KenticoReferencesRelease notes - Kentico 8 versions
• Tutorial
  Using the Kentico interfaceManaging content - The basicsSite development overviewCreating pages using the portal engineWalkthrough - Creating a new site using the Portal engineCreating pages using ASPX templatesWalkthrough - Creating a new site using ASPX templates

1. With your mouse, click where you want to insert the media.

2. On the editor toolbar, click on the Quickly insert media button. A dialog window opens.

   

3. Choose the file that you want to insert and click on Open. The system attaches the file to the page and places it.

   Optional steps

4. Modify the image properties by right-clicking the image with your mouse and choosing Properties. A dialog window opens.

   

5. Adjust the properties based on the media type that you are inserting.

6. Click on Insert. The system places the modified image.

Inserting YouTube videos

1. With your mouse, click where in a text area you want to place the YouTube video.
2. In the editor toolbar, click on the Insert/Edit YouTube video button. An Insert YouTube Video dialog appears.
3. Copy the URLof the video into the URL field. You can use the Go to YouTube button to open a window with YouTube.
4. Fill in the rest of the fields and choose the Default size.
5. Use the Insert button. The system places the video.
6. Save the page you are editing.

Inserting media from the web

1. With your mouse, click where you want to insert the media.

2. On the editor toolbar, click on the Insert/Edit image or media button. An Insert image or media dialog window opens.

   

3. Switch to the Web tab.

4. Enter the URL of the resource into the URL field.

5. Try the automatic file type detection using the Refresh () button. In case the file type cannot be detected, use the Media type drop-down list.

6. (Optional) Adjust the properties based on the media type that you are inserting.

7. (Optional) Preview how the media file looks on the page with the properties that you applied to it.

   

8. Click Insert. The system places the media file.

9. Save the page you are editing.

Inserting media stored in Kentico

1. With your mouse, click where you want to insert the media.

2. On the editor toolbar, click on the Insert/Edit image or media button. An Insert image or media dialog window opens.

   

3. Depending on where the file that you want to insert is stored, switch to one of the following tabs:

   1. Attachments tab - for files attached directly to the page you are editing.
   2. Content tab - for files stored in the content tree.
   3. Media libraries tab - for files stored in media libraries.

4. Select () the file that you want to insert.

5. (Optional) Adjust the properties based on the media type that you are inserting.

6. Click on Insert. The system places the media file.

7. Save the page you are editing.

Properties of media content inserted using the editor

When inserting specific files using the editor, you may want to fill in certain advanced properties. The properties vary based on the type of file that you are inserting:

Image properties

General

• URL - URL of the attached image.
• Alternate text - the text displayed when the image is not loaded correctly.
• Width, Height - the width and height of the displayed image; in pixels.
  • Aspect ratio can be locked, which makes the second dimension recalculated automatically when you change one dimension, while the ratio between the two dimensions is kept.
  • If unlocked, dimensions can be entered manually into both fields, without the ratio being kept.
  • You can also reload the default dimensions using the Reset size icon.
• Border width - the width of the border around the displayed image.
• Border color - the color of the border around the image; has no effect when border width is not set.
• Horizontal space - horizontal space between the image and the surrounding text.
• Vertical space - vertical space between the image and the surrounding text.
• Align - image alignment.

Link

• URL - if set, the image will become a link to the resource defined by the entered URL. Settings on the Behavior tab are overridden.
• Target - the destination where the linked resource should be displayed when the image is clicked.

Advanced

• ID - the identifier of the image HTML element.
• Tooltip - the text displayed when the mouse cursor is placed over the image.
• Class - the image element CSS class.
• Style - image element additional styles.

Behavior

• None - the image is inserted as a standard image. When the image is clicked, no action is performed.
• Open full size in the same window - the image will become a link. When the image is clicked, its full size is displayed in the same window.
• Open full size in a new window - the image will become a link. When the image is clicked, its full size is displayed in a new window.
• Show larger size on mouse-over - when the mouse cursor is placed over the image, the image is displayed in a "floating window" in the defined size. It will be inserted as the Image inline control.
  • Width - the width of the displayed image; in pixels.
  • Height - the height of the displayed image; in pixels.
    • Aspect ratio can be locked, which makes the second dimension recalculated automatically when you change one dimension, while the ratio between the two dimensions is kept.
    • If unlocked, dimensions can be entered manually into both fields, without the ratio being kept.
    • You can also reload the original dimensions using the Reset size icon.

Audio and video properties

When inserting both audio and video, the following properties can be set:

• URL - URL of the attached audio/video file.
• Width, Height - the width and height of the media player; 300 x 200 px is used by default.
  • Aspect ratio can be locked, which makes the second dimension recalculated automatically when you change one dimension, while the ratio between the two dimensions is kept.
  • If unlocked, dimensions can be entered manually into both fields, without the ratio being kept.
  • You can also reload the default dimensions using the Reset size icon.
• Autoplay - indicates if playback starts automatically when the page is loaded.
• Loop - indicates if playback is performed repeatedly in a loop.
• Show controls - indicates if playback controls (play, stop, fast forward, ...) are displayed. In some browsers, the controls may not be displayed if the player size is too small even if this option is enabled.

Audio and video is inserted into the output code as the Media inline control. The output code looks like the following code sample:

Flash properties

General

• URL - URL of the attached flash file.
• Width, Height - the width and height of the flash player; 300 x 200 px is used by default.
  • Aspect ratio can be locked, which makes the second dimension recalculated automatically when you change one dimension, while the ratio between the two dimensions is kept.
  • If unlocked, dimensions can be entered manually into both fields, without the ratio being kept.
  • You can also reload the default dimensions using the Reset size icon.
• Autoplay - indicates if the video plays automatically when the player loads.
• Loop - indicates if the player plays the video repeatedly in a loop.
• Enables menu - indicates if flash options are available in the flash context menu. The flash context menu is displayed on right click of the flash player.

Advanced

• Scale - defines how the flash player stretches, shrinks and resizes when the browser window is resized.
• ID - the identifier of the flash HTML object.
• Advisory title - the text displayed when mouse cursor is placed over the flash player.
• Class - the flash element CSS class.
• Style - flash element additional styles.

Flash is inserted into the output code as the Media inline control. The following code sample shows what the output code looks like: