Overview
Collage is a plugin for RapidWeaver. It allows you to build a special type of web page for your RapidWeaver web site. Collage pages display a grid of thumbnails for images you choose. All the thumbnails can be given a highly customizable style with rollover effects, an pop up info box, and even a lightbox with a slideshow.
Collage uses industry-standard xHTML, CSS, and Javascript. But because you're using RapidWeaver, you don't need to know any of those things. All you need is a few minutes to select a few images, choose a nice style, and type in your titles. In minutes you can have a slick, functional, Web 2.0 addition to your site.
Collage is designed to work directly with Blocks so that you can combine Collage with other elements to create beautiful and unique interfaces.
Installation
To install Collage:
- Download Collage from our website.
- Double click the Collage.stack file.
- If RapidWeaver is running, restart.
Collage is now installed ready to use.
Getting Started
To get started, you should have a Collage page in a RapidWeaver file already created. If you don't have a Collage page already, create one by choosing Add Page in RapidWeaver and selecting Collage.
Building a Collage
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.
Image
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. To the right of the preview are the edit tools. You can use them to change the position, rotation, and cropping of your thumbnail image.
Move Tool
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.
Rotate Tool
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.
Crop/Resize Tool
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.
Reset
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.
Title
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.
Subtitle
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.
Hover Text
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.
Link
To add a link to your Collage item, click the orange Add Link button. The standard RapidWeaver link edit sheet drops down in which you add the link.
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.
Removing Items
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. You should follow 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.
Sharing Styles
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.
Layout
The layout settings allow you to change how the entire Collage is structured and displayed on the page.
Size
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 thumbnails reasonably.
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.
Grid
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.
Margin
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.
Appearance
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 settings.
Idle/Mouseover
The Idle/Mouseover button at the top of the panel selects which appearance settings you'll be customizing. The Mouseover settings customize the appearance of the thumbnail when the mouse pointer is hovering over the thumbnail. The Idle settings customize the appearance when the mouse pointer is elsewhere.
In many situations you'll want to copy most of the settings from the Idle state to the Mouseover state. On each of the appearance settings there is a small arrow button. Click it and the settings from the other state will be copied over. At the top of the Appearance tab is a copy button that will copy all of the settings.
Background
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.
Images
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.
Border
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.
Round Corners
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.
Shadow
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.
Reflection
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.
Fade Edges
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.
Effects
Adding animation effects to your Collage page is a great way to add interest and keep your visitors interested in your page. The animation effects are built with standards compliant Javascript, CSS, and xHTML that validates to the W3C's strict standards. That means it works on all the modern browsers and doesn't require any extra plugins, widgets or downloads.
Lightbox
The lightbox effect dims the entire browser window and pops up a much larger version of your image -- usually enough to fill most of the window. Clicking the lightbox image returns to the original page. If you enable the lightbox effect make sure that your image is at least 800px wide by 600px tall. If your images are much smaller then they will not fill the screen and the effect is not quite as nice. Images will never be "scaled up" as it causes pixelation and distortion -- Collage tries hard to avoid situations like that.
Slide Show
You can also enable a slideshow in the lightbox effect. This allows you to not just view one image at a time, but have a small control panel fade in with Next, Previous, and Play/Pause buttons. Images will dynamically load into the page, fade in when they're ready and fade out to reveal the next picture. You can customize the speed of the slideshow.
Hover Box
A hover box is a small text box that pops up when the visitor hovers their mouse pointer over the Collage thumbnail. Each item in your Collage has its own hover text.
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.
Text
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.
Title/Subtitle
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.
Header/Footer
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
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.
0 Comments