Creating Graphical Frames

Components which display thumbnails or gallery images have settings for using frames. The frames are built by using 3 graphical elements. One for the corners, one for the sides and one for the top and bottom. The reason for this is to be able to create a frame that can be used regardless of the size of the image inside of it.

The properties for setting the frame in components are generally named as follows:

Frame Corners
Frame Horizontal Fill
Frame Vertical Fill

Frame Corners

This image is used for the corners of the frame. The components use a quarter (1/4) of the width and a quarter (1/4) of the height to decide the size used for each corner.

The first image shows an example of an image used for frame

corners. The second one shows which parts of the image that

is actually used to create the corners.

Frame Horizontal Fill

This is the image used to create the top and bottom parts of the frame. Only the top and bottom quarters (1/4) of the image are used, and they are then repeated to the width needed.

An example of an image used for the Frame Horizontal Fill.

(The black border is added for visibility)

Frame Vertical Fill

This is the image used to create the left and right sides of the frame. Only the left and right quarters (1/4) of the image are used, and they are then repeated to the height needed.

An example of an image used for the Frame Vertical Fill.

(The black border is added for visibility)

Creating frames using the GRE (Graphical Rendering Engine)

Use the GRE to create the different frame images needed. By using the GRE, you only need to use one frame image to create the 3 parts. The source frame image needs to be created in such a way that if you take the top or bottom quarter of it, you will end up with the top and bottom parts of the frame, and if you take the left and right quarter of it, you will end up with the left and right parts of it.

(Note: The frame source image needs to have a space in the middle, so that the horizontal and vertical frame parts can be extracted.)

Frame Corners

Create a GRE style with the following settings:

On the background tab, set the background image to use the source frame image. Either from the Effective Library ones, or from the resources. You can also set it to use a document primary or secondary icon, which would give a dynamic way of changing frames for different documents.
Also on the background tab, set the placement variable to "place left".
On the image size tab, set the image width and height to "fit to background image"
Done! Now you can use this GRE Style for the property Frame Corners on components using frames for images.

Frame Horizontal fill

Create a GRE style with the following settings:

On the background tab, set the background image to use the source frame image. Either from the Effective Library ones, or from the resources. You can also set it to use a document primary or secondary icon, which would give a dynamic way of changing frames for different documents.
Also on the background tab, set the placement variable to "place center".
On the image size tab, set the image width to 1 pixel and the height to "fit to background image"
Done! Now you can use this GRE Style for the property Frame Horizontal Fill on components using frames for images.

Frame Vertical fill

Create a GRE style with the following settings:

On the background tab, set the background image to use the source frame image. Either from the Effective Library ones, or from the resources. You can also set it to use a document primary or secondary icon, which would give a dynamic way of changing frames for different documents.
Also on the background tab, set the placement variable to "place center".
On the image size tab, set the image width to "fit to background image" and the height to 1 pixel.
Done! Now you can use this GRE Style for the property Frame Vertical Fill on components using frames for images.