Beruflich Dokumente
Kultur Dokumente
Click "Add Structure", and name the new structure "aui-slideshow-structure". Further down, in the XML Schema
Definition section, click "Launch Editor".
Replace the text in the editor with the contents of setup/aui-structure.xml, and click "Update". It should now look
like this:
Select the appropriate value for "Viewable by", and click "Save".
Select the earlier created structure slideshow-structure and click "OK" to proceed. This will automatically choose the
template that was associated with the structure. Instead of only the HTML editor, a web form with additional fields
is shown.
Enter the number of seconds each slide is to be shown in the "Duration" field, and the height and width (if the
default css file is used, these values should be 450 and 800).
6. Add/edit slides
Note: We recommend using either Mozilla Firefox or Windows Internet Explorer for editing the slides (tested with
Firefox 14 and Internet Explorer 9), as not all of these operations will work in Opera (12) or Google Chrome (21).
The slide field contains the default HTML "What you see is what you get" (WYSIWYG) editor. You can add more slides
by clicking the green "Add" ("+") button in the top right corner of the content field, and delete a slide by clicking the
"Delete" button next to it.
First, find the URL to the previously uploaded css file. This can be done by clicking the "Link" button (1 in the next
screenshot) in the editor, "Browse Server" (2). Browse to the directory where the file was uploaded, click to select it
and copy the contents of the URL field (3). Click "Cancel" to close the URL window.
Edit the file default-slide.html by replacing "/documents/directory/file.css" with the copied path to the css file.
Click "Source" to be able to edit the HTML code directly. Then paste the contents of "default-slide.html" into the
editor:
Now the image, text etc. can be edited. (Text and image can of course also be edited in the source directly, if
preferred.) Refer to the numbers in the screenshot above when it says "(Default slide: number)" later in these
instructions.
N. B. The slide as it is shown in the HTML editor might not look exactly like how it will be shown in the
slideshow. It will look more like the result if you drag the lower right corner to make the editor field the
approximate size of the slide. To be quite sure of the result, you have to click "Publish" and view the slideshow
on the page.
Select/edit image
Go to the "Image Properties" of the example image, either by clicking on the image and then clicking the "Image"
button in the editor (Default slide: 4) or by right-clicking on the image and then choosing "Image Properties". Here
you can either click "Browse Server" to browse for and select a file on the server, or enter a URL to an image directly
in the URL field.
The image can then be resized in two ways:
1) By entering the dimensions directly in the Image Properties window. If the width/height ratio of the image is
to be kept, click on the lock icon to the right of the fields so it is shown as locked, then enter height or width
and the other will adjust. Click "OK" afterwards to save.
2) By clicking "OK" directly and dragging the image to the desired size in the editor window by one of the white
squares on the image border.
Internet Explorer 9: Click somewhere in the text area to mark it (white squares appear in the boundaries of the text
field). To resize, click and drag the squares. To move: When you hover the mouse over the text area, it will become a
move symbol. Click and drag to desired position.
Make an image into a clickable URL
This can be done in two ways:
1) Click on the image, and then on the "Link" button in the editor (Default slide: 5). Enter the URL to the page
the user shall be redirected to when the image is clicked, and click "OK" to save.
2) Right-click on the image, select "Image Properties", go to the "Link" tab and fill in the URL field.
If you want both the image and description text to be clickable: Before clicking the "Link" button, click somewhere
on the slide and then on the "body" button to the left underneath the editor.
The URL can be edited later by right-clicking on the image, and choosing "Edit Link" or editing the URL via the Link
tab of the Image Properties window.
Add padding on the sides of the image
If you would like the image to have some padding (e.g. if you have a very wide image and it doesn't look so good
right on the top of the slide), right-click the image and choose "Image Properties". Click the "Advanced" tab
(encircled in red below). In the "Style" field, add "padding: npx;", replacing n with the number of pixels of padding
you would like to have. This will add n pixels on all sides of the image.
As shown in the screenshot above, you can also specify more than one padding value if you want different amounts
of padding on the sides of the image. The shown "padding: 10px 5px 15px 40px;" means that the image will have
10px top padding, 5px right padding, 15px bottom padding and 40px left padding. (Starting on the top, going
clockwise. For more padding examples, see http://www.w3schools.com/cssref/pr_padding.asp).
Click the "Publish" button in the bottom of the menu at the right to save the content and make it viewable.
Tips:
You can of course also edit the other properties of the image text using the HTML editor (like changing font or
font size, centering the text or making words/phrases into URLs), just make sure that the image text itself is
selected by clicking the text and then clicking the rightmost "span "/ "p" button underneath the editor, then
make the desired changes.
Depending on which browser you are using, there may be added some whitespace to the top of each slide in the
browser when the slideshow is published and you go back to edit mode (or if you switch back and forth between
source and WYSIWYG mode in the HTML editor). This needs to be removed to keep the slides looking as
intended. To remove it, click on the top of the slide and hit delete two times (or as many times as needed). If this
does not work without removing the background (e.g. if you are using Opera or Google Chrome), go to edit
source mode (by clicking the "Source" button) and remove all the "<p> </p>" entries on the top, and the
"<p>" and "</p>" tags before and after the first line starting with "<link", and click Source again
If you want to have other things in a slide than the default image and description (e.g. a table or only text), it is
still recommended to paste the default slide content into the source first to set the background and then remove
the unwanted elements (e.g. by clicking on it and hitting "Delete"). Otherwise, the previous slide might show
through as the background for the table/text slide.
Appendix A: aui-style-450x800.css
.wraptocenter {
display: block;
float: left;
text-align: center;
height: 450px;
width: 800px;
background: black;
}
.wraptocenter .text {
position: absolute;
bottom: 16px; /* makes sure the text appears above the navigation menu */
left: 10px;
width: 95%; /* to prevent a bit of text being not visible on the right*/
background-color: black;
color:white;
}
.wraptocenter span {
display: inline-block;
height: 100%;
background-color: black;
color:white;
}
Appendix B: aui-structure.xml
<root>
<dynamic-element name='duration' type='text' index-type='' repeatable='false'>
<meta-data>
<entry name="displayAsTooltip"><![CDATA[false]]></entry>
<entry name="required"><![CDATA[false]]></entry>
<entry name="instructions"><![CDATA[How many seconds an item is to be
displayed before switching to the next slide.]]></entry>
<entry name="label"><![CDATA[Item Duration]]></entry>
<entry name="predefinedValue"><![CDATA[]]></entry>
</meta-data>
</dynamic-element>
<dynamic-element name='height' type='text' index-type='' repeatable='false'>
<meta-data>
<entry name="displayAsTooltip"><![CDATA[false]]></entry>
<entry name="required"><![CDATA[true]]></entry>
<entry name="instructions"><![CDATA[Height of the carousel, in pixels
(px). (Do not add "px" at the end of the value.)]]></entry>
<entry name="label"><![CDATA[Height]]></entry>
<entry name="predefinedValue"><![CDATA[]]></entry>
</meta-data>
</dynamic-element>
<dynamic-element name='width' type='text' index-type='' repeatable='false'>
<meta-data>
<entry name="displayAsTooltip"><![CDATA[false]]></entry>
<entry name="required"><![CDATA[true]]></entry>
<entry name="instructions"><![CDATA[Width of the carousel, in pixels
(px). (Do not add "px" at the end of the value.)]]></entry>
<entry name="label"><![CDATA[Width]]></entry>
<entry name="predefinedValue"><![CDATA[]]></entry>
</meta-data>
</dynamic-element>
<dynamic-element name='content' type='text_area' index-type='text'
repeatable='true'>
<meta-data>
<entry name="displayAsTooltip"><![CDATA[false]]></entry>
<entry name="required"><![CDATA[true]]></entry>
<entry name="instructions"><![CDATA[Slide content. To create more
slides, click on the green "+" button to the right.]]></entry>
<entry name="label"><![CDATA[content]]></entry>
<entry name="predefinedValue"><![CDATA[]]></entry>
</meta-data>
</dynamic-element>
</root>
Appendix C:
aui-template.html
Appendix D: default-slide.html
<link href="/documents/directory/file.css" rel="stylesheet" type="text/css" />
<div class="wraptocenter">
<img alt="" src="http://www.oldbookillustrations.com/gallery/animals/flyingfish.jpg" style="width: 434px; height: 350px;" />
<div class="text">
<p><span>
Image description text
</span></p>
</div>
</div>