Introduction
The -literal hint tells SiteGrinder Pro to insert the text contents of the layer without modification when it builds. SiteGrinder will ignore all Photoshop text and paragraph styles and simply copy the text into the HTML.
This allows you to include correct HTML or other codes in the HTML document SiteGrinder Pro is producing. The HTML will be inserted into a DIV the exact dimensions of the type layer allowing easy creation of things like site visit counters.
- WARNING: Because SiteGrinder does not check your code it is very easy to make your pages unviewable by putting broken code in using this technique. Expect minimal tech support for this feature as a result.
Only "paragraph" type layers should be used with this hint since "point" type layers don't have dimension controls.
Click here for more info on paragraph text and point text.
- TIP: If the contents of the -literal layer are obscuring your design in Photoshop you can set the type layer's Opacity to 0%. If its layer visibility is active SiteGrinder will still include it, even though the 0% opacity makes it invisible.
Long stretches of code should usually be imported using the -xmedia hint instead.
Example: A Hit Counter
One of our customers uses a web host that provides an optional web page hit counter. The counter creates a graphic readout of the number of times their page has been viewed. In order to take advantage of this, some custom HTML is required.
1. Finding and checking the script
The script provided by the web host is this:
<IMG SRC= "/common-cgi/counter.cgi?df=page.dat"></IMG>
Since it's important to be XHTML 1.1 compatible, this script requires two corrections. The IMG tag must be changed to lower case, and an "alt" attribute needs to be added to it. The result looks like this:
<img src="/common-cgi/counter.cgi?df=page.dat" alt="hit counter"></img>
Aren't you glad you use SiteGrinder so you don't usually have to worry about those kinds of details?
2. Identifying the layer size
The counter graphic is always 90 pixels wide and 24 pixels tall, no matter what the count is, so that's the size to use when draggin out the paragraph type layer in Photoshop. (The size never changes because the graphic digits used by the script are all the same width, and the script always use the same number of digits by adding zeroes on the left.)
3. Putting it together with SiteGrinder
Knowing these two things we are ready to begin. The steps to add this counter to your SiteGrinder page are as follows:
- Open Photoshop's "Info" palette so you'll be able to see the dimensions as you drag out the new layer
- Select the text tool
- In your document, click and hold down the mouse button at the upper left of where you want the counter to appear
- Drag down and to the right, watching the info window, until you have selected an area 90 X 24 pixels
- Paste this into the type layer:
<img src="/common-cgi/counter.cgi?df=page.dat" alt="hit counter"></img> - Change the name of the layer you just created to "counter-literal"
Because this particular counter relies both on a script that must be in a particular directory and relies on webserver software that can run the script, the counter will only function once the pages containing it are uploaded to the webhost.
