Fancy Image User Manual by Bonnie Tessler

for Rapidweaver

USER MANUAL BY JOE WORKMAN

h t t p : / / j o e w o r k m a n . n e t • © 2 0 0 9 A s p e c t S e r v i c e s , L L C • December 10, 2009 • Version 1.0

Table of Contents

Overview!

System Requirements!

Installation!

Additional Resources!

Image Caption Stack!

Image Zoom Stack!

Image Magnify Stack!

Image Hover Stack!

Image Lightbox Stack!

Image Preview Stack!

Image Reflection Stack!

Image Reveal Stack!

Image 360 Degree Stack!

Image Puzzle Stack!

Appendix!

Version History!

Overview

Every one wants images on their webpages! With the Fancy Image Stacks, you can add elegant, yet simple, effects to your images. There are over a dozen image stacks in this set that give you over 24 effects to chose from. The Fancy Image Stacks utilize JQuery and work very well in all of our favorite browsers: Safari, Firefox, Chrome, Camino, Opera, and Internet Explorer (not a favorite but a necessary evil). They even work on your iPhone! This document will go over the following topics for each stack in this set: 1. Overview: This section will explain what the stack does. 2. Basic Setup: This will give you a basic step-by-step process to getting your stacks up and running quickly. 3. Stack Settings: This section will go over all of the available setting and how to use them. 4. CSS Customization: This section will go over the css classes that you can utilize in order to tailor the stacks to your exact liking. This is for the more advanced users that are knowledgeable about CSS. This manual will not teach you CSS. If you would like to learn CSS, please go to your favorite book store and get a book. The Rapidweaver Forums are always a great resource as well for novice assistance.

