September 26, 2012

Technical Specifications For Inserted Images

This article outlines the technical specifications for images which are inserted into posts and pages. If you are looking for the general information on editing images, please see the article on inserting and editing images.

ImageLink Object Type

An ImageLink object represents a link to an image file, which may or may not be hosted on Typepad.

An example of an ImageLink is:

http://example.typepad.com/.a/6a00d8350328d253ef017c322935e2970b-500wi

Image Resizing

For images that are hosted on Typepad, Typepad can provide a variety of different-sized scaled versions. This is indicated by the presence of the urlTemplate property, which is a URL template where the placeholder {spec} represents a code which defines how the image should be resized.

In this case the width and height properties of the ImageLink give the dimensions of the original image, but they can be used to derive the aspect ratio of the image and thus calculate the width and height of the scaled version.

A sizing spec code consists of an integer size in pixels followed by a two-character code which chooses a sizing mode. Typepad supports four different sizing modes which are described in the following sections.

Image Size Modes
Illustration of the four sizing modes supported by Typepad.

Scale to Fit Both Dimensions (pi)

This mode takes the largest dimension (either width or height) and scales the image so that dimension is the size specified in the spec. The other dimension is scaled to maintain the image's aspect ratio.

For example, if the original image is 592 by 678 pixels and a spec of 50pi is used, since the height is greater than the width the resulting scaled image will be 44 by 50 pixels: http://example.typepad.com/.a/6a00d8350328d253ef017c322935e2970b-50pi

Scale to Fit Width (wi)

This mode scales the image such that the width is the size specified in the spec, and the height is scaled to maintain the image's aspect ratio.

For example, if the original image is 592 by 678 pixels and a spec of 50wi is used, the resulting scaled image will be 50 by 57 pixels: http://example.typepad.com/.a/6a00d8350328d253ef017c322935e2970b-50wi

Scale to Fit Height (hi)

This mode scales the image such that the height is the size specified in the spec, and the width is scaled to maintain the image's aspect ratio.

For example, if the original image is 592 by 678 pixels and a spec of 75hi is used, the resulting scaled image will be 65 by 75 pixels: http://example.typepad.com/.a/6a00d8350328d253ef017c322935e2970b-75hi

Scale and Crop to Square (si)

This mode results in a square image whose width and height are both the size specified in the spec. If the original image isn't square, the image is cropped across its longest dimension, showing only the central portion which fits inside the square.

For example, if the original image is 592 by 678 pixels and a spec of 50si is used, the resulting scaled image will be 50 by 50 pixels, and the top and bottom of the original image will be cropped off to create a square: http://example.typepad.com/.a/6a00d8350328d253ef017c322935e2970b-50si

Valid Sizing Specifications

Typepad will not allow any arbitrary size and mode combination. The following table describes which combinations are allowed.

  pi wi hi si
16      
20      
50  
75
100      
115  
120  
150    
200    
220      
250  
300      
320    
350    
400      
450      
500    
550      
580      
600      
640    
650      
700      
750      
800    
850      
900      
950      
1024    
1200      
2000      

Properties

The ImageLink object type has the following properties:

height (integer)
The height of the original image in pixels. If the height of the image is not available (for example, if the image isn't hosted on Typepad), this property will be omitted.
url (string)
The URL for the original, full size version of the image.
urlTemplate (string)
An URL template with which to build alternate sizes of this image. If present, replace the placeholder string {spec} with a valid sizing specifier to generate the URL for an alternate version of this image. This property is omitted if Typepad is unable to provide a scaled version of this image (for example, if the image isn't hosted on Typepad).
width (integer)
The width of the original image in pixels. If the width of the image is not available (for example, if the image isn't hosted on Typepad), this property will be omitted.


Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services