Setup and configuration of HTML Slideshow in Liferay Portal with

built-in AUI Carousel In this setup, Liferay 6.1.0 is used.

1. Add a new folder in the document library of the community

(You can skip this step if you already have a folder that you would rather use.) Manage > Site Content > Documents and Media, Add > Folder, Name it e.g. "AUI Slideshow", click "Save" (and then the "Back" button in the upper right corner if you’re not taken back to the folder list).

2. Upload css file

Go to the newly created folder, select Add > Basic Document. Select the file aui-style-450x800.css from the file system. Make it viewable for the user groups that shall be able to view the slider, e.g. if non-registered guest users shall be able to view it, it has to be viewable by "Anyone (Guest Role)". Click "Publish" to upload.

3. Add a new structure

Via Manage Site Content, go to Web Content and click the "Structures" tab.

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".

4. Add a new template

Via Manage Site Content and Web Content, go to the "Templates" tab and click "Add Template". Name the new web content template "aui-slideshow-template". Under "Structure", click "Select" and then click on "aui-slideshow-structure" to select it. For the "Script" field, select the file setup/aui-template.html. Again, select the appropriate value for "Viewable by", and then click "Save".

5. Add the slider in the portal

Click "Add" in the top menu of the page that you would like to add the slider to, and select Web Content Display. Click the "Add Web Content" button in the lower left corner of the portlet to create the content. In the new dialogue box, give a name to the content, e.g. "Slideshow". Change the structure of the web content by clicking the "Change" button in the Structure section on top (encircled in red below).

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:

Then click "Source" again to get back to WYSIWYG mode:

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.

Edit the description text

Firefox 14: Click on the text, then click on the rightmost "span" button underneath the editor field to select the text itself. Then directly paste (Ctrl+V) or write your description text. To edit the text afterwards, click on the "span" button again and navigate with the arrow keys to where you want to edit. Internet Explorer 9: Click somewhere in the text area to mark it (white squares appear in the boundaries of the text field), and click it again so it gets a diagonally striped border. Then you can mark the whole or parts of the text, and paste or write your description. Google Chrome 21: The procedure for Firefox can be followed, with the exception that the rightmost button beneath the HTML editor will be titled "p" instead of "span". Opera 12: Click on the text and edit directly. The text can also be edited directly in the source if preferred.

Change description text alignment or move image to one side of the slide

Mark the text as described in the point above or click on the image, and click the "Left Align" (Default slide: 1), "Center" (Default slide: 2) or "Right Align" (Default slide: 3) button.

Resize/move the description text

(N. B. this does not work in Google Chrome 21 or Opera 12) Firefox 14: Click the text so it is marked (white squares appear in the boundaries of the text field). To resize, click and drag the squares. To move the text box, click and drag the Move symbol (encircled in red below).

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> &nbsp;</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.

7. Add more slides afterwards or otherwise edit the slideshow

Click the "Edit Web Content" button in the lower left corner of the portlet, make your desired changes and click "Publish" when finished.

8. Add a slideshow of a different size

Make a new copy of the aui-style css file and edit the height and width properties. Upload it like you uploaded the default file in step 2. When you make a new slideshow, enter the correct height and width values and refer to your new css file in the default slide HTML.

Screenshots from a finished slideshow

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

#set ($contentId = $reserved-article-id.getData()) #set ($contentClass = "multiple-items-" + $contentId + "-carousel")

#foreach ($item in $content.getSiblings())

$item.getData()

#end

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/flying-

fish.jpg" style="width: 434px; height: 350px;" />

<div class="text">

<p><span>

Image description text

</span></p>

</div>

</div>