Customizing Images in Arena

Customizing Images in Arena 1

Table of Contents
Purpose ........................................................................................................ 1
Custom Image Effects .................................................................................... 1
Module Settings .......................................................................................... 1
Image Effect Options ................................................................................... 3
Drop Shadow........................................................................................... 3
Glass Table ............................................................................................. 4
Perspective Shadow ................................................................................. 5
Polaroid .................................................................................................. 6
Rotate .................................................................................................... 8
Rounded Corners ..................................................................................... 9

Purpose
This document will show you how to customize the display of images in Arena. Note
that these custom settings will apply to all images displayed under this module
instance, so other effects should not be applied to the images outside of Arena.

Custom Image Effects

Module Settings
The Person Detail module can display a picture for the selected member under the
Photo section. You can upload these pictures directly from the Person Detail page
by clicking the Update Photo… link and selecting a new picture to upload (note
that you must have Read/Write/Modify permissions for the domain Users role for
the ~\ImageCache folder to allow uploads). These pictures can be modified with
several special effects under the module settings.

v2007.2 Released 10/15/2007

 Customizing Images in Arena

Steps to Add Custom Image Effects:

1) Go to Administration
Pages
Home
Membership
White Pages
2

Person Detail
Individual Information, click the Main Content tab,
and click the Person Detail link to open the Person Detail module.
2) Scroll down to the Image Effect and Image Effect Settings fields as shown in
Figure 1 below.
Figure 1 – Image Effect Module Settings

3) Type the desired effect into the Image Effect field. Note that this field is
case-sensitive, so you must enter the exact uppercase and lowercase letters
of the effect as defined below. Also note that only one effect can be entered
in this field.
4) Type the desired settings in the Image Effect Settings field. Note that this
field is case-sensitive, uses no spaces, and each setting must be separated
from any previous settings by a semi-colon ( ; ).
5) Click the Update button to save your settings.

v2007.2 Released 10/15/2007

 Customizing Images in Arena

Image Effect Options

3
Drop Shadow
The Drop Shadow effect creates a small faded shadow below and behind the image,
creating the illusion that the image is slightly ‘above’ the surface of the page, as
shown in Figure 2 below.
Figure 2 – Drop Shadow

Format:
Image Effect:
• DropShadow
Image Effect Settings:
• Angle – Direction of the shadow, measured in degrees counter-clockwise
from the x-axis.
• Color – Color of the shadow, in hex format, e.g. Color=000000 would create
a black shadow.
• Distance – Distance of the shadow from the image.
• Opacity – Transparency of the shadow, as a percentage.
• Softness – Diffusion of the shadow’s edges, as a percentage.

v2007.2 Released 10/15/2007

 Customizing Images in Arena

Glass Table
The Glass Table effect displays a reflection of the image as though the image were 4
held perpendicular to a reflective surface, as shown in Figure 3 below.
Figure 3 – Glass Table

Format:
Image Effect:
• GlassTable
Image Effect Settings:
• ReflectionPercentage - Length of the reflection as a percentage of the total
image.
• ReflectionOpacity – Opacity level of the reflection.
• BackgroundColor – Color of the background behind the reflection, in hex
format, i.e. FFFFFF will display a white background as shown in Figure 3
above, or as the name of the color, e.g. “blue” or “red”.

v2007.2 Released 10/15/2007

 Customizing Images in Arena

Perspective Shadow
The Perspective Shadow effect shows a light shadowing behind the image as though 5
the image were casting the shadow while sitting vertical on a surface, as shown in
Figure 4 below.
Figure 4 – Perspective Shadow

Format:
Image Effect:
• PerspectiveShadow
Image Effect Settings:
• Angle – Angle of the perspective shadow (or the light source), measured
counter-clockwise from the x-axis.
• Color – Color of the shadow, in hex format, i.e. 000000 will display a black
shadow as shown in Figure 4 above, or as the name of the color, e.g. “blue”
or “red”.
• Length – Length of the shadow.
• WidthPercentage – Width percentage of the shadow, with respect to the
image width.