System Requirements Since the Fancy Image Stacks are plugins, you will need to ensure that you have the following products installed. In order for us to properly support you, please ensure that you are running the minimum versions specified. Apple OS X 10.5+ (Leopard) (http://apple.com/osx) Realmac Software Rapidweaver 4.2+ (http://www.realmacsoftware.com) YourHead Stacks Plugin 1.2+ (http://yourhead.com/stacks)

Installation Installing the Fancy Images Stacks are simple. Open the downloaded disk image and simply drag the Fancy Image stacks onto the Install Stacks folder. The image below may very depending on which image stacks you purchased.

The disk image also contains this user manual as well as a sample Rapidweaver site. This is the same RW file that is used to create http://fancyimage.joeworkman.net

iii

Additional Resources For a live demo and support for this plugin please refer to the following sites: Fancy Image Product Page: http://joeworkman.net/products/fancyimage Fancy Image Test Site: http://fancyimage.joeworkman.net Fancy Image Support: http://joeworkman.net/support Rapidweaver Forums: http://www.realmacsoftware.com/forums YourHead Stacks Plugin Support: http://yourhead.com/stacks/support

Image Caption Stack Overview The Image Caption Stack is the simplest stack in this set. There are no fancy effects and no javascript. However, the stack does allow you to place a text caption below your images. It gives you are similar effect as an Image Stack with a Text Stack below it. Although, since this is all within the same stack, the text will be much closer to your image, making it look like a true caption should.

Basic Setup

1. When you drag your Image Caption Stack out, you will see the above stack appear on your page. 2. The top section of the stack where there is a down arrow, you will need to drag your image. 3. The text section below the image is where you will type in your desired caption. 4. Now preview and enjoy! For an overview of the remaining settings please refer to the Stack Settings section.

! 1

Image Zoom Stack Overview The Image Zoom Stack gives youâ&#x20AC;&#x2122;re a great effect of zooming the image from a thumbnail to the full version by simply clicking on the image. This stack utilizes JQuery javascript framework in order to accomplish this effect. The Zoom Stack was built so you you can have as many of them on the page as you like.

Basic Setup

1. When you drag your Image Zoom Stack out, you will see the above stack appear on your page. 2. All of the configuration for this stack is done via the settings HUD. In order to add your images, you will need to make sure you add you image to the Page Assets and set the path to your image within the Image Path setting. Please refer to the Adding Page Assets section in the Appendix. 3. You can then set the width & height settings to the desired size for the thumbnail. 4. Now preview and enjoy! For an overview of the remaining settings please refer to the Stack Settings section.

! 1

Stack Settings Include JQuery: This setting should be uncheck if other plugins or your theme is already loading JQuery. It should also be unchecked for any additional Zoom stacks that you have on a given page. Include Magnify JS: This setting should also be unchecked for any additional Zoom stacks that you have on a given page. Image Path: This is the path to the image that you want to display. Please refer to the Adding Page Assets section in the Appendix for additional info. Alignment: This is the alignment of the image in relation to the stack (left | center | right) Height: The height of your image thumbnail. Width: The width of your image thumbnail. Speed: The speed in milliseconds of the zoom effect. Magnify X: The zoom multiple (2x, 3x zoom, etc.) Fixed Width: Ignore the Magnify X setting and zoom to specific width. Magnify Width: The specific zoom width.

! 2

CSS Customizing In this section there will be a review of each of the CSS classes that are used. This section is not intended to teach you CSS. In order to view the defaults styles for each of the below elements, please view the source of your stacks page.

.magnify { } This is the class used for the image <img> element.

NOTE: You will probably need to make sure that the use the !important style attribute to ensure that your custom CSS styles work properly.

! 3

Image Magnify Stack

Overview The Image Magnify Stack is an amazing stack that allows you to hover over an image and have a magnified version of it appear. You can then navigate over the image and watch the magnified version move along with your mouse. This stack utilizes JQuery javascript framework in order to accomplish this effect. The Magnify Stack was built so you you can have as many of them on the page as you like. You just need to ensure that each Magnify stack has its own Unique ID setting.

! 1

Basic Setup

1. When you drag your Image Zoom Stack out, you will see the above stack appear on your page. 2. There are two image settings for this particular stack. The the larger/magnified image needs to be added to the Page Assets and set the path to your image within the Image Path setting. Please refer to the Adding Page Assets section in the Appendix. 3. The next step is to setup the thumbnail. You can drag that same image added to the page assets into the image drop area within the stack. Now use the default stack image settings to resize the image to the desire size for the thumbnail. 4. Now preview and enjoy! For an overview of the remaining settings please refer to the Stack Settings section.

! 2

Stack Settings Include JQuery: This setting should be uncheck if other plugins or your theme is already loading JQuery. It should also be unchecked for any additional Magnify stacks that you have on a given page. Include JQZoom: This setting should also be unchecked for any additional Magnify stacks that you have on a given page. Unique ID: This is a unique ID that needs to be different for each Magnify stack used on a page. Magnify Image: This is the path to the image that you want to Magnify. Please refer to the Adding Page Assets section in the Appendix for additional info. Alignment: This is the alignment of the image in relation to the stack (left | center | right) Title: The title on the magnify box Zoom Height: The height of the magnified image box. Zoom Width: The width of the magnified image box. X Offset: Number of pixels to shift horizontally. Y Offset: Number of pixels to shift horizontally. Magnify Position: The position that you want the magnified window to appear. (right | left | top | bottom)

! 3

#jqzoom-%unique_id% { } This is the id attribute of the <a> tag that is wrapper around the thumbnail image. You will need to substitute the %unique_id% with the ID that you set for the stack.

NOTE: You will probably need to make sure that the use the !important style attribute to ensure that your custom CSS styles work properly.

! 4

Image Hover Stack

Overview The Image Hover Stacks are a great set of stacks that add various hover effects to your images: Fade Out, Slide Out (in 8 directions) and Caption Popup. This stack set contains the following stacks: 1. Fancy Image Hover Scripts - This stack contains all of the necessary javascript libraries and global settings for this stack set. This stack should be loading once per page. 2. Fancy Image Hover - This stack contains a text background with an image cover. When the mouse hovers over the image, the background and text are revealed. This stack supports the FadeOut and Slide effects. 3. Fancy Image Hover Image - This stack contains an image background with an image cover. When the mouse hovers over the image, the background image is revealed. This stack supports the FadeOut and Slide effects. (The fadeout effect is very cool here!) 4. Fancy Image Hover Popup - This stack contains an image background with a caption that pops up when the mouse hovers over. This stack allows a portion of the caption to always be shown (image above) as well as the ability to hide the entire caption. These stacks utilize the JQuery javascript framework in order to accomplish the effects. The Hover Stacks were built so you you can have as many of them on the page as you like. ! 1

Basic Setup (Fancy Image Hover)

1. Make sure that you have added a Fancy Image Hover Scripts stack to your page. 2. If your stack does not look like the above when you drag it out, you will need to make sure that you have the “Render HTML in Edit Mode” turned off. For more information on how to turn that off, please refer to the Appendix. 3. Now you can drag your desired image into the image drop area. It is recommended to resize the image prior to adding it into the stack then setting the image size setting to 100%. 4. Then you will need to configure the text area with your desired text and replace the default “Lorem ipsum” text. 5. Now preview and enjoy! For an overview of the remaining settings please refer to the Stack Settings section.

! 2

Basic Setup (Fancy Image Hover Image)

1. Make sure that you have added a Fancy Image Hover Scripts stack to your page. 2. If your stack does not look like the above when you drag it out, you will need to make sure that you have the â&#x20AC;&#x153;Render HTML in Edit Modeâ&#x20AC;? turned off. For more information on how to turn that off, please refer to the Appendix. 3. Now you can drag your desired images into the image drop areas. The top image will be in the background and the bottom image will be the cover. It is recommended to resize the image prior to adding it into the stack then setting the image size setting to 100%. (Tip: I recommend the fadeout setting for this stack, its very slick!) 4. Now preview and enjoy! For an overview of the remaining settings please refer to the Stack Settings section.

! 3

Basic Setup (Fancy Image Hover Popup)

1. Make sure that you have added a Fancy Image Hover Scripts stack to your page. 2. If your stack does not look like the above when you drag it out, you will need to make sure that you have the “Render HTML in Edit Mode” turned off. For more information on how to turn that off, please refer to the Appendix. 3. Now you can drag your desired image into the image drop area. It is recommended to resize the image prior to adding it into the stack then setting the image size setting to 100%. 4. Then you will need to configure the text area with your desired text and replace the default “Lorem ipsum” text. (Tip: I recommend that you set your text to use an h3 setting for the first line in your caption if you are not going to hide the entire caption.) 5. Now preview and enjoy! For an overview of the remaining settings please refer to the Stack Settings section.

! 4

Stack Settings (Fancy Image Hover Scripts) Include JQuery: This setting should be uncheck if other plugins or your theme is already loading JQuery. Width: The width of the Image Hover stacks. All of the image stacks will have the same width setting. They cannot be different. Height: The height of the Image Hover stacks. All of the image stacks will have the same height setting. They cannot be different. Slide Speed: The speed in milliseconds of the slide effect. Popup Speed: The speed in milliseconds of the popup effect. Fade Speed: The speed in milliseconds of the fadeout effect. Caption Height: The total height of the caption when you hover over the image. (Popup stack only) Caption Reveal: The height of the caption reveal when it is not completely hidden. (Popup stack only)

! 5

Stack Settings (Fancy Image Hover) Effect Type: The desired effect. You can chose from the following: fadeout, slideright, slideleft, slideup, slidedown, slidediag-lt, slidediag-lb, slidediag-rt, slidediag-rb. Background: The color of the background. Text Padding: The padding surrounding the back text area. (Tip: If you are using <h3> & <p> tags for your content, you probably want to set this to 0) Border: The color of the border around the image Border Size: The size of the border.

Stack Settings (Fancy Image Hover Image) Effect Type: The desired effect. You can chose from the following: fadeout, slideright, slideleft, slideup, slidedown, slidediag-lt, slidediag-lb, slidediag-rt, slidediag-rb. Border: The color of the border around the image Border Size: The size of the border.

! 6

Stack Settings (Fancy Image Hover Popup) Completely Hide Caption: This will completely hide the caption and show no reveal at all. Caption Background: The color of the caption background. Text Padding: The padding surrounding the caption text area. (Tip: If you are using <h3> & <p> tags for your content, you probably want to set this to 0) Border: The color of the border around the image Border Size: The size of the border.

! 7

.boxgrid { } This is the class that is used to wrap every Image Hover stack. .boxcaption { } This is the class assigned to all Popup Caption Boxes. .boxback { } This is the class assigned to background text area of the Fancy Image Hover stack. .caption { } This is the class assigned to just the Popup Caption Box that donâ&#x20AC;&#x2122;t completely hide. .captionfull { } This is the class assigned to just the Popup Caption Box that do completely hide. .%effect_type% { } Every Image Hover stack gets assigned to a class named with its effect name. You will need to substitute %effect_type% with the actual effect name. This class exists within the same div as the .boxgrid class. The following effects fall into this category and are used as classes: fadeout, slideright, slideleft, slideup, slidedown, slidediag-lt, slidediag-lb, slidediag-rt, slidediag-rb

NOTE: You will probably need to make sure that the use the !important style attribute to ensure that your custom CSS styles work properly.

! 8

Image Lightbox Stack

Overview The Image Lightbox Stack gives you the ability to create lightbox galleries with the flexibility of allowing you to place you images anywhere you want on the page. It provides navigation controls within the lightbox that make it simple to click through the images in the gallery. The Lightbox stacks set contains two different stacks. The Fancy Image Lightbox stack is where you would start when adding your first Image Lightbox stack to your page. If you would like to add any additional stacks you will then need to use the Image Lightbox Multi stack. The Fancy Image Lightbox stack should only appear once on your page. This stack set utilizes JQuery javascript framework in order to accomplish the lightbox effect.

! 1

Basic Setup

1. When you drag your Image Lightbox Stack out, you will see the above stack appear on your page. 2. There are two image settings for this particular stack. The the larger image that shows up in the lightbox needs to be added to the Page Assets and set the path to your image within the Image Path setting. Please refer to the Adding Page Assets section in the Appendix. 3. The next step is to setup the thumbnail. You can drag that same image added to the page assets into the image drop area within the stack. Now use the default stack image settings to resize the image to the desire size for the thumbnail. 4. Now preview and enjoy! For an overview of the remaining settings please refer to the Stack Settings section.

! 2

Stack Settings Include JQuery: This setting should be uncheck if other plugins or your theme is already loading JQuery. Overlay BG: The color of the background the covers the webpage behind the lightbox. Opacity: The level of transparency of the background. Fixed Navigation: Have the navigation tags fixed and not auto-hide. Image Path: This is the path to the image that you want to show in the lightbox. Please refer to the Adding Page Assets section in the Appendix for additional info. Title: The title shown inside the lightbox. Align: This is the alignment of the image in relation to the stack (left | center | right)

NOTE: The Fancy Image Lightbox Multi stack settings are not shown. This is because it just contains a subset of the setting from above. Please refer to the above setting instructions for this stack as well.

! 3

.lightbox_gallery { } This is the class for the <a> element that launches the lightbox. #jquery-overlay { } This is the id for lightbox overlay element. #jquery-lightbox { } This is the id for the lightbox element itself. #lightbox-loading { } This is the id for the lightbox loading element. #lightbox-nav { } This is the id for the navigation element. #lightbox-nav-btnPrev { } This is the id for the Previous button. #lightbox-nav-btnNext { } This is the id for the Next button. #lightbox-image { } This is the id for the image that is displayed in the lightbox. #lightbox-container-image-data-box { } This is the id for the data box below the image. #lightbox-image-details-caption { } This is the id for the caption section in the data box #lightbox-secNav-btnClose { } This is the id for the close button.

NOTE: You will probably need to make sure that the use the !important style attribute to ensure that your custom CSS styles work properly.

! 4

Image Preview Stack

Overview The Image Preview Stack show a full scale preview of an image when the mouse hovers over a thumbnail. The preview window hovers along with the mouse above all content and can be configured to show in any position relative to the mouse (left, right, above or below). This stack utilizes JQuery javascript framework in order to accomplish the preview effect.

! 1

Basic Setup

! 2

Stack Settings Include JQuery: This setting should be uncheck if other plugins or your theme is already loading JQuery. It should also be unchecked for any additional Preview stacks that you have on a given page. Include image_preview.js: This setting should be unchecked for any additional Preview stacks that you have on a given page. Image Path: This is the path to the image that you want to show in the lightbox. Please refer to the Adding Page Assets section in the Appendix for additional info. Alignment: This is the alignment of the image in relation to the stack (left | center | right) Title: The title shown inside the lightbox. X Offset: Number of pixels to shift the preview window horizontally. (Tip: you can use positive & negative numbers) Y Offset: Number of pixels to shift the preview window horizontally. (Tip: you can use positive & negative numbers) Preview BG: Background color of the preview window. Preview Text: Color of the text within the preview window. Border: Color of the preview window border. Border Size: Size of the preview window border.

! 3

.preview { } This is the class for the <a> element that launches the preview. #preview { } This is the id for the preview window.

NOTE: You will probably need to make sure that the use the !important style attribute to ensure that your custom CSS styles work properly.

! 4

Image Reflection Stack

Overview The Image Reflection Stack provides an elegant reflection to your images. Drag and drop and instant reflection. It could not be easier! This stack utilizes JQuery javascript framework in order to accomplish the reflection effect.

Basic Setup

1. When you drag your Image Lightbox Stack out, you will see the above stack appear on your page. 2. You can drag your desired image into the image drop area within the stack. Now use the default stack image settings to resize the image to the desire size for the thumbnail. (Note: Adding shadow effects to the image will break this stack) 3. Now preview and enjoy! For an overview of the remaining settings please refer to the Stack Settings section. ! 1

Stack Settings Include JQuery: This setting should be uncheck if other plugins or your theme is already loading JQuery. It should also be unchecked for any additional Reflection stacks that you have on a given page. Include Reflection.js: This setting should be unchecked for any additional Reflection stacks that you have on a given page. Unique ID: This is a unique ID that needs to be different for each stack used on a page. Height: The height of the reflection. Padding: The gap between the image and the reflection. Opacity: The transparency of the reflection.

#reflect-%unique_id% { } This is the id for the reflection div wrapper. The variable %unique_id% should be replaced with the contents of the Unique ID setting.

NOTE: You will probably need to make sure that the use the !important style attribute to ensure that your custom CSS styles work properly. ! 2

Image Reveal Stack

Overview The Image Reveal Stack gives you show a portion of a larger image and with the click of a mouse, reveal the full image. The Reveal stacks set contains two different stacks. The Fancy Image Reaveal stack is where you would start when adding your first Image Lightbox stack to your page. If you would like to add any additional stacks you will then need to use the Image Reaveal Multi stack. The Fancy Image Reaveal stack should only appear once on your page. This stack set utilizes JQuery javascript framework in order to accomplish the lightbox effect.

! 1

Basic Setup

1. If your stack does not look like the above when you drag it out, you will need to make sure that you have the “Render HTML in Edit Mode” turned off. For more information on how to turn that off, please refer to the Appendix. 2. Now you can drag your desired image into the image drop area. 3. Then you will need to configure the text area with your desired text and replace the default “Lorem ipsum” text. 4. Now preview and enjoy! For an overview of the remaining settings please refer to the Stack Settings section.

! 2

Stack Settings Include JQuery: This setting should be uncheck if other plugins or your theme is already loading JQuery. It should also be unchecked for any additional Reveal stacks that you have on a given page. Small Border: The size of the border for the thumbnail. Big Border: The size of the border when the image is revealed. Border: Color of the border. Caption Height: The height of the caption area. Small Image Width: The width of the small image. Small Image Height: The height of the small image Background: The background color. Speed: Speed in milliseconds that the image is revealed. X Offset: The x position of the large image that is shown when shrunk. Y Offset: The Y position of the large image that is shown when shrunk. Use Button Link: Use a button or text link for the reveal. Link Text: Text to be used for the link if no button.

NOTE: The Fancy Image Reveal Multi stack settings are not shown. This is because it just contains a subset of the setting from above. Please refer to the above setting instructions for this stack as well. ! 3

.photo_slider { } This is the class for the entire revealer element. .photo_slider_img { } This is the class for the image .info_area { } This is the class for the data area below the revealed image. .more_info { } This is the class for the more info area below the small image.

NOTE: You will probably need to make sure that the use the !important style attribute to ensure that your custom CSS styles work properly.

! 4

Image 360 Degree Stack

Overview The Image 360 Degree Stack allows you to show off your products with a 360 degree view. As you hover your mouse over the image, it will rotate around to showcase all angles of the product. This is accomplished through combining multiple images in a sequence and rotate through them. This stack utilizes JQuery javascript framework in order to accomplish this effect. The 360 Degree Stack was built so you you can have as many of them on the page as you like.

! 1

Basic Setup

1. When you drag your Image Zoom Stack out, you will see the above stack appear on your page. (Note: you can preview the stack now and view the default image set.) 2. All of the configuration for this stack is done via the settings HUD. In order to use your own images, you will need to follow the instructions in the Image Sequence Overview below. You will need to either upload these images to your server or add them to your Page Assets. Please refer to the Adding Page Assets section in the Appendix. 3. You will then need to setup the File Path & Prefix and File Extension settings. 4. Now preview and enjoy! For an overview of the remaining settings please refer to the Stack Settings section.

Image Sequence Overview You can have from 2 to 100 images in sequence. Of course the more images you have, the smoother the animation. In order for the stack to properly put the images in sequence there needs to be a counter in the file name. The format of the file looks like this: $path/$prefix$counter.$extension -- e.g. index_assets/my_image1.jpg In the example above the File Path & Prefix setting would be “index_assets/my_image” In the example above the File Extension setting would be “jpg” If I had 25 images in this example the number in file name would change from 1-25. ! 2

Stack Settings Include JQuery: This setting should be uncheck if other plugins or your theme is already loading JQuery. It should also be unchecked for any additional 360 stacks that you have on a given page. Include JQuery-360: This setting should also be unchecked for any additional 360 stacks that you have on a given page. Unique ID: This is a unique ID that needs to be different for each stack used on a page. File Path & Prefix: This is the path and prefix to the images files that you will be using for the 360 view. All files must have the same path and prefix. Please refer to the Basic Setup section above for more info. File Extension: This is the file extension of the images used. All images must have the same extension. Speed: The number of full 360 rotations that will occur over the width of the image. No. Images: The total number of images used. Reverse Direction: Rotate the image in the opposite direction as the mouse. Click â&#x20AC;&#x2DC;n Drag to Move: For the rotation to occur, you must click,hold and drag the mouse across the image. ! 3

#my360-%unique_id% { } This is the id used for each of the image <img> elements. The %unique_id% variable will need to be the ID set in the Unique ID field.

NOTE: You will probably need to make sure that the use the !important style attribute to ensure that your custom CSS styles work properly.

! 4

Image Puzzle Stack

Overview The Image Puzzle Stack is a really fun stack that allows you to turn any image into puzzle like above. The puzzles are very easy to play, just click on the square you would like to move. The puzzle also keep track of how many moves you have done and how long it took you. This stack works great as a marketing tool for you website by letting your customers have a little fun! This stack utilizes JQuery javascript framework in order to accomplish the reflection effect.

! 1

Basic Setup

1. When you drag your Image Puzzle Stack out, you will see the above stack appear on your page. 2. You can drag your desired image into the image drop area within the stack. Now use the default stack image settings to resize the image or add any other effects that you like. 3. Now preview and enjoy! For an overview of the remaining settings please refer to the Stack Settings section.

! 2

Stack Settings Include JQuery: This setting should be uncheck if other plugins or your theme is already loading JQuery. Language: The language code in order to translate the stack text for your language. Rows: The number of rows in the puzzle. Columns: The number of column in the puzzle. Empty Cell: The cell number that will be empty at start. Show Numbers at Start: Show the numbers on the puzzle pieces at start. Shuffle at Start: Shuffle the puzzle pieces at start. Show Shuffle Button: Shuffle Button to restart puzzle. Show Original Button: Original button shows what the original image looks like. Show Numbers Button: Numbers button turns on and off the numbers on the puzzle pieces. Show Counter & Timer: The moves and seconds counters.

! 3

#my_puzzle { } This is the id for the div element that contains the puzzle. .jqPuzzle { } Outermost element which holds the full puzzle interface .jqp-wrapper { } Wrapper which holds the puzzle pieces and the solution image .jqp-piece { } A single puzzle piece .jqp-controls { } The controls area which holds the buttons and the display .jqp-solved { } Solved state for the display (non-shuffled puzzle)

NOTE: You will probably need to make sure that the use the !important style attribute to ensure that your custom CSS styles work properly.

! 4

Appendix Adding Page Assets There are several of the Fancy Image stacks that require you to source image files that are external to the stack itself. There are two primary ways to accomplish this: manually uploading to the server and utilizing the page assets feature in Rapidweaver.

Manually Uploading to Server You can manually upload the image files to your web server via your favorite FTP program. Then you can configure the file path to the location that the files were copied to. 1. I upload a file called my_image.jpg to my webserver in the folder called assets. 2. I can verify my path by going to http://joeworkman.net/assets/my_image.jpg. 3. Once I have verified the image is in the location, I can configure my Image Path to be /assets/my_image.jpg.

Using Page Assets The other alternative is to utilize the Page Assets feature of Rapidweaver. 1. To access the Page Assets in Rapidweaver, you will need to open up your Page Info/ Page Inspector window and go to the Header tab. 2. Then you will need to go to the Assets Tab.

! 1

Click on the Add Files button and navigate to the image file you want to add.

4. Now the tricky part of figuring out the path to your image file. a. If your Rapidweaver page is the only page that is contained within its folder, than the path to your image will be “assets/my_image.jpg”. b. If your Rapidweaver page (for this example: index.html) is NOT the only page that is contained within its folder, than the path to your image will be “index_assets/my_image.jpg” (%page_name%_assets/%image_name%).

! 2

Turn Off “Render HTML in Edit Mode” Follow the below steps to turn off the Render HTML in Edit Mode. 1.

Open the Stack Setting HUD window that you want to turn off “Render HTML in Edit Mode.”

2. Click on the Advanced button at the bottom of the settings HUD. 3. This will open up the Page Inspector for the Stacks Page. You will find the checkbox for “Render HTML in Edit Mode.” Uncheck it..

! 3

Version History Version 1.0 -- 11/10/2009 1. Initial Public Release.

! 4