ImageCache Scale-9 Actions

ImageCache Scale-9 Actions is a module that adds ImageCache actions that use scale-9 formatting.

Scale-9 formatting lets you define 9 regions of an image overlay (or underlay) that will scale independently. The 9 regions are defined by giving left, top, right and bottom values. The left and right values being pixel offsets from the left edge of the image, and the top and bottom values being pixel offsets from the top of the image, resulting in a 3x3 grid. This is a standard method of UI skinning in Adobe Flash/Flex development.

Example:

Framing a set of varying size images.

• Start with an overlay image like this (placed in mysite.com/files/overlays/): http://drupal.org/files/issues/frame2.png
• Create a new ImageCache preset named: framed_thumbnail
• First, make room for the frame by expanding the canvas using a 'Define Canvas' action (provided by ImageCache Actions, which this module depends on), using the following settings:
  • Resize canvas under image: checked
  • left difference: 33
  • right difference: 34
  • top difference: 34
  • bottom difference: 34
• Next, add an 'Overlay (scale-9)' action, using the following settings:
  • filename: overlays/frame2.png
  • Place overlay under image: not checked
  • Scale-9 (these values are inflated enough to include the detail that extends away from each corner and the 1px inner shadow around the inside of the frame):
    • left: 50
    • top: 50
    • right: 135
    • bottom: 160
  • Exact size or Relative size can be used to set the resulting size and position of the overlay, but are not needed in this case. When neither are set the overlay will automatically take the full size of the buffer canvas.
• The resulting images should be framed and the finely details corner areas of the frame remain completely undistorted.