Embedding WeaverPix slideshows in Stacks

Embedding WeaverPix into Stacks

Introduction

WeaverPix allows you to build slideshows or other image layouts, and embed these into Stacks pages. This is useful if you’re building a website predominately using the Stacks plugin, but you need to incorporate a quality slideshow or other image layout using WeaverPix.

By far the easiest and safest method is to use the PlusKit plugin by Loghound Software. WeaverPix pages are pretty robust and generally work well in conjunction with the PlusKit plugin (much better than some other competing slideshow plugins for RapidWeaver). Merging WeaverPix and Stacks page types together gives you the power and flexibility to create some stunning page designs.

Please note that Stacks and PlusKit are both paid plugins and are not included with RapidWeaver or WeaverPix. So if you do not already own this plugin, you will need to buy a copy of each. Always ensure that you have the latest versions installed - older versions are known to make RapidWeaver unstable.

Introduction

PlusKit has the advantage of being fast and pretty easy to use. Start launching RapidWeaver opening your sandwich (project) file. Click on the Add Page button and add a WeaverPix page to your project. This WeaverPix page can be configured to include your images and lets you choose a suitable theme (to display the images within). If the theme uses fixed dimensions, take care to ensure that the generated slideshow or image gallery will fit comfortably within the planned space. Study the theme settings carefully and keep previewing the page to check the image slideshow or layout is as you expected.

The WeaverPix page can be hidden from the navigation menu.The WeaverPix page can be hidden from the navigation menu.

If you do not want this new WeaverPix page shown in your navigation menu or sitemap, you can open the RapidWeaver Page Inspector (pictured above) and uncheck the Show in menu option. Ensure the page has a sensible name, browser title and address applied (this will make things easier later on and keep your project better organized).

Adding the PlusKit page

The next stage is to go ahead and add a PlusKit page style to your project (if your project does not already contain a PlusKit page). You should only ever have one PlusKit page per project. Click the Add Page button in RapidWeaver and choose PlusKit from the list of available plugins.

PlusKit is a utilitarian page style for RapidWeaver, so you can go ahead and ensure the page is both both disabled and set to not show in the navigation menu. This is done by opening the RapidWeaver Page Inspector on your PlusKit page, and ensuring the top two options are unchecked, as pictured below. PlusKit only needs to be accessed from within RapidWeaver, so does not require publishing.

Ensure that your PlusKit page is disabled from publishing and from showing in the page navigation menu.Ensure that your PlusKit page is disabled from publishing and from showing in the page navigation menu.

Embedding WeaverPix in Stacks

Now comes the stage of actually importing your WeaverPix page into the Stacks page style. WeaverPix does the importing of pages within RapidWeaver, prior to the page being previewed or published. You will need to drag and drop a Styled Text stack into your page (HTML stacks do not work with PlusKit). Then into the Styled Text stack, type the PlusKit import macro like this:

@import(())

The import macro comprises of the word @import followed by two opening (( and two closing )) brackets. The syntax is very easy to remember and is standard throughout RapidWeaver.

Between the opening and closing brackets, you then type the name of the WeaverPix page, as shown in the RapidWeaver Sidebar:

@import((bannerslider))

So if your WeaverPix page to be imported was named bannerslider, you would type bannerslider between the pairs of opening and closing brackets. If the page was named Images by Tom you would type Images by Mary in the brackets. Or if the WeaverPix page to be imported was called amazing-trees you would type amazing-trees in between the pairs of brackets. Hopefully you get the general idea of it now. Page names are case sensitive, so take care as you are typing them.

An example of a PlusKit @import(()) macro being used in a Stacks page.An example of a PlusKit @import(()) macro being used in a Stacks page.

PlusKit @import(()) macro’s can only be used in Styled Text stacks. You cannot use them in HTML (plain text) stacks or in other area’s like the settings panel.

Important: If you have enabled warehousing in WeaverPix, the file extension of the page you are importing WeaverPix into must also be changed to .php in the RapidWeaver Page Inspector. Likewise if the WeaverPix page you have created has a .php file extension, you must ensure the page you are importing WeaverPix into has a .php file extension applied. The screenshot below shows where the file extension should be changed in the RapidWeaver Page Inspector.

Change the page file extension to .phpChange the page file extension to .php

Stacks into a WeaverPix page

It is possible to perform a reversal and @import stacks into a WeaverPix page instead. For example, you could @import some columns of content into the WeaverPix header or footer regions. A video could be added to the page or a simple toggle box or tab box setup. In theory, the same steps need to be followed that you used for bringing WeaverPix into a Stacks page. In WeaverPix, @import calls can safely go in the header, sidebar or footer content regions.

The “one effect per page” rule

There are powerful options available to embed WeaverPix pages into other page types and create very sophisticated page layouts. However care should be taken that you don’t get too carried away! Most experts recommend that you keep the number of special effects and animations used on a webpage to as few as possible, preferably just the one. This is not a rule that is unique to WeaverPix or RapidWeaver, but something you may often read about on the internet. There are a few valid reasons for following this sensible advice:

  1. Less scripts and plugins means there is less risk of things conflicting and breaking. Code conflicts are not always immediately visible, but can result in parts of the page not working, a page only part loading or more serious issues like memory leaks and browser crashes limited to particular web browsers or versions.

  2. Less scripts and plugins also means that pages will load faster. A web browser has less code to download, read and execute. This will ensure people visiting your website can experience fast loading pages and your bandwidth will be reduced.

  3. Some web browsing devices like smart phones and tablets only have a limited amount of processing power. Too many animation effects can cause these simple devices to ‘choke’ and fail to display the page correctly or with smooth animation effects.

  4. From a design / usability perspective, less things flashing and animating on a webpage looks better and makes for a more engaging user experience.

  5. If you need technical support, it is much easier if a page only contains the bare minimum amount of code to make it display and function.

In theory it is possible to use PlusKit to @import multiple WeaverPix slideshows or layouts into the same page. However this probably wont be necessary, as the same WeaverPix page is capable of sourcing images from multiple services.

  • 28 Users Found This Useful
Was this answer helpful?

Related Articles

Configuring thumbnail settings

Configuring thumbnail settings As of version 3.0, WeaverPix utilizes Themes for it’s display...

Getting more help on using WeaverPix

Getting more help on using WeaverPix There are several options available for help using...

How to add images via Dribbble

How to add images via Dribbble Dribbble is a free design oriented image hosting service....

How to add images via Flickr

How to add images via Flickr Flickr is a free online image hosting service operated by Yahoo!...

How to add images via Image Warehouse

How to add images via Image Warehouse Image Warehousing is the process of loading images from...