Using PVII ShowPic (9) - Moving the descriptive text

How is it done?

It's quite simple - all it requires is a little planning, and the use of two of the other powerful extensions included in Park Avenue - Layout Designer 2 and AutoLayers. (Note: both these extensions are also available free from the Project Seven web site.)

Create the ShowPic layer in the ordinary way BUT de-select the Descriptive Text option (if adapting an existing Park Avenue page, you need to delete the existing Descriptive text by highlighting the ShowPic layer and manually deleting the text in either Design or Code View)
Insert a new layer for the descriptive text, give it an appropriate name, such as descText, and dimensions
Enter your descriptive text in a paragraph inside the new layer, then apply the "imgCaptions" CSS style (or whatever style you want)
In the layers panel, click to the left of the descText layer name to close the eye and set the layer to hidden
Then apply the ShowPic behaviour to your trigger — in this case the thumbnail image — in the normal way (if adapting an existing Park Avenue page, skip this step - the thumbnail already has the appropriate behaviour applied to it)
After closing the ShowPic behaviour dialog box, highlight the <a> tag on the trigger again, click the + button on the behaviours panel, and navigate to Studio VII > CSS > PVII Layout Designer 2 - Layer
Align the descText layer alongside the ShowPic layer, using whichever method best suits your design. On this page, descText has been aligned to the right using method E, with a vertical offset of 20 and a horizontal one of 10. Whichever method you use, a positive vertical offset shifts the layer down the screen, and a positive horizontal offset shifts it to the right. Negative offsets, surprise, surprise, move the layer in the opposite direction.

If adapting an existing PA page, the thumbnail already has a Layer Designer behaviour applied. Highlight this behaviour in the Behaviour Panel, and double click. When then dialog box opens, click the "Add" button to create a new event. Select the appropriate layers and alignment settings, then move the new event ABOVE the existing "bottomlayer" event with the "Up" button.
After closing the Layout Designer dialog box, click on the + button on the behaviours panel again, and navigate to Studio VII > Auto Layers by PVII
Select the descText layer to show. There is no need to select any other layers, unless you want to reveal other hidden elements at the same time. On this page, for example, these instructions were in a hidden layer called footerLayer, so both have been selected. Then click OK.

If adapting an existing Park Avenue page, things are a bit more complicated, although quite logical once you understand what it is you're trying to do. Basically, you need to set up a show/hide sequence to reproduce what a visitor would see by clicking on each thumbnail in turn. Fortunately, Autolayers makes it a lot easier than the normal Dreamweaver Show/Hide behaviour because you can set up as many as 10 different sequences on a single page (see "Set to Use" below). The first descText layer needs to be displayed as soon as the page loads. Since Park Avenue portfolio pages already use sets 1 and 8, let's use set 2 for this example. Highlight the <body> tag on the Dreamweaver status bar, then click on the + button in the behaviours panel, and choose Studio VII > Auto Layers. Select layer descText1 to show, click OK, and set it in the behaviours panel as an "onLoad" event. Now apply a similar Autolayers event to each thumbnail in turn (this time using "onClick"), starting with thumbnail 1, so that descText1 appears when thumbnail1 is clicked, descText2 is shown when thumbnail2 is clicked, and so on. You may wonder why it's necessary to do it for thumbnail1 when it's already been set as an onLoad event — it's because a visitor may want to go back to the first image after viewing others.
Apply the N4 Return False Fix (if it's already applied, make sure it comes at the bottom of the list in the behaviours panel)

Instead of using Layout Designer 2, you could simply calculate the position you want the descText layer to appear in, and create an absolutely positioned layer. The advantage of Layout Designer 2 is that it will automatically place the descriptive text at the same distance from the full size image, regardless of how many changes you make to the image itself.

Don't forget that each layer requires a unique name. If you plan to use this technique in Park Avenue or in a gallery of images, it's probably a good idea to give your descText layers the same numbers as the ShowPic layers - descText1, descText2 and so on
What makes AutoLayers particularly powerful is that it allows you to create up to 10 completely independent Show-Hide systems on the same page. Most times you need only the default "Set One", but if your page already has an AutoLayers sequence set on it, you need to choose a different one from "Set to Use" at the bottom of the dialog box. The Portfolio pages in Park Avenue already have TWO different AutoLayers sequences applied to them. One controls the drop-down scroller menu, and uses Set One. The other operates the Artist Bio Show-Hide sequence, and uses Set Eight. So, to use this technique on a Park Avenue portfolio page successfully, you MUST choose one of the remaining unused sets. Any will do - just as long as it's not 1 or 8!
When setting subsequent events, such as clicking on another thumbnail, remember to use the same set number. Selecting a new descText layer will automatically hide the previous one without affecting any other layers on the page. If for any reason, you want to create an event to hide all descText layers, add an AutoLayers behaviour, select the same set, and click OK without marking any layers to "show"

By putting the caption and the descriptive text in separate layers, you gain full control over where they go. Of course, they don't just have to go on the right. If you've got mountains of descriptive text, you could even put it in a scroller, but don't go wild. Consider what your visitors are likely to find most user friendly. Using too many "cool" techniques on a page can be confusing and get in the way of the message you're trying to convey.

Acknowledgements

This demonstration and explanation of how PVII ShowPic works grew out of exchanges with members of the pviiwebdev newsgroup. It started as a single page with a simple text link, and then with the encouragement and help of several people, like Topsy, it just growed and growed. Ken Ford and Karen Boyle of the PVII Support Team have also made valuable comments, and helped correct mistakes in earlier drafts. If it has helped you solve some problems in building your websites, the effort will have been worthwhile.

Taking ShowPic out of the box

Putting the descriptive text where you want it

How is it done?

Acknowledgements