Collage2 Reference Manual
A Collage Overview
To Install Collage, just double-click on on the plugin icon. Double-clicking launches RapidWeaver (if it's not already running) and installs the plugin. Before you begin using Collage, quit and restart RapidWeaver.
Note: RapidWeaver will not activate Collage until the NEXT TIME you launch RapidWeaver. So you MUST quit and restart RapidWeaver to use Collage.
Collage is ShareWare. Before you purchase Collage, please take time to use it in Demo mode. All of the features of Collage are active, but for a limited number of items. If you'd like to use Collage without any limitations, you must purchase a serial number and enter it into the the plugin. Purchasing a serial number only takes a few minutes. It's cheap, fast, and secure. Once you've purchased a serial number and entered it into the plugin, all the limitations are removed. You don't even have to download anything new, the copy you already have will be unlocked.
Your serial number will arrive via email just a few minutes after you complete your purchase. Once you've received your serial number via email, copy it from the email by selecting it in your email application and choosing Copy from the Edit menu. Then, back in the main Collage window, click on the Buy Now button. In the sheet that drops down, click in the Serial Number field and choose Paste from the Edit menu. Click OK to save your serial number in Collage.
Adding a Collage Page
To add a Collage page to your RapidWeaver site, click the + button in the lower left of the RapidWeaver window. The Add Page sheet drops down and shows you the types of pages that you can add. Choose Collage from the list and then click the Add button.
Building a Collage
Adding Collage Items
To add a new item to your Collage:
- Drag image files from the Finder into the Collage item browser. When you first open Collage, the Collage item browser will display, "Drag Images Here."
- Customize the new Collage item by editing the content on the right side of the Collage edit area. Each of the following sections describes a customizable component of Collage.
At the top left of the Edit window is a preview of how your image will look in Collage. There are many ways to customize the image. Just below the preview are the edit tools. You can use them to change the position, rotation, and cropping of your thumbnail image.
The move tool looks like a hand. To use it click on the tool then click and drag your image around the edit area. Be careful not to move it too far outside the visible area of the thumbnail.
The rotate tool is an upward bent arrow around a small rectangle. To use the Rotate tool click on it to enable the tool, then click and drag from right to left to rotate the image counter-clockwise and drag from left to right to rotate the image clockwise.
The crop/resize tool looks like an overlapping frame. This tool resizes the image changing which part of the image is shown inside the thumbnail. Drag from left to right to zoom in to the image and crop a smaller portion. Drag from right to left to reduce the size of the image and allow more to be shown in the thumbnail.
To the right of the three edit tools is a reset button that will automatically fill the entire thumbnail with as much of the image as possible. If you apply a new style or would just like to remove all the edits you've made then one click of the reset brings you back.
To add a title to your Collage, type it into the Title field. The title will appear underneath the thumbnail. The default is that the title is in a prominent font, but you can customize the style or let your theme do that for you.
You can have a second line of text as a subtitle. The subtitle defaults to a font that's a bit smaller than the title, but you can customize it any way you like or hide it altogether.
The hover text will be shown in a box that appears only when the visitor moves their mouse pointer over the Collage item. Before entering text in the Hover Text field you'll need to enable the Hover effect in the Collage settings.
If you enable the Lightbox or Slideshow effect the link to the lightbox will be added for you and the Add Link button will be disabled.
Organizing Your items
To organize the items in your Collage, drag and drop them to arrange them into the order that you'd like.
To remove a Collage item, click on it and then type "delete" or "backspace".
Styling your Collage
There are several ways to to style your Collage. Although Collage can be configured by hand and many details adjusted, if you want to use the same configuration on more than one Collage page in your site, you need to use styles. You can use pre-made styles that were created by a designer, or you can create your own styles. Styles are stored in Collage style files so they're easy to download and share.
Choosing a Style
To choose a style:
- Open the RapidWeaver Page Info window and change to the Page tab. Or just click on the small wrench icon in the bottom left hand side of the window.
- Choose the Styles tab. The Inspector pallete shows each of the styles installed in Collage. Collage comes with a few default styles designed by Elixir Graphcis (http://www.elixirgraphics.com), but you can download more from Elixir or create your own.
- Click on a style's icon to select it.
- Click the Apply button.
Getting More Info About Styles
To see more information about a particular style, click on the style's icon and then click the Details disclosure triangle. The Inspector palette shows more information about the selected style including the author, the file name, and the author's comments. If you'd like to see the style's file in the Finder, click on the "Reveal in Finder" button. The Finder opens a window and selects the file that contains the style. This file contains the whole style, you can move it, delete it, or share it with friends.
Getting More Styles
You can download more styles from other designers and occasionally people post them to the RapidWeaver forum. A couple good places to check are: Elixir Graphics -- http://www.elixirgraphics.com/ Preston You should follwo the instructions that came with the style for installation. If there are no instructions just place the style file into the Collage folder. The Collage folder won't be created until you've used Collage once, after that it will be located here: ~/Library/Applicaton Support/RapidWeaver/Collage
Creating New Styles
If you've made some customizations to any setting in Collage, you can save those settings as a style. To save a new Collage style:
- Click on the Setup button in the lower right corner of the Collage Edit area.
- Choose the Styles tab.
- Click the + button in the lower left corner of the palette. This creates a new, untitled style for your settings. Open the Details disclosure triangle and customize the Title, Author, File Name, and Comments. Collage will create a nice icon for your style and save it in your Collage styles folder. Any changes you make to the Style Details are automatically saved to the style file.
Once you've created a style, you may want to share it with friends or on the RapidWeaver forums. To share a style, simply share the style file. To locate a style file in the Finder:
- Click on the Setup button in the lower right corner of the Collage Edit area.
- Choose the Styles tab.
- Click on the style's icon to select it.
- Click the Details disclosure triangle.
- Clicking on the "Reveal in Finder" button. The Finder comes to the front and shows the style file selected.
You can share this file with anyone; it's all they need to add the style to their own Collage.
Note: It's good practice to compress the style in a zip file before sharing it. To do this in the Finder, Command-Click (or right-click) on the file and choose Compress "file name" from the pop-up menu. A new, compressed version of the file is created. Share the compressed copy.
The layout settings allow you to change how the entire Collage is structured and displayed on the page.
The size setting changes the size of each thumbnail. Remember that if your page contains many thumbnails that large images will take a while to download. Be kind to your visitor, build a fast page, and size your thunbnails reasonabley. After you change the size of your thumbnails the cropping and and rotation that you chose previously may not be appropriate. You may need to resize your images to fit the new size.
Your image thumbnails can be laid out in a grid that is centered into the content area of your them. You choose the number of columns in the grid and Collage will fill in the items. If you disable the grid entirely then Collage will just pack the items in wherever they fit. If you have a fluid width page this can be a fun option.
The margin is the whitespace that is placed between each thumbnail. Vertical space will be below the last line of text in your title and subtitle and the top of the next image.
The most fundamental feature of Collage is to style your thumbnails with a single unified style, displaying them as a well defined group of similar items instead of a collection of different things that do not belong together. The appearance tab is where these settings are enabled and customized. All of the appearance settings act directly on the live preview. So select one of your thumbnail images while you're editing your
The background sets the fill color of thumbnail image everywhere that the image isn't being displayed. You can choose the background color that matches the background color of your theme. This allows you to publish your pages without using transparent images -- a huge saving in download times.
Your collage thumbnails can be customized with images that can provide a background, a mask, and a foreground image. You can customize all of these images or omit any that you don't need. The "Under" image acts as a background image will be drawn behind your image. Anywhere you image is transparent or masked-out will show through to the background image. The Mask provides a way to let your image show through in only a portion of the thumbnail. Mask images should have a transparent area and an opaque area. The opaque area will display your image and the transparent area will show through to the background. The Over and Under images are not affected by the mask. The mask is just for masking your images. The "Over" image acts as the foreground and allows you to provide a custom overlay. This is great for adding a gloss effect or a customized badge. Transparent areas of the foreground image will show through to your image or to the background.
Enable the border setting to draw a line around your image. You can customize the thickness of the border as well as the color. The rounded corners setting will make the border rounded too.
To round the corners of your thumbnails select the the corners you'd like to round and choose how round you'd like the corners to be. A small radius will be more square. A large radius will be very round.
Customize the Shadow to create a drop-shadow around your thumbnail. This will expand the size of your thumbnail images slightly to make space for the shadow. Since you can customize the color and position of the shadow it's easy to create glow effects too. Try adding a large Blur, setting the opacity to 50%, setting the offsets to zero, and choosing a bright blue color. It will make a very cool blue glow -- great for a mouseover effect.
You can add a reflection that looks as if your thumbnail is standing on top of a reflective surface. You can customize the length the reflection is shown before it fades away as well as how transparent it is right at the top edge. The offset lets you "float" the thumbnail above the reflective surface.
The edges of your image can be faded into the background color. You can customize which sides are faded as well as how far the fade will cut into the image.
You can set the size, color, border and font of your hover box. The margin settings change the space between the border of the box and the text inside.
The power of RapidWeaver lies in its ability to let you focus on the content and let the theme define how it should all look. However there are times when you just want to tweak things a bit for one page. The text settings in Collage are for that time. You can leave the text settings to use the "Theme Default" font or you can override that font and choose an entirely new font.
Both the title and subtitle can be modified independently or completely disabled. Disabling the title or subtitle will completely hide it. You can customize the font, color, and size of each. You can also choose a location. The default location for the title and subtitle are centered right under the thumbnail images. You can customize the offset from that location.
The Header and Footer sections allow you to place content above and below your Collage. The content can be nearly anything. In fact the Header and Footer sections are each like a miniature version of a Styled Text page. That means that you can add images, links, HTML and lots of formatting. In fact you can copy content right out of a Styled Text page and paste it in.
Building with Blocks
Collage provides a nice grid of icons and even allows you to place a header and footer above and below, but sometimes that's not quite enough. If you want to add more content to your Collage page then you should have a look at Blocks. Even with the free Blocks demo you can have 4 blocks of content. Enough for your Collage and three blocks of text that can be placed anywhere else. If you have purchased the full version of Blocks you can combine other page content, lots of images, and of course, your Collage. Before you get going, make sure you have a recent version of Blocks. Blocks 3.1.4 and later are compatible with Collage.
Adding a Collage Page Block
To add a Collage to a Blocks layout you must first build a complete Collage page. Once done make a mental note of the rough size of the Collage layout. Don't worry about being too accurate, you can make a good guess and refine when you're in Blocks. Now Add a Blocks page to your design. This is the page where you import your Collage. Next, add a Page Block to your Blocks layout by clicking on the Page Block tool. A Page Block imports the content from other pages on your site into your Blocks layout. Double click on the new Page Block to configure it, this will open the Blocks Inspector to the Page Block-Content tab. Select the name of your Collage page from the popup menu. Now using the handles of the block resize it to roughly the size of your Collage layout.
Adding more Collages
You can add many Collages to a page. Of course the more dynamic content you add to a page, the slower everything will run, but a couple small Collages should not be very taxing to a web browser. To add more than one Collage you'll need a separate page and a separate Page Block for each Collage. You cannot add the same Collage to the same page more than once. Doing so will break at least one of the Collage scripts.
Adding other content
Once you've added a Collage you can add other content to your Blocks page like text, Images, and content from other pages.
The Preview Doesn't Show a Collage at All
The most likely cause of this problem is that you don't have a RapidWeaver 3.6 compatible theme. You can test this by switching to one of the default themes in RapidWeaver. If that solves the problems then your original theme is likely not RW3.6 compatible. Solution: Use a RapidWeaver 3.6 compatible theme, ask your theme designer for an update, or make the fix yourself. To fix add the %plugin_header% tag to your theme just before the end of the head section of the index.html file.
The Collage looks OK, but doesn't work.
The Collage takes a long time to load.
Collages with large thumbnails or lightbox effects need to load a number of images. If you publish these images at full quality settings then things will run slowly. By choosing a more compressed file type (like JPEG Medium Quality) you can improve performance dramatically. The Output Format setting is in the RapidWeaver Page Info window under the General tab. This can be a good solution for improving the performance of any image-heavy page in RapidWeaver, not just Collage.