Skip to content

Instantly share code, notes, and snippets.

@samstewart
Created September 8, 2011 20:59
Show Gist options
  • Save samstewart/1204686 to your computer and use it in GitHub Desktop.
Save samstewart/1204686 to your computer and use it in GitHub Desktop.
description of image naming convention for content templates

###Image URL Specification Simple url spec for supply image icons of varying resolutions sizes. The goal is to reduce the size of the JSON so we operate on conventions.

####The server's role The server should respond to each variation of the URL. If it doesn't support a particular resolution is should simply return the closet approximation. The server should provide the base image name in the "image" key in the context for each item.

###The client's role The client (mobile javascript) is responsible for loading the appropriate icons based on orientation, resolution, etc. In the interest of speed, the images should be downloaded on-demand and only when needed. Since both server and client agree on conventions, we can request different size images based on the spec outlined here.

####Image Naming Conventions Every image icon's name is passed in via the JSON context. This should be only be the base name without any modifiers; for example, "the-matrix.png". The client can then add modifiers to the image name to request different images for the current device. If you'd like to force a specific width and height you can also attach the width and height as described below to the image base name. Modifiers are separated by underscores to keep the url readable.

  • Screen density: @1x, @2x, @3x, etc.
  • Width and Height (to force specific size): 300x400, 200x400, etc
  • Portrait or landscape: portrait or landscape

Here are a few examples:

  1. force width and height: the-matrix_300x400.png
  2. Higher screen density: the-matrix_@2x_300x400.png
  3. Only portrait: the-matrix_portrait.png
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment