Thanks! Please check the following:
System requirements
This stack requires RapidWeaver and the Stacks plugin. It will not work with other platforms (like Wordpress). We recommend you aim towards installing the latest version of RapidWeaver and Stacks that your computer is compatible with.

License agreement
You may use this purchased stack an unlimited number of times in personal or commercial projects, request technical support and receive free updates in future.

This stack can be installed or synced onto all computers that you own. You are permitted to make archival backup copies of the stack.

You may not resell or make this stack available for download, remove copyright credits or license information.

The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.

Refund policy
By purchasing this stack, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.

All purchases are final and refunds will not be provided (we physically cannot un-download or remove stacks from your computer).

You are reminded to make use of the free demo versions already provided on the website, to fully evaluate stacks for compatibility and suitability before purchase.

Customer support
If you have questions that relate specifically to this stack, you should make contact via the contact page. We aim to answer all messages within 12 hours, Monday to Friday.

If you require a faster response at weekends or during public holidays, please post your question(s) to the RapidWeaver forums, where a support volunteer may be able to assist you quicker.
Checkout  
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.
 
The video can be viewed full-size, by clicking the YouTube button.
 
ImageWizard is compatible with both Stacks 2 and Stacks 3. ImageWizard has been developed to replace the following stacks, which are now considered obsolete: Deli, Figure, Placeholder, GrayScale, GrayScale2, ImageRoundr, Pinnr, Pinable, RollFade, ImageLabelr and Protector. If you previously purchased one of these stacks, you may be entitled to a free copy of ImageWizard, by getting in contact with proof of purchase attached. Should you still require copies of these older stacks, links are provided to them on the archive page.

Examples

Here are some working examples of the ImageWizard stack.
 

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.
Top left
Lake reflections, photographed by Will Woodgate
Top right
Lake reflections, photographed by Will Woodgate
Bottom left
Lake reflections, photographed by Will Woodgate
Bottom right
Lake reflections, photographed by Will Woodgate
All sides, 5px
Lake reflections, photographed by Will Woodgate
All sides, 15px
Lake reflections, photographed by Will Woodgate
All sides, 25px
Lake reflections, photographed by Will Woodgate
All sides, 50px
Lake reflections, photographed by Will Woodgate
 
 

Special effects

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.
Blur
Lake reflections, photographed by Will Woodgate
Brightness
Lake reflections, photographed by Will Woodgate
Contrast
Lake reflections, photographed by Will Woodgate
Hue-Rotate
Lake reflections, photographed by Will Woodgate
Invert
Lake reflections, photographed by Will Woodgate
Monochrome
Lake reflections, photographed by Will Woodgate
Opacity
Lake reflections, photographed by Will Woodgate
Rotate
Lake reflections, photographed by Will Woodgate
Saturate
Lake reflections, photographed by Will Woodgate
Scale
Lake reflections, photographed by Will Woodgate
Sepia
Lake reflections, photographed by Will Woodgate
Normal
Lake reflections, photographed by Will Woodgate
 
 

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.
Left-Aligned Caption
Lake reflections, photographed by Will Woodgate
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Centre-Aligned Caption
Lake reflections, photographed by Will Woodgate
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Right-Aligned Caption
Lake reflections, photographed by Will Woodgate
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Justify-Aligned Caption
Lake reflections, photographed by Will Woodgate
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
 
 

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.
Share Image On Pinterest
Lake reflections, photographed by Will Woodgate
Blackout
This photograph contains graphic content some people may find offensive.
Please click or tap inside this box if you still want to view the image.
Lake reflections, photographed by Will Woodgate
Link and Icon
Lake reflections, photographed by Will Woodgate
Inset Shadow
Lake reflections, photographed by Will Woodgate
Copyright Protection
Lake reflections, photographed by Will Woodgate
Custom Class
Lake reflections, photographed by Will Woodgate
Box Shadow
Lake reflections, photographed by Will Woodgate
Scroll Fade
Lake reflections, photographed by Will Woodgate
 

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 ImageMagic 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.

Retina image support

All free and paid ThemeFlood RapidWeaver themes (and themes by some other companies) already include support for retina images, so you do not need to enable retina image support in ImageWizard advanced settings. Using the retina.js plugin (loaded if you enable retina image support in ImageWizard), we can detect if a retina screen is viewing the current webpage and then look for images prefixed @2x in the same directory to swap with the standard resolution images. It's a remarkably simple and reliable technique towards adding retina image support to your website. Retina image support in ImageWizard works best with warehoused images; where you have the ability to upload separate images in standard and retina sizes. A retina image is always twice the width and height of a standard image; saved in JPG or PNG format at 72 dpi.

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. All 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 enable the Font Awesome Icons checkbox option in the ImageWizard advanced settings. This setting only needs to be enabled once per-page. When using Font Awesome Icons in ImageWizard, you can refer to the official Font Awesome Icons website for the correct markup to use for your preferred icons.

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.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.