Stacks4Stacks

ImageWizard is not a replacement for Photoshop or other dedicated image editing software! The focus of this stack is instead to lend you the ability to quickly apply simple, pure CSS effects on up-to a dozen or so images in a webpage. Thereby avoiding the need of utilising many different types of stacks and risking a page that is sluggish and overly complicated. The emphasis of ImageWizard is on simplicity. ImageWizard is the ideal choice of stack to use for applying effects to theme banner images or creating a simple grid of images that can animate on mouseover and provide a useful form of navigation through to other pages in your website.

Although still considered experimental, CSS animations can now boast very good browser support, across a wide range of different web browsers and devices. Of course, these hardware-accelerated animation effects mean you can avoid the perils of Flash animations and other dying proprietary techniques. Most CSS animation effects and filters often render smoothly. In instances where a web browser does not support CSS animation effects or filters, things degrade gracefully.
 

 
 

Rounded corners

Simple CSS generated rounded corners. Not much else to say really! These rounded corners work in just about all web browsers as far back as Internet Explorer 8. You can independently control the amount rounding applied on each corner.
 
 

 
 

CSS filters

These special effects are applied to your images using hardware-accelerated CSS3 transformations and transitions. Compatible with most newer web browsers, these effects will safely degrade gracefully in older, unsupported web browsers. Options are provided to customise the 'amount' of effect applied to both the static and hovered image. Note that some web browsers don't support hover transitional effects on some image filters, namely invert and rotate.
 
 

 
 

Instagram^® style filter effects

Support for these was added in ImageWizard 2.0. these special effects are designed to mimic popular Instagram image filter effects. All done with pure CSS; meaning that they are not destructive and will not damage the original image files. Supported by all newer web browsers. These special effects are applied to both the normal and hovered image states.
 
 

 
 

Captions

Marked-up using HTML5 figcaption tags, these simple static captions are displayed below your images. By using figcaption tags, search engines can see a much clearer relation between the image and caption content. Captions can include plain text, rich text, HTML code, markdown, images and links. Other than alignment and font style, captions inherit styling and colouring from your RapidWeaver theme, for improved consistency with existing stacks and pages.
 
 

 
 

Other Tricks

Some examples of other tricks ImageWizard can perform on your images. By combining the functionality of a dozen or more different stacks into ImageWizard, completed pages export faster in RapidWeaver and load quicker on your web server.
 
 

 
 

Setup

Follow these instructions for getting an ImageWizard stack working in your webpage...

1. Once installed into Stacks, drag and drop a copy of ImageWizard into your page
2. In the ImageWizard Basic Settings, choose the source of your image, you want to use
3. Toggle open and close groups of ImageWizard settings to apply further effects or filters
4. Preview your page in RapidWeaver. Publish when done.

Hovering your mouse cursor over individual ImageWizard settings will display an informational tooltip about what each setting does and any important information you need to know about. Groups of settings can be toggled closed to help keep your editing interface tidier. Additionally you can change the View Mode of Stacks in edit mode, using the controls at the top of the window.

Don't overcook things!

Most expert web designers and developers live and work by the "one effect per page" rule. This basically means adopting a sensible approach towards building your webpages and avoid cramming them full of numerous special effects and animations. Not only can over-complicated pages prove visually distasteful for end users, but (more importantly) there is a real danger your webpages will become intolerably slow to load and may even crash some web browsers. Ideally ImageWizard should not be mixed with many other animation effects on the same page. Multiple ImageWizard stacks can be used on the same page (as we have demonstrated above) but it would probably be wise to avoid too many different configurations and try to use the same settings for each ImageWizard stack used on a page. Typically a page containing 25 or more ImageWizard stacks will begin to slow-down when exporting or previewing the page in RapidWeaver.

Optimising images

Ideally all images you add to ImageWizard should be optimised, for improved performance. Images must be in either JPG, GIF or PNG format, saved at exactly 72 dpi. Aim towards keeping each individual image less than 200 kilobytes in size (this will avoid rendering / memory issues on lower-powered, handheld devices like smartphones). Free software like DropFix and ImageOptim can be used to quickly bulk-resize and optimise your images.

Although there are no limits imposed on the number of ImageWizard stacks you can use on the same page, obviously it is wise to play things safe and not go crazy with pages containing many hundreds of ImageWizard stacks! It is far better (from both a performance and usability perspective) to create an index page, and then split your images into categories, spread over several different pages.

Pinterest sharing

We use code in ImageWizard for Pinterest sharing; based on the same code used in the popular ShareStack and SocialPopup stacks. When a Pinterest button is clicked, the URL of the current page, the URL of the image and the image ALT attribute (description) are passed over to the Pinterest website. From this point onwards, your website users can easily 'pin' your images. For sharing webpages with more services, we recommend use of either the ShareStack or SocialPopup stacks.

Copyright protection

This uses a simple 'glass' method of layering a transparent GIF image over your original image. Although your image can be seen through the GIF, the ability to right-click the image or drag it onto a desktop is much more restricted. Obviously this only offers a very basic level of copyright protection; because there is nothing stopping someone taking a screenshot of the webpage or looking in the page source code to extract the image link and opening it in a new tab. You should still display copyright information on your website, if you're concerned about people taking images without permission. Likewise sensitive images you don't want copied should be put behind a password protected page. Hyperlinks and Pinterest sharing does not work reliably on images you've copyright protected.

Font Awesome icons

Font Awesome icons are needed if you enable the Pinterest sharing button or in instances where you enable hyperlink support and want to display an animated icon in the centre of your image. Most free and paid ThemeFlood RapidWeaver themes (and themes by some other companies) already include support for Font Awesome icons. If you are using a theme that lacks Font Awesome icon support, you will need to find a way of adding Font Awesome icons or use a different icon library.

Custom classes

The option is provided in the ImageWizard Advanced Settings to apply custom class names onto the main divisional container, the inner container or the image itself. This opens up enormous possibilities to further extend styling options available to you, beyond the settings we provide already in ImageWizard. In the above examples, the 'custom class' example was given a custom class of thumbnail on the inner container. Because the RapidWeaver theme used in this website incorporates the Twitter Bootstrap framework, this gives the image a bordered box appearance. Equally so, you could give ImageWizard your own class names and write corresponding custom CSS code.