Card Files

What is a card file?

A card file ultimately is just an image, but it is an image composed of any number of other images and any amount of added text items

The anatomy of a card file is

  • All associated images
  • XML file describing the design layout of the card file output
  • XML file containing meta data for the card file 
  • An XML file called a CDI (card data item) which can hold dynamic field data
  • Any number of additional CDIs meaning a card file can hold dynamic variants of the original design

A card file can also have a render. This might be a way of rendering the whole image, in 3D possibly - see the section below

CFQL Manager

To easily interact with card files, I built the Card File Query Language. This is handled by a set of code called the CFQL Manager and enables images to be scripted

This means that we are able in our systems to manipulate an images contents when fetching it, here's a brief view of scripting in action using IDCreative:

In the video here, a design has some textual elements. By issuing scripting commands we can interact with the contents of the design. You can see the design is updated by using scripts. A bit later in the video, the design is uploaded to, and you can see in the meta data that a special access code is placed in the meta data. This code can be used to 'query' and not only fetch the image but also to pass a parameter in the HTML to 'edit' the image before it is returned! You can see the default image first in the created web page, but then when I add 'description=My new bunch of text' to the URL, the image is scripted at the server before being returned to the web page. 


A card file has a media type, which will determine its dimensions and whether the card file should be rendered in a special way, or just rendered as a flat image. Most of the time a card file is a flat image of a particular size, but it is possible to add new card file media types (and there are some already) which look quite different when viewed, the best example is to look at, every design on that website shows the render as a 3D credit card

Image stacks

A card file can have any number of images assigned to a single image within the design, making it possible to select images via scripting

Here's an example, I created this graphic for a facebook group who support my favourite football team. There are two image stacks, one for the home team and one for the away team. When the page is loaded, you can select which image shows using two dropdown boxes. In the background, the CFQL Manager is running scripts like this: home=Notts;away=Cambridge

Try it now (opens in a new tab)


As an extension of image stacks, any number of groups can be defined enabling multiple fields to be set from scripts by simply setting a group value

[create a groups card file, host it at and link to it here]

Meta Data

Meta data can be added to designs meaning custom control can be applied to sets of card files, or to individual card files. Also, fine tuned searching can be performed in cases where card files are aggregated into a searchable (and design interactive) library, such as at

Please pledge now at

Email me at to ask any questions