Review Foundry Review Engine User Manual CONFIGURATION -- Skin Images

Adjust Text:  a a a a

« Table of Contents   |   Obtain Review Foundry »

• CONFIGURATION
• Skin Images
• Replacing General Images
• Adding New Images

CONFIGURATION

Skin Images

There are several default images that come with the Review Foundry distribution and which appear on the public pages. For example, the little yellow alarm clock that appears next to the link for the page where visitors can subscribe to review alerts. You may wish to replace some of these images with your own versions. You could directly insert the HTML code that references an image on your site, but then you destroy the portability of your skin. To replace images in a way that preserves skin portability, see the next 2 sections on Replacing General Images, and Replacing Rating Images. You may also want to add new images to the skin templates. For example, you might want to add a common image to the navigation.ttml template, so that this image appears on all pages. To do this in a portable way, see the section on Adding New Images.

Replacing General Images

To replace any of the default skin images, go to the Skin Images frame of the Configure control panel. There you will be presented with all of the replaceable images common to all skins. Each image is displayed, so you can see what it currently looks like, and a file upload form element is located next to it. The actual name of the image file is shown to the right of the upload button. For example, the entry for the image used to indicate review subscriptions might look like this:

image_misc_review_alert       alarm_clock_yellow.gif

To replace this alarm clock image with something else, click on the Browse... button to bring up the file upload dialog box. Navigate to an image file on your system, select it, then return to the Skin Images frame. When you save your image settings by clicking on the Update Images button at the bottom of the page Review Foundry will upload the new image, determine its width, height, and file name, and write these to the current skin configuration file. In this case, because the image variable name is image_misc_review_alert, the new image file is uploaded to the image directory named:

/html/path/to/.../skins/default/images/misc/

The corresponding file name/width/height information is written to the file:

/cgi-bin/path/to/.../my/skins/default/SkinData.pm

Replacing Rating Images

Many skin authors are likely to want to replace the images used to represent a review rating. The replacement procedure mirrors that discussed in the previous section, and is complicated only in that several component image files may be involved in the construction of a "single" rating image.

Review Foundry offers 4 different ways to display ratings in a graphical format:

1.   Star Representation     Because the image of a star is so often used as the repeating icon when displaying a rating value graphically, we will often refer to this rating style as the "stars" method, though any icon will do, and in fact the default repeating icon use by Review Foundry is actually a cross. This representation is very simple. There is a solid icon, a half-solid icon, and a hollow icon. If a rating value of 3.5 out 5.0 needs to be represented graphically, 3 solid icons, a half-solid icon, and a hollow icon are strung together. Thus to replace the Repeated Icon images you will have to come up with 3 separate replacement images. Note: they should all be of the same size or else you will see distortion when they are shown. The 3 default images, and the configuration variables which store the corresponding file name are:   image_star_solid     star_solid.gif     image_star_half     star_half.gif     image_star_hollow     star_hollow.gif     2.   Bar Representation     The second way that a rating value may be represented graphically is by using an extending bar. The advantage to this representation is that it is continuous. If the rating value is 7.8 out of 10.0 a bar can be placed that is 78 percent the length of the maximum possible bar length. This is done by stretching the bar image to the necessary length. To achieve this representation 5 slivers of the bar are needed: a left endcap, two right endcaps (one for each of the two possible bar colors), and two middle segments (again, one for each of the two bar colors). The middle segments are stretched, the endcaps are not. The five default images for this representation are given by:   image_bar_left_solid     bar_left_solid.gif     image_bar_middle_solid     bar_middle_solid.gif     image_bar_right_solid     bar_right_solid.gif     image_bar_middle_hollow     bar_middle_hollow.gif     image_bar_right_hollow     bar_right_hollow.gif   If you replace these images, by performing uploads from the Skin Images frame of the Configure control panel, you should make sure that all 5 images have the same height. The width of each is left to you to decide upon, but common sense suggests that the two endcaps share the same width, as do the two middle segments.   3.   Thermometer Representation     The third way to represent a rating value graphically is virtually identical to the second. This time the 5 icon slivers are combined to create a thermometer-like scale. The same comments as for the bar representation apply here and the five default images for this representation are given by:   image_therm_left_solid     therm_left_solid.gif     image_therm_middle_solid     therm_middle_solid.gif     image_therm_right_solid     therm_right_solid.gif     image_therm_middle_hollow     therm_middle_hollow.gif     image_therm_right_hollow     therm_right_hollow.gif     4.   Colorometer Representation     The fourth and final way to represent a rating value graphically is to use what we term here as a colormeter. That is, a thermometer-like scale that changes color as the rating value increases. In this case the graphical image is NOT represented by a series of component images, as in the other representations. Instead, there are 11 separate images which represent 10 possible rating values plus the zero rating. Thus these could represent the zero value plus the half integer increments from 0.5 to 5.0, or they could represent the zero value plus the integer increments from 1 to 10. If you replace these images, all 11 should share the same dimensions. The 11 default images for this representation are given by:   image_color_0_0     color_0_0.gif     image_color_0_5     color_0_5.gif     image_color_1_0     color_1_0.gif     image_color_1_5     color_1_5.gif     image_color_2_0     color_2_0.gif     image_color_2_5     color_2_5.gif     image_color_3_0     color_3_0.gif     image_color_3_5     color_3_5.gif     image_color_4_0     color_4_0.gif     image_color_4_5     color_4_5.gif     image_color_5_0     color_5_0.gif

Adding New Images

The trick to adding new images to a skin is knowing where to put them and how to reference them from that location. Placement is easy enough, you can put a new image file anywhere in the HTML arm of your skin. However, to reduce confusion you should probably create a specific subdirectory where all your added images can be found. For instance, if your skin is named "Red Planet Skin" you might create the subdirectory:

/html/path/to/.../skins/red_planet_skin/images/custom/

You are, of course, free to create any subdirectory structure within this added directory. In the templates you'll need to reference image files in your custom directory. To do this you can use the URLs defined in the configuration file. These are accessed by referencing the global.cfg hash which is passed directly to all Template-Toolkit templates. Thus, you can use something like the following to specify the URL of an image file named mars_closeup.gif found in the /custom directory:

[% image_url
	= global.cfg.site_html_url
	_ global.cfg.site_app_url
	_ '/skins/'
	_ global.cfg.skin_id
	_ '/images/custom/mars_closeup.gif'
%]

Remember that the underscore is the concatenation operator in Template-Toolkit templates and the TT parser would fill in the values something like this:

[% image_url
	= '/rs'
	_ '/foundry'
	_ '/skins/'
	_ 'red_planet_skin'
	_ '/images/custom/mars_closeup.gif'
%]

i.e.

[% image_url = '/rs/foundry/skins/red_planet_skin/images/custom/mars_closeup.gif' %]

To turn any image URL into an absolute URL simply prefix the relative URLs shown above with global.cfg.site_document_root_url which is the URL for your homepage.

Note that by referring to the URL values from the configuration file the URL specification becomes portable: the value for [% global.cfg.site_html_url _ global.cfg.site_app_url %] is the site-dependent path to the Review Foundry HTML bin. Note also that you MUST use [% global.cfg.skin_id %] in the template instead of the literal string 'red_planet_skin'. Not only might you rename your skin at some stage (and hence invalid your image references) but users of your skin will almost certainly rename the skin.

Later in your template you'll insert the value defined above into an img tag something like this (it is always a good idea to put in the width and height of your images, though it is not mandatory):

<img src="[% image_url %]" width="420" height="60" border="0" alt="mars closeup">

« Table of Contents   |   Obtain Review Foundry »