Working with Image Elements

This article provides a starting point for many aspects of working with images.

Be sure to check out any linked articles for additional information.

When you have an image element selected you'll see context tabs for Options, Styles and FX added above the Stage. 

Options (in Designer mode):

In Designer mode the image Options include:

• Change: Allows you to change the image in the element to a different image. Not only is this faster than deleting an image and adding a new one, the change process preserves any items added over the image like Markers or Hotspots when the image is changed.
• Edit: Opens the Image Editor where you can make color changes, crop, change size and more
• Reset Dimensions: Resets the image display size back to the actual image size if you have used the sizing handle or the Size fields in the selection control bar to change the display size (applies to Claro only)
• Rollover: Allows you to add a Rollover image to the image element, for example to show a change of state if you are using the image as a button
• Caption: Allows you to add a caption to the image and set its display style
• Properties: Opens the Properties Panel for the Image Element to the right of the Stage

Essentials mode users do not have acccess to the Reset Dimensions nor Properties.

Style (in Designer mode):

You can apply a display Variation to the image element, such as color or blurring filters.

Picture Styles are framing shapes and effects you can apply to the image element.

The options under the Styles tab are only applied to the image element on the page, they are not applied to the image itself in the Media Library. If the image is used on multiple pages, the Style options will only be shown on pages where they have been applied - the styles do not cascade to all uses of the image in dominKnow | ONE. 

Essentials users do not have access to the Picture Styles.

Fx (in all modes):

The FX tab lets you set effects for the Image Element. The tab is the same for both Designer and Essentials modes.

In Claro you can:

• Choose an Entrance Effect and set the Time for it (0.0 for no delay, 1.0 to have it appear after 1 second, etc.) and the Direction of the effect. In Claro, the effects are triggered by and timed to the page loading.
• Add Hover effects that are triggered when a learner rolls over the Image Element.
• Access the Timeline feature below the stage to set the timing of the Image Element to the Timeline, either for Page timing or timing to an audio narration file. 
• Set Advanced animations that have more control over the effect than the standard effects available in the Entrance Effect section of the tab. 

In Flow you can:

• Choose an Entrance Effect and the Direction of the effect. In Flow these effects are triggered when the learner reaches the element on the page as she scrolls down.  
• Add Hover effects that are triggered when a learner rolls over the Image Element.
• Set a Scroll Effect on the image element. Scroll Effects offer more control over the effect than the standard effects available in the Entrance Effects section of the tab. 

When you select an image element on the Page you can use the + icon to add items to the image element as layers.

This opens the Add Elements on Top panel to the right of the stage:

You can add:

• Labels
• Markers
• Hotspots
• Other Images from the Media Browser or Media Library
• Stock Images from the available collection
• Characters from the available collection
• Speech Bubbles
• Thought Bubbles
• Clip Art from the available collection
• Icons from the Icon library
• Shapes (in Claro only)

When you add an item over an Image element, it can be positioned anywhere over the image or even outside of the image.

In Claro if you move the Image Element to a new location on the Page these added items retain their spatial relationship to the Image Element.

In Flow, the spatial relationship adjusts if the Image Element changes size due to responsive behavior.

Adding elements over an image offers a lot of creative and interactive potential:

• You can layer elements over the image to create a composite image, with the layered elements timed to appear in sequence.
• The items you add can be used as buttons on the image to trigger actions, like showing other content on the page.
• They can also be the target of actions. For example, you can show a close-up image over part of the main image when a button on the page is clicked, or set labels to appear in synchronization with audio narration timing.

Any text added to these items (e.g., on Labels, Markers and Speech Bubbles) is included in dominKnow | ONE's translation export options. A good way to use this strategy is to have an image of a chart or diagram without any text and use the Labels option to add text over the image. When it comes time to translate you don't have to replace the image, and the label text will be exported out to provide to your translation team or vendor and then automatically updated when you import the translation file back into your dominKnow | ONE site.  

When you add an image to a Page it is also automatically added to the Media Library in your dominKnow | ONE site, which allows you to re-use image across pages and keep the image synchronized for updates and changes across all pages where it is used.

Learn more about the Media Browser, the Media Library and Media Properties panel >>