Académique Documents
Professionnel Documents
Culture Documents
Including Images
The TinyMCE image button allows you to include images just about anywhere within your content, in any
rich-text field.
The process of including images is very simply to edit any iDevice's rich-text field, and click on TinyMCE's image
button to open the image dialog box. This is illustrated below using the Activity iDevice as an example:
Simple step-by-step examples including both of these image types will be shown below for you to follow along,
beginning with externally hosted Web-based images.
You will usually find that the image is larger than fits within the Preview pane, but you may use the Preview pane's
horizontal and vertical scrollbars to effectively pan around and see more of the image.
Now is a good time to notice the current size of the image ("Dimensions" shows 500 x 375 pixels in the above
example), and to change it as necessary for your content. Note that the original image will be retained, so you can
always come come back and change its size again later without any problem. Please see Modifying the Image Size
below, in the Modifying Image Attributes section of this page for further discussion of the size attribute.
The following shows how this example image might be modified to instead show as 300 pixels wide, and a
corresponding height, by keeping the "Constrain Proportions" option checked:
Online manual/Embedding eXe resources 3
Notice that the image dialog has had its "General" tab active so far. More image attributes may be adjusted in the
image dialog's "Appearance" tab, as discussed in the Modifying Image Attributes section of this page. For now,
though, go ahead and click on the image dialog's "Insert" button:
Online manual/Embedding eXe resources 4
Once you have clicked the "Insert" button, the TinyMCE image dialog box closes and the image itself is shown
within the current iDevice's active TinyMCE rich-text field where you are returned to editing, appearing something
like this:
At this point, the image is shown within the content of the iDevice that you are currently editing. You may continue
editing that iDevice, possibly even adding more images if you wish. Once you are finished editing that iDevice, click
on the iDevice's green "Done" check mark to "record" the content into the iDevice and switch eXe's authoring pane
from edit mode back to preview mode. The inserted image should appear something like this:
Your Web-based image has now been successfully included within your project's content!
Online manual/Embedding eXe resources 5
A file browser for your operating system will then appear, with which you may navigate to, and select, the local
image file of interest.
Once you select your local image file, the image will be loaded into the image dialog's Preview pane, and a
temporary "preview path" will be shown in the image dialog's Image URL:
Online manual/Embedding eXe resources 6
The "preview path" is only a temporary location for the image file, as TinyMCE provides to eXe a copy of the file
that is to be embedded. Later, once you have finished editing the iDevice and click on the green "Done" check mark,
eXe further processes the image file into an embedded eXe resource.
WARNING: Do not modify this preview path. Any changes to this path can render its image unembedded and
unviewable in the content.
Just as with Web-based images, you will usually find that the image is larger than fits within the Preview pane, but
you may use the Preview pane's horizontal and vertical scrollbars to effectively pan around and see more of the
image. Likewise, now is a good time to notice the current size of the image ("Dimensions" shows 500 x 375 pixels in
the above example), and to change it as necessary for your content. Note that the original image will be retained, so
you can always come come back and change its size again later without any problem. Please see Modifying the
Image Size below, in the Modifying Image Attributes section of this page for further discussion of the size attribute.
The following shows how this example image might be modified to instead show as 400 pixels wide, and a
corresponding height, by keeping the "Constrain Proportions" option checked:
Online manual/Embedding eXe resources 7
Notice that the image dialog has had its "General" tab active so far. Just as with Web-based images, more image
attributes may be adjusted in the image dialog's "Appearance" tab, as discussed in the Modifying Image Attributes
section of this page. For now, though, go ahead and click on the image dialog's "Insert" button:
Once you have clicked the "Insert" button, the TinyMCE image dialog box closes and the image itself is shown
within the current iDevice's active TinyMCE rich-text field where you are returned to editing, appearing something
Online manual/Embedding eXe resources 8
like this:
At this point, the image is shown within the content of the iDevice that you are currently editing. You may continue
editing that iDevice, possibly even adding more images if you wish. Once you are finished editing that iDevice, click
on the iDevice's green "Done" check mark to "record" the content into the iDevice and switch eXe's authoring pane
from edit mode back to preview mode.
Furthermore, as relates to local File-based images (or other such resources), eXe's green "Done" check mark will
also perform the actual embedding process, thereby including it as an internal eXe "resource" within your project.
The inserted image should appear something like this:
Online manual/Embedding eXe resources 9
Your local File-based image has now been successfully embedded into your project and included within its content!
...which opens the rich-text editor for that iDevice. To then open the image's properties dialog box, select the image
and either:
• click on the TinyMCE toolbar's image button
• or, select "Image properties" from the image's context menu (e.g., via a right-mouse button in Windows, or a
control-click on Macintosh)
Both of these methods for opening the image properties dialog box are shown highlighted below:
Online manual/Embedding eXe resources 11
Either of the above should open up that embedded image's dialog box, with its General tab selected:
In the remainder of this section, the image dialog box will be shown by itself, with its corresponding rich-text editor
merely being implied rather than explicitly shown. For example, the General tab of the above image will appear as:
Online manual/Embedding eXe resources 12
Next up, attributes within these two image dialog tabs will be discussed further.
Online manual/Embedding eXe resources 13
It does not matter if your current image is externally hosted or is internally embedded, from here the process of
replacing an old image is the same as initially including a new image...
Within the image dialog box, you may choose to either
• specify the URL to an externally hosted Web-based image
• or, click on the image file-browser button to choose and embed a local image file
After clicking "Update" in TinyMCE's image dialog box, remember that you will again need to press the green
"Done" check mark to process and embed any new local File-based image, whereas new Web-based images are not,
of course, embedded. The previous image resource will be removed from the iDevice's field.
Online manual/Embedding eXe resources 14
You may click on the "Constrain Proportions" checkbox and adjust either the width or the height, with the other
dimension adjusting accordingly to maintain the same screen proportions. Or, leave "Constrain Proportions"
unchecked and adjust the width and/or the height independently, stretching the image horizontally or vertically.
The actual eXe resource for an internally embedded image file is stored as the original image's full size, whatever
that might have been when included. Although this will not scale up very gracefully to display sizes larger than the
original size, changing the display size to anything smaller than its original size can be done any number of times.
That is, there will be no loss by displaying the image at 25% its original size and subsequently increasing this to
display at 50% its original size.
Be aware that internally embedded images are currently also exported at that same full size, regardless of how small
the image's display size might be set within the content. A large image with a small display size will be slow to
render, both in eXe's previewing mode and in your exported content.
Online manual/Embedding eXe resources 15
• Image Description: Sets the ALT value of this image's corresponding HTML IMG tag for accessibility purposes
whenever the image is displayed, as well as to display when the image itself is unable to be displayed.
• Image Title: Sets a tooltip that shows when the mouse cursor hovers over the image.
Although not mentioned when initially including the above examples' images for simplicity, it is actually considered
good practice to set these two fields right away when you do insert the image. At the very least, you should set the
Image Description for accessibility.
These are beyond the scope of this document (that is, we've never used them ourselves), but the adventurous might
somehow be able to use Classes or Style names in conjunction with CSS (Cascading Style Sheets) to provide
Online manual/Embedding eXe resources 16
different image display formatting for different types of images. For example, you might be able to set your CSS
such that all images with style=fancy are formatted in one manner, and all images with style=simple are formatted
less extravagantly. But that's just a guess... refer to TinyMCE for more information on its image plugin.
Be aware that ultimately, the particular display style of your overall content will dictate how any image borders
appear. Short of any override in the border appearances, the image dialog's Border field is an easy way to frame the
image, generally as a solid dark border. But your style's Cascading Style Sheets (CSS) will have the final say on their
appearance.
Online manual/Embedding eXe resources 17
The above image comes out of its iDevice's bounding box, but doesn't look too bad.
Other times the unexpected results are much worse, such as:
Online manual/Embedding eXe resources 18
Notice how the subsequent Reading Activity iDevice ends up somehow in the middle of the Safety Resources
free-text iDevice.
For better image alignment control, try first including a TinyMCE table within your rich-text, and insert your image
and text within the table cells.
Removing an Image
To remove an image from an iDevice's rich-text field, simply:
1. edit that iDevice,
2. click on the image to select it,
4. Finally, press the iDevice's green "Done" check mark finish editing and process the iDevice's content. This will
remove the image and effectively "unembed" any corresponding eXe resource, if applicable.
• When modifying images that are already included in the content, first click on the image within the rich-text field.
After then clicking on the TinyMCE image button, the image dialog should come up with the image's attributes
showing, and the ability to Update the image with any changes you make:
Online manual/Embedding eXe resources 21
Also, if you are only wanting to display several images and their captions, don't forget to take a look at the Image
Gallery iDevice, as it might be just what you need:
Clicking on the gallery of images brings up the Gallery iDevice popup image navigator:
Before going through any examples of including any media, the available media types shall be discussed.
The following media types are supported: ShockWave Flash SWF, QuickTime, Windows Media, Real Media
(audio), MP3, FLV, and YouTube and Google Videos. All of these media types (except for MP3 and FLV) may
require appropriate additional browser plugin support. With only minimal Flash installed, however, MP3s and FLVs
may be embedded with a built-in player. Each of these different media types has their own set of attributes, available
within the media dialog's Advanced tab.
Great care should be taken when considering which media types to incorporate. Of course a major factor does
happen to be the type of any multi-media files that you already have available. But also of great importance is how
you intend on your content ultimately being viewed, including the type of operating system or browser support you
might be looking at.
While Flash objects, for example, might be considered by some as being the most portable across different computer
platforms, if your content is targeted for a Macintosh-specific institute or group, Quicktime would be reasonable; if
your content is targeted for a Windows-specific institute or group, then Windows Media types would likewise be
reasonable. Ultimately, each of the media types might somehow be playable on most destination systems, but some
might require a little more work ensuring that the proper plugins are installed, etc.
Two of the supported media types (MP3 and FLV) attempt to get around these system issues by embedding and
supplying their own players (XSPF's MP3 audio player, and Flow Player's FLV flash video player, respectively) so
that they are more easily cross-platform capable. Even these two embedded players, however, do have a minimal
dependency upon the now relatively commonplace Flash being available on the destination system.
Be aware that the appropriate plugins will need to be available to eXe's custom FireFox browser (for authoring) as
WELL as to any other browser which will be viewing the content. To check plugin status on your system, see: http:/
/developer.apple.com/internet/webcontent/examples/detectallplugins.shtml
Each media type is discussed in more detail below, along with their specific Advanced tab of the media dialog box.
Online manual/Embedding eXe resources 24
Note that YouTube and Google Videos are also supported by ShockWave Flash, although technically they must be
added with a media type of "None". See their section, below, for further information.
ShockWave .swf files are notoriously particular about their "Auto play" settings. Each .swf is typically created with
an "Auto play" setting, either enabled (for the media to automatically begin playing once shown in the content); or,
disabled (requiring that the viewing user to initiate play).
• If the .swf that you are inserting was built with "Auto play" enabled, then this attribute must also be enabled
within its media dialog's Advanced tab.
• Conversely, if the .swf was built with "Auto play" disabled, then be sure to leave this attribute disabled within its
media dialog's Advanced tab.
A mismatch between the .swf's built-in "Auto play" and its corresponding eXe media attributes may prevent the .swf
from being played at all. So, if you run into problems getting your .swf to play, first thing to try would be toggle its
media attribute for "Auto play" and try again.
Online manual/Embedding eXe resources 25
Quicktime Videos
• Allowed Quicktime file types: *.mov, *.qt, *.mpg, *.mp3, *.mp4, or *.mpeg
• System Requirements: requires Quicktime on system or as a browser plugin
The Quicktime media type's Advanced media dialog tab appears as:
Online manual/Embedding eXe resources 26
FLV is a Flash Video and should not be confused with the related, but distinctly different, ShockWave Flash SWF
media type.
FLV's Flow Player isn't actually made available until it is embedded with the content upon export. This means that
although the appears as if it should work within eXe's preview mode, it will not actually play properly until exported.
While in preview mode, it will merely appear as follows:
Online manual/Embedding eXe resources 30
And from there, just as with images, have fun modifying the properties. Be sure to click Update when you are done
with the media dialog box, and click its iDevice's green "Done" check mark to process the new content.
Don't worry if the above LaTeX markup source initially appears rather intimidating; you can easily start creating eXe
math images that are as simple as the following:
You may type your LaTeX markup source directly, or you may choose to select some of the available symbols to
have their corresponding LaTeX markup inserted into your source.
• The "verbatim text" button will insert a pair of LaTeX commands "\begin{verbatim}\end{verbatim}"; any text
that you enter between the "\begin{verbatim}" and the "\end{verbatim}" will be shown "as is" without any
LaTeX processing.
• The "new line" will insert LaTeX's newline command "\\" to generate a line-break.
• The font size may be selected from its drop-down list for your current image of equations. While each image of
equations may have only one font size, you may embed any number of math images into each rich-text field.
Click the math dialog's Preview button to process the LaTeX source, generate a math image, and display it in the
math dialog's Preview pane.
Online manual/Embedding eXe resources 35
Click on the math dialog's Insert button when done. The image will be generated one more time if anything was
changed since you pressed Preview. Then, the generated math image should appear in your rich-text field as:
However, occasionally the math image appears as a broken image, such as:
Online manual/Embedding eXe resources 36
.... which indicates that there might have been a problem inserting the MimeTex image. Usually this can be resolved
while still in the rich-text editor by first deleting that broken image (merely select it and press [Delete]), then trying
again by opening the eXe math image button and following the same steps. Or, if you had entered lots of LaTeX
markup and don't want to start from the beginning, edit the math image immediately; if your LaTeX markup still
remains, you should be able to Preview and Insert again.
Once the image does show properly in your rich-text field, you may then fully embed it into your project by pressing
the iDevice's green "Done" check mark:
Online manual/Embedding eXe resources 37
Either of the above should open up that embedded math image's dialog box, with its Generate tab selected:
Online manual/Embedding eXe resources 38
Notice that the LaTeX source markup has retained such that you can easily make incremental variations to your eXe
math image. In fact, this coupling with its LaTeX source code is the main thing that makes it more than "just an
image". You may change attributes on this Generate tab as well as select the math image's Appearance tab for more
attributes:
Online manual/Embedding eXe resources 39
Click on the math image dialog's Update button once you are done with any modifications, and the math image will
be updated in the rich-text editor:
Remember to click on the iDevice's green "Done" check mark to fully embed the changes.
The above sample Preknowledge iDevice has the following link and attachment types, in order:
1. a navigation link to an external website (the "Unofficial Skatepark Website"),
2. an external Web-based attachment (PDF press release "Skatepark Grand Opening"),
3. an internally embedded File-based attachment (PDF "Skatepark Rules and Regulations"),
4. and an internal navigation link to another node within this content, "Additional Safety Resources".
The bottom-most link, the sample internal navigation link, also happens to shows how a link might appear within
your content when the mouse hovers over it:
• the link text (or image, for that matter) is underlined (or bordered),
• and the link's title appears as a tooltip, in this case showing "internal link to the Additional Safety Resources page.
Online manual/Embedding eXe resources 41
Note that the actual appearance of your links is controlled by your content's active Cascading Style Sheets (CSS).
Now that you have seen how the links appear after they have been included, let's back up to see how they are
included into the content. Before any links have been added, with only text placeholders for the links, the sample
content appeared as:
... and notice that the TinyMCE link button is not yet enabled. In order to specify a link, you must first highlight and
select some text and (and/or images) to become the link source.
Simple step-by-step examples for each of this sample's links will be shown below for you to follow along, beginning
with a navigation link to an external website.
Online manual/Embedding eXe resources 42
Enter the destination web address into the link dialog's Link URL field. If you would like to have the destination pop
up in a new target window, set that within the links dialog's General tab as well:
Notice the Link URL and the Target, as well as a Title that can show as a tooltip when a mouse cursor hovers over
the link.
Then simply click the link dialog box's Insert button, and the iDevice's green "Done" check mark to process the new
web link.
Online manual/Embedding eXe resources 43
Provide the web address for the Web-based attachment into the link dialog's Link URL field of its General tab.
This Web-based attachment will not be copied into your project, but will remain as an externally linked attachment.
Online manual/Embedding eXe resources 44
Use the link dialog's file-browser button to choose your local file:
Online manual/Embedding eXe resources 45
Once the file has been selected, notice that its Link URL has a "/previews/" path, just as with the embedding of local
File-based images:
WARNING: do not change the Link URL, lest the embedding not succeed.
Just as with File-based images when they are initially inserted into the rich-text editor, the attachment is not yet
processed nor fully embedded, and shows a temporary previews URL. And again, as with images, once you click on
the link dialog's Insert button, you may then click on its iDevice's green "Done" check mark to fully process and
embed the new attachment.
Choose the internal destination anchor from the link dialog's Anchors list:
You might recognize the Anchors list as all of your project's current node names, though they might look a little bit
strange. For example, "My node" may show as "My%20node" and so on. These are web-safe node names, and
hopefully you can find your desired node name amongst the list. Select your desired node anchor (notice that the end
Online manual/Embedding eXe resources 47
with "#auto_top") and Insert the new link into the content:
Finally, press the iDevice's green "Done" check mark to process the content and its new link.
Once you have included an internal link within your content, remember to try and resist the temptation to navigate
with it while in eXe. Again, these are only active for navigation once your content has been exported to a Web Site
export type. If you do happen to click on such an internal link while still within eXe, you will encounter the
following alert:
Merely click OK, for such an alert is indeed reasonable. Until the content is exported to a Web Site, internal links are
simply not navigable.
Online manual/Embedding eXe resources 48
Provide the anchor a simple name and click on Insert to include the new anchor in the content:
Your anchor will only be visible when editing the rich-text field.
Online manual/Embedding eXe resources 49
Now you may click on the iDevice's green "Done" check mark to process the anchor and make it available to list of
available anchors.
Selecting an iDevice which happens to be on an entirely different node (you may link within the same node), edit it
to add an internal link to the new anchor:
Notice that in the link dialog's Anchors list, the added anchor appears before all of the automatic "auto_top" anchors.
All such anchors that you add will appear at the top of the Anchors list such that you can more easily find them.
Insert the new link into the content:
Online manual/Embedding eXe resources 50
Finally, press the iDevice's green "Done" check mark and process the content and its new link.
Just as with embedded images, notice that this embedded attachment has a "resources" path. Same WARNING
applies: do not modify the path itself, unless you are intentionally defining a new attachment to embed or otherwise
link.
Online manual/Embedding eXe resources 51
Alternately, you you simply delete the source text itself and the corresponding link or attachment will be removed
once the iDevice has been processed.
Finally, click on the iDevice's green "Done" check mark to finish processing and removing the link and any
corresponding embedded eXe resources.
attachments, or any other files or web-based objects which you include into your eXe content, either by embedding
into your project or by externally linking to them.
Keep it relatively simple, and enjoy the simplicity that eXe provides.
Online manual/Embedding eXe resources 53
Notice that the Image URL shows a WARNING message, indicating that it can no longer locate the image's file.
The best approach at this point is probably to remove the image and re-insert a new one with the following steps:
1. select the broken image from within the rich-text editor,
2. hit [Delete] to remove the image from the content you are editing,
3. press the iDevice's green "Done" check mark to process the content and cleanly remove or unembed the
corresponding eXe resource,
4. re-edit the iDevice by clicking on its edit icon,
5. position the cursor at the appropriate spot in the text,
6. click on the TinyMCE image button and once again specify or choose the image,
7. and finally, press the iDevice's green "Done" check mark one more time to process the content and re-include the
image.
image-hosting services available on the web (e.g., Flickr or PhotoBucket), you could choose to include all of your
images as hosted externally and merely link to them.
So, really, how you choose to include your resources all depends upon your goal. If you want an entirely portable
e-learning package, then be sure to actually embed all of your file resources; if you want your e-learning package as
small as possible and don't mind requiring web-access, then include all of your resources as external links. A typical
project might be a hybrid of these.
...which returns you to the rich-text editor for that iDevice. To return to the image's properties dialog box, select the
image and either:
• click on the TinyMCE toolbar's image button
• or, select "Image properties" from the image's context menu (e.g., via a right-mouse button in Windows, or a
control-click on Macintosh)
Both of these methods for opening the image properties dialog box are shown highlighted below:
Either of the above should open up that embedded image's dialog box, in which you can see its embedded
eXe-resource path:
Online manual/Embedding eXe resources 56
WARNING: Do not modify this resource path. Any changes to this path can render its image unviewable in the
content.
The above example image has an internal file-path shown in the Image URL field to be
"resources/eXe_BagMan.jpg". The "resources/" prefix allows you to identify this image as an internally embedded
eXe resource; if it were externally Web-hosted, its Image URL would begin as a web-address such as "http://"
Given this example's internal file-path, we can safely assume that once exported, its external file-path will be
flattened into the same directory as the rest of the exported content, with a filename of "eXe_BagMan.jpg"
Summarizing for this particular example:
• this example image's embedded internal file-path = "resources/eXe_BagMan.jpg"
• this example image's exported external file-path = "eXe_BagMan.jpg"
In this example the image's base filename of "eXe_BagMan.jpg" happens to be identical to that which was initially
embedded, but this might not always be the case. eXe attempts to maintain the original filename whenever possible,
but may need to modify the internally embedded filename (not that of your original local file) to ensure that:
1. that the resource filenames are "safe" for web browser compliance,
2. and that all resource filenames are unique.
Since even spaces in filenames are not "web safe", and are replaced by underbars, a local File-based image with a
filename of "My Photo.jpg" would be embedded into your content as an eXe resource with a base filename of
"My_Photo.jpg". Including a different image of the same filename ("My Photo.jpg", or even its safe-version of
"My_Photo.jpg") will result in an embedded eXe resource of the new name "My_Photo.1.jpg", as modified for safety
and uniqueness. A subsequent (yet still different) image of the same name would likewise result in an embedded eXe
resource of the name "My_Photo.2.jpg" and so on.
Furthermore, adding a differently named image file (for example, "Another Photo.jpg") of the same image would not
result in an additional eXe resource being embedded. Instead, eXe will recognize that the resource has already been
embedded (as determined by checksum comparison), and will instead merely include another instance of the
Online manual/Embedding eXe resources 57
already-embedded resource in your content. Once an image has been embedded, you can therefore include the same
image many more times within your content without significantly increasing the size of your project.
As you can see, the internal filename for an embedded eXe resource (and its exported counterpart) may indeed differ
from the name of the originally included local file. Rather than trying to methodically guess at what it's filename
might become once it is included into your eXe project as an embedded eXe resource, simply check its Image URL
after it has been embedded, as per the above example.
Now that you've found the embedded image's path information, you may want to return to your eXe authoring
session. If you do not want any changes which might have occurred during this examination of the image's internal
resource path to take effect:
1. click Cancel in the image dialog box,
2. then click the blue "Undo" arrow to return and continue authoring your content.
Your possibilities for including additional media within eXe are very exciting and include:
• use of the Java Applet iDevice and its built-in Geogebra applet for geometry and algebra lessons, or to include
any other Java applets, Hot Potatoes, or JClic (the latter two providing additionall interactive self-assessment
capabilities).
• you may also use the Java Applet iDevice to embed multi-file media sets. For example, screenshots from Adobe
Captivate come as an SWF paired with an HTML file.
• you may embed a PDF inline within your comment (not just as an attachment) via SCRIBD.
• the possibilities are nearly endless, limited only by your imagination and the occasional technical hurdle.
The eXe user community has many advanced eXe users around the world who have provided wonderful documents
and screencasts on advanced topics such as these and more. Be sure search through the eXe forums for previously
posted topics, or to ask about new techniques. You may find the eXe support forum at: https:/ / sourceforge. net/
projects/exe/forums/forum/327763
See also:
• http://wikieducator.org/Online_manual/Tips
• http://exelearning.org/FAQ
eXe User Manual: Installation | Working with eXe | Embedding eXe Resources | File Management | Tips &
Tricks | Glossary | User Manual Translations
References
[1] http:/ / www. forkosh. com/ mimetextutorial. html
[2] http:/ / www. aprenderenred. net/ exelearning_tutorial/ editor6. html
Article Sources and Contributors 59
License
Creative Commons Attribution Share-Alike License
http:/ / creativecommons. org/ licenses/ by-sa/ 3. 0/