v2007.2 Released 10/15/2007

 Customizing Images in Arena

Polaroid
The Polaroid effect shows a Polaroid-style border around the image, can display a 6
title on the bottom of the image, and allows for numerous other effect settings, as
shown in Figure 5 below.
Figure 5 – Polaroid

Format:
Image Effect:
• Polaroid
Image Effect Settings:
• Width - Width of the photo border (default is the width of the image).
• Height - Height of the photo border (default is the height of the image).
• Roundness - Amount of roundness to apply to the photo corners.
• TopPadding - Amount of padding on the top of the image.
• BottomPadding - Amount of padding on the bottom of the image.
• SidePadding - Amount of padding on the sides of the image.
• Text - Text to be added to the bottom of the image.
• TextBold – Font’s Bold status as a True/False value.
• Font - Name of the font (must be registered to the server, e.g. “Courier
New”).
• FontSize - Point size of the font.
• ForeColor – Color of the Polaroid border, as a hex value (e.g.
ForeColor=FFFFFF would create the normal white Polaroid border).
• Rotate - Angle to rotate the picture.

v2007.2 Released 10/15/2007

 Customizing Images in Arena

• PerspectiveShadow - Sets a perspective shadow with the width percentage of

the perspective shadow based on the image’s width (e.g. 7
PerspectiveShadow=80 would set a perspective shadow with a width
percentage of 80).
• DropShadow - Adds drop shadow to the Polaroid. This effect has the
following sub-settings which must be delimited by a comma and provided in
the order below (e.g. DropShadow=15,50,15,300,333333).
1. Distance – Distance away from the image.
2. Opacity – How transparent the shadow should appear.
3. Softness – How fuzzy the edges of the shadow should look (note large
values will greatly slow down the rendering of the image).
4. Angle – Which direction the shadow will cast.
5. Shadow Color – What color the shadow should be (must be provided in
a hex format i.e. ‘333333’ with no # sign).
• BackgroundColor - Sets the color of the background behind the Polaroid, as a
hex value (e.g. BackgroundColor=CCCCCC would create a grey background).

v2007.2 Released 10/15/2007

 Customizing Images in Arena

Rotate
The Rotate effect rotates the image in a counter-clockwise direction starting on the 8
x-axis, as shown in Figure 6 below.
Figure 6 – Rotate

Format:
Image Effect:
• Rotate
Image Effect Settings:
• Angle – Angle of rotation in degrees counter-clockwise from the x-axis (x-
axis begins at 3-o’clock).

v2007.2 Released 10/15/2007

 Customizing Images in Arena

Rounded Corners
The Rounded Corners effect trims the corners of the image to a rounded shape, as 9
shown in Figure 7 below.
Figure 7 – Rounded Corners

Format:
Image Effect:
• RoundedCorners
Image Effect Settings:
• Roundness – Roundness of the corners, as a percentage of the top/bottom to
be rounded off.
• DropShadow - Adds drop shadow to the rounded image. This effect has the
following sub-settings which must be delimited by a comma and provided in
the order below (e.g. DropShadow=15,50,15,300,333333).
1. Distance – Distance away from the image.
2. Opacity – How transparent the shadow should appear.
3. Softness – How fuzzy the edges of the shadow should look (note large
values will greatly slow down the rendering of the image).
4. Angle – Which direction the shadow will cast.
5. Shadow Color – What color the shadow should be (must be provided in
a hex format i.e. ‘333333’ with no # sign).
• BackgroundColor - Sets the color of the background behind the rounded
image, as a hex value (e.g. BackgroundColor=CCCCCC would create a grey
background).

v2007.2 Released 10/15/2007

 Customizing Images in Arena

10

© 2007 Arena, a division of Shelby Systems Inc. All Rights Reserved.

v2007.2 Released 10/15/2007