Images

Adding Images

Images can be added to your project in three ways. Import to library, import to canvas and dragging images into Macaw.

Import to Library

Importing images to your library allows you to move images into your Macaw project for later use. Once images are imported into your library you can drag them onto the canvas.

To import images to your library you can go to File > Import to Library or use the keyboard shortcutShift+⌘+I Ctrl+Shift+I. Multiple images can be imported simultaneously.

Import to Canvas

Import to canvas performs the same way as "Import to Library" but in addition to adding all the images to your library they will also be added to the canvas.

To import to canvas you can go to File > Import to Canvas or use the keyboard shortcut ⌘+ICtrl+I. Multiple images can be imported simultaneously.

Drag Import

Images can also be imported directly to the canvas by dragging files from a folder outside of Macaw onto the canvas. This performs like "Import to Canvas" where all images will be both added to your library and to the current canvas.

Scaling Images

Images by default will always have a height of "auto" and will preserve their proportions on transform or width change. To change an images width and height independently see "Cropping Images" below.

Retina Images

Macaw allows for the toggling of images to retina dimensions with a single button click. Any image can be toggled using the @2x button in the images palette.

 

Note: On retina enabled devices, images on the canvas and images used for backgrounds will be imported with the @2x enabled by default.

Generating Optimized Images

Macaw makes available the ability to generate optimized images. On project publish, Macaw will analyze all the images in your project and generate new images based on their dimensions. It will also generate regular and @2x retina images. The benefit of this is to ensure that your finished project will not contain unnecessarily large images. Instead it will have images at exactly the size it needs so that you site will download as quick as possible.

"Generate Optimized Images" can be enabled in the "Publish Settings" dialog under the "Images" section. To view this window, go to File > Publish Settings or use the keyboard shortcut ⌘+SHIFT+PCtrl+SHIFT+P

Cropping Images

Macaw allows you to crop individual instances of images. This allows you to dynamically generate differently proportioned images from a single image inside your project. Images can also be cropped per breakpoint.

Note: To be able to crop images in your project you must enable "Generate Optimized Images" in your project's publish settings under the "Images" section. It can also be enabled by double clicking on an image. Macaw will prompt you and ask if you would like to enable it.

Perform Image Crop

To begin cropping an image element, double click it on the canvas. This will enter image crop mode and additional transform handles will become available. Within crop mode you can scale the image, move it within its its frame and modify the frame width and height using the frame handles at the top, right, bottom and left sides. Once the crop is committed (see below), clicking the Reset button in the image palette will undo all cropping applied to an image. See "Resetting Images" below.

Note: Images cannot be resized / scaled to be smaller than the current crop area. To sacle an image when in crop mode, you must first crop the image.

Committing Image Crop

Once an image has been cropped to the desired dimensions, you can leave image crop mode by double clicking anywhere outside of the image. This will apply the changes that were made and the new updated image will be generated.

Cancel Image Crop

Anytime during image cropping, all changes can be reverted by hitting ESC. This will rollback the image to what it was when image crop started and exit image crop mode.

Example:

Image before crop

Image crop mode enabled.

Image scale, position and frame adjusted.

Finished image after crop.

Resetting Images

Any images that have been scaled, toggled to retina or cropped can be reset at any time to their original settings using the Reset button in the image palette. This reset will only affect the image's settings at the current breakpoint.

Responsive Images

By default images can be scaled and toggled to retina per breakpoint. When "Generate Optimized Images" is enabled, images can also be cropped per breakpoint. Each of these topics have been discussed in previous sections. When "Generate Optimized Images" is toggled on Macaw will include the "rimages.js" file with your published project files in the js folder. This library handles the swapping out of images both for retina and across breakpoints. All of the image's settings for this library are applied to the images tag via data attributes.