This page will list many hints, tips & snippets about ways to get current, frequent, or difficult things in the Geckos engine.

Those hints will help you design your card.

Sometimes, an image loaded in a card needs to appear in a frame that is not-rectangular. We could create a shape to clip it, but that will be tedious. If a generic image background is used to decorate the card, there's an easier method.

If I have an Image background, I set the canvasFields section like this :

"canvasFields": [
  { "type": "image", "width": 880, "height":1201, "src": "data:image/png;base64,iVBORw0..." }
],

Let's say I've added a field allowing the user to load an image, with the field's name being picture. I can add the picture to the canvas, but it will appear in a rectangle, and be over my top left area.

How to correct that ? Well, first, edit your image. Get it in PNG format, and set the area where the image should appear to a transparent color. Save your image, translate it to DataUrl (or static url), and copy it to your template. If you test your template without loading any image, you should see your background color.

Good, now, edit your canvasField section by putting your image linked to picture before your background image. By getting your custom image underneath, the background image will not be written over !