Showcase Stack Tutorial

In this brief tutorial, we'll show you how to set up a complete Showcase gallery.

You can download this tutorial and sample RW project to play with it and study more closely how the gallery was put together.
The first thing you need to do is add a Stacks page to your project and then drop the Showcase Stack. Your window will look like the screenshot below. If not, go to Page Inspector>Page and check "Render HTML in Edit mode."

showcaseX

Next, drop a Showcase Content stack in the "Drop stacks here" area. Your page will look like this:

showcaseY

Continue adding Showcase Content stacks. Showcase will add the Content Title in parentheses to help you identify its contents.

Make sure that each Content stack is placed right below the previous one, not inside of it. For example, 2 Content stacks should look like the screenshot below. Notice how the 2 Content stacks are placed relative to the Showcase stack:

RapidWeaverScreenSnapz002

When you're done adding your content stacks, drop a Showcase Settings stack below the Showcase stack. Your page will now look something like this (only shows one Content stack to keep the page short...)

showcaseZ

Showcase Tutorial 1
Review the settings on the left to see how we set up the main Showcase layout and styling...

Here, we set the Width and Height of the images. It's important that all the images have the same size otherwise the gallery will not look very polished.

The Showcase Stack creates the thumbnails automatically by scaling down the full-size images. Set the width and height of the thumbnails.

The remaining options should be self-explanatory otherwise, check the info page for more details...

Please notice a new feature that allows placing the caption area to the left or right. Simply check or uncheck the "Caption on Right" checkbox.
Showcase Tutorial 2
Next, modify the Showcase Content stacks to add your contents. Here, we set the path to the various images. The images included in this tutorial are saved online in the RWExtras server therefore, will show up on your computer (if you are online).

The path is set in one of 3 ways:
  1. If the image is in the Page Assets (RapidWeaver 4), the path is set using the following format: assets/image1.jpg
  2. If the image is in the Resources (RapidWeaver 5), the path is set using the following format: %resource(image1.jpg)% or %resource(folder/image1.jpg)%
  3. If the image is located on a server, the path is set using the following format: http://rwextras.com/media_files/pic1.jpg. Please note that this is the actual path to the first image used in this tutorial. The remaining images are named pic2.jpg, pic3.jpg, and pic4.jpg

To follow this tutorial, you would need to add 4 images therefore will require 4 Showcase Content Stacks using the following Path to Images:
  1. http://rwextras.com/media_files/pic1.jpg
  2. http://rwextras.com/media_files/pic2.jpg
  3. http://rwextras.com/media_files/pic3.jpg
  4. http://rwextras.com/media_files/pic4.jpg
If the "Different Thumbnail" is checked, you'll need to enter a path in the "Thumbnail" input box following the same guidelines as for the full-size images.

We've opted to show both the Titles and Sub-titles in the Caption area and have entered their respective values.
Showcase Tutorial 3
After all the images have been added to the slideshow, it's time to provide the finishing touches to Showcase by modifying the info box of the Showcase Settings stack.

In this stack, you set the duration of the slideshow and decide whether to hide the Navigation, the Controls, and the Index and you have the option to modify the various labels to suit your needs or your language...

Finally, you decide whether the slideshow should start automatically after loading the page and whether to use the Keyboard to control the slideshow.

In this case, we've used the defaults therefore, we're done. The example below shows the final result.

You can download this tutorial and try it yourself. It does take a few steps to select among the many options available in this stack however, we hope you'll agree that the results are worth the effort...

Enjoy!