Gallery Overview

Latest revision as of 13:01, 2 October 2013

Galleries can make editing pages for your users a lot easier. These can include important images or commonly used HTML snippets, and are much easier to sort through than just looking through the file system. Plus, image galleries will show previews of the image.

HTML Gallery

The "HTML galleries" folder type is designed specifically to hold HTML snippets.

Add a new HTML gallery

1. Navigate to the folder where you want the gallery
2. Click the [New] button
3. (If you don't see "Extended folder", click [Advanced])
4. Select "Extended folder" and click [Continue]
5. Select HTML Gallery

Once the folder is created, add a plain text file to the folder, and put some HTML into it. Create one file for each HTML snippet.

Now, when you go to the editor, and choose HTML Galleries from the toolbar buttons, you can browse through your HTML snippets, and select one to get added to your page.

You can even put JSP files into the HTML Gallery, and include dynamically generated HTML.

NOTE: There's an issue sometimes with FCKEditor that causes your newly inserted HTML snippet to disappear. A work around is to insert a carriage return at the top of the file. You can alternatively edit the default body to have it in place too.

Adding stylesheets

If the HTML snippet uses some CSS from an external CSS stylesheet, you need to add the CSS stylesheet to the FCKEditor editor. Locate the JSP page which is the template, and set its template property to the path of your CSS styleheet. Yes, the template property of the template specifies the location of CSS stylesheet for the FCKEditor.

Image Gallery

An "image gallery" in OpenCms is a folder type designed specifically to hold images.

Compared to storing images in regular folders, using the "image gallery" extended folder will additionally ensure that:

• These folders become available as galleries in the image select widget.
• This means that all the tools of the image select widget becomes available, stuff like image previews, info, cropping etc.
• You can easily edit the "Title" and "Description" properties. (Right click folder -> Click "Comment images")

Add a new image gallery

1. Navigate to the folder where you want the gallery
2. Click the [New] button
3. (If you don't see "Extended folder", click [Advanced])
4. Select "Extended folder" and click [Continue]
5. Choose "Image gallery" and click [Continue]

Downscale images automatically

You can configure automatic downscaling of images on upload in the OpenCms configuration.

Edit the opencms-vfs.xml file below WEB-INF/config/ and add a <param> element to the CmsImageLoader resource loader node:

<loader class="org.opencms.loader.CmsImageLoader">
    <param name="image.scaling.enabled">true</param>
    <param name="image.scaling.downscale">w:800,h:600,q:97,c:transparent</param>
</loader>

You can use all parameters that are available for the image scaler. (For a list of parameters, see constants starting with SCALE_PARAM_ in the CmsImageScaler class.)

To exclude specific folders from performing automatic downscaling of images, set the folder's "image.size" property to "unlimited". (Applies only to images uploaded directly to that folder, not inherited to subfolders.)

NOTE: There is an issue with FCKEditor and image galleries where if you place an image gallery somewhere on your OpenCms install other than /system/galleries/ none of the images are displayed in the editor. They will display in the site fine, but when editing content you will get a broken image. The first time you insert the image it will display fine, however when editing the page in the future the broken image appears. The solution is as follows:

Edit the file /system/workplace/editors/fckeditor/customconfig.js

• Add the import: org.opencms.site.CmsSiteManager
• Change the line: String site = OpenCms.getSiteManager().getWorkplaceServer(); to:

String site = CmsSiteManager.getCurrentSite(cms.getCmsObject()).getUrl();

Table Galleries

Table galleries are like HTML galleries, so just create a text file with an HTML code for the table. The difference from HTML galleries is that the editor knows that it is a table, and right-clicking a table shows a pop-up menu, where the user can add and remove cells, columns and rows.