To utilize the built-in banner area for display of your images, please follow the instructions below.

1. Click and drag your image into the Resources area of the project file (banner images used on the preview site measured 1200x x 600px. Images with small dimensions may not display properly due to the size of the banner area on larger viewing devices). The Resources area can be found on the left hand column of RapidWeaver just below your webpages. (Please note that the Resources area is limited to RapidWeaver 5 and above).

2. Insert the following code in the Custom CSS box within RapidWeaver (The Custom CSS area can be found by clicking on the Page Info icon at the top-right side of your project file. A panel will appear -- please click on the Header label. The Custom CSS box is located towards the center of the panel and labeled CSS):

#feature {background-image: url(%resource(my-image.jpg)%);}

3. Replace the "my-image" with the name of the image. (Please ensure that the name of your image is all lowercase and does not contain any spaces, characters, or symbols. Failure to do so may prevent the image from displaying upon publishing your site).

4. Your banner image will now appear in preview mode.

To utilize the built-in responsive slideshow for any page, please follow the instructions below.

1. Click and drag your images into the Resources area of the project file. The Resources area can be found on the left hand column of RapidWeaver just below your webpages. For proper display, please ensure slideshow images have a width of at least 960px. The height does not require a set measurement, however the height of the actual image will determine the height of the slideshow. All slideshow images should share the same dimensions for proper display).

(Please ensure that the name of your image is all lowercase and does not contain any spaces, characters, or symbols. Failure to do so may prevent the image from displaying upon publishing your site).

2. Please insert the following code in the sidebar area:


<div id="myExtraContent1">
<div class="flexslider">
<ul class="slides">

<li>
<img src="%resource(my-image.jpg)%" />
</li>

</ul>
</div>
</div>


3. Replace the word my-image within the code to the name of the image you would like to have as the first image for your slideshow. You have now just completed your slideshow with 1 image.

4. For each additional image you would like to add to your slideshow, you will need to add the following line of code for each image:

<li>
<img src="%resource(my-image.jpg)%" />
</li>


The code below shows the additional line of code should be placed after the first li sequence, and what your sidebar area should look for a slideshow with two images. You may continue to add images to your slideshow as needed. Please note that images will appear in corresponding order.


<div id="myExtraContent1">
<div class="flexslider">
<ul class="slides">

<li>
<img src="%resource(my-image.jpg)%" />
</li>

<li>
<img src="%resource(my-image.jpg)%" />
</li>

</ul>
</div>
</div>


5. Highlight the entire code in the sidebar area and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen. If this is done correctly, the entire code will have a pink highlight.

6. Check the Display On under Built-In-Slideshow in the Styles section of RapidWeaver.

(There is also an option to choose between a slideshow that will transition images with a fade-in, fade-out feature, or slider effect under Slideshow Transition in the Style Options section.)