Frame It! v2

© 2011, Martin Rinehart

Frame It! Page
Frame outside: inside: width:
Mat color: width: bezel width:
Paper color: width:
border: width x height:

For security JavaScript cannot do local file I/O, but you can.

Save the output JSON (on left) to a text file for future use.

To reuse your saved JSON, copy it over the input area (on right) and press tab.

Your Code

Library Code

Combined Code

About Frame It!

Frame It! was designed and coded 20 April, 2011, by Martin Rinehart (MartinRinehart at gmail dot com). Version 2 was designed and programmed later that week after the author saw what he really wanted.

Frame It! License

Frame It! is hereby licensed to single users to generate nicely framed displays of their graphics. Use screenshots of your framed graphics (not Frame It!) to display the framed graphics on the web. Backlinks are certainly welcome. Email MartinRinehart at gmail dot com for multi-user licenses.

Frame It! Installation

Please install (view Source and File/Save As...) Frame It! on your local machine. It incorporates all dependent script so a single file is all you need. Designers: any competent frontend engineer can show you how. It's really no trouble. Installing it where you keep your images will save you lots of trouble.

Frame It! Specifications Page

Colors: All colors are specified by six hex digits. These are HTML color specs, without the "#" prefix. Ask a good frontend engineer to explain them. (Absent professional help, research "HTML colors" on the web.)

Widths: Four different "width" specifications are used. All are specified by decimal numbers of pixels.

  1. Image Width: The display width of your image. For best results, use image software to size your image to this width.
  2. Image Border Width: The "border" specification of an <img> tag. Zero is almost always correct.
  3. Frame, Mat and Paper Widths: The width of the vertical and horizontal components. Overall width is the width of the image plus twice the sum of frame, mat and paper widths. Overall height is the height of the image plus the same amount. The total width of the mat (flat plus bezel) is specified.
  4. Mat Bezel Width: The apparent "thickness" of the mat. The flat width of the mat is the specified total width minus the bezel width.

Image Addresses: Setting a path and file name to your images can be tricky. For graphics already on your site(s), use an absolute path (one starting with "http://"). For graphics on a local machine, install Frame It! in the same folder as the graphics. Second best is to install on the same disk in a folder which can easily reach the graphics using relative addresses. For other graphics on a local machine use your browser to File/Open ... the image file. Then copy the address from your browser's addresss bar, including funny stuff like "file://localhost/". Leave the file name blank if it is included in the path. Remember, addresses in HTML use forward slashes even running on Windows.

Frame It! Validate Page

The Validate Page checks all inputs for valid formats. This check is automatically performed prior to showing the View, JSON or Code pages, so clicking this button is normally redundant.

Frame It! View Page

The View Page lets you examine the image in its frame. Enjoy!

The top-left corner of the visible frame is location 0, 0 in the generated code.

Frame It! JSON Page

JSON (JavaScript Object Notation) is a lighter weight XML replacement. You can save the JSON in the left textarea for future use. Pasting the JSON into the right textarea restores the specifications to those in effect when you created the JSON.

If you store your JSON objects in a file maintained with a text editor the sophistication of your specifications database is limited only by your imagination.

Frame It! Code Page

(Ask a competent frontend engineer for help here.)

  1. Your Code: Save it as an HTML file. Have it load the Library Code as a JavaScript file and you have a standalone page that displays your graphic in the frame you specified.
  2. Library Code: Save this code as a JavaScript file.
  3. Combined Code: This is Your Code plus the Library Code, which may be handy for viewing your framed image in a single step.

Note: The Your Code output, may be cut/pasted into your pages as needed. You may frame a whole gallery full of images if you like. (See the JSON Page to create a database of framed images.)

Frame It! Feedback

MartinRinehart at gmail dot com. "Brevity is the sole of wit." (Shakespeare's Polonius, Hamlet, Act 2, scene 2.)

# # #