Skip to main content

Usage

Sign in to create a template.

Editor​

The Editor is a simple yet powerful tool where you can create templates for images. With this tool, you can edit:

  • Template properties:

    • Set template name and description

  • Background properties:

    • Width and height of template
    • Padding of template
    • Background color
    • Background image

  • Add elements:

    • Text elements, with following properties:
      • Set default text
      • Set parameter (whatever you set here will be part of your link to generate dynamic images)
      • Set width and height
      • Set position
      • Set font family, size, weight, color, italic, line height
      • Set text alignment
    • Image elements, with following properties:
      • Set parameter (whatever you set here will be part of your link to generate dynamic images)
      • Set width and height
      • Set position
      • Set image
        • Upload image
        • Choose image from previously uploaded
        • Enter a URL to an image
      • Set image border radius (curvature of corners)

Once you have created and saved your template, you will receive a link such as: https://pixelmorph.io/api/v1/morph/YOUR_TEMPLATE_ID?title=Title&description=Description&author=John+Doe

Notice that in the link, we have three parameters:

  • title
  • description
  • author

That means that in our template, we have three elements with parameters set to those above. We can then modify these parameters in the template URL in order to receive a new image with the information we requested.

Because it's a URL, all the information we enter must be characters that are allowed in URLs. There are multiple ways we can edit our URL to receive an image:

  • Manually update the URL with the information you want to populate your template with
  • Use scripts to update the URL
  • Use our link editor where you can type in values into text fields, which will then update your URL parameters

How does parameters work in the URL?

Using our previous example, if you update title=... to look like title=This+is+a+dynamic+title, then your new template will change the text element to have the text "This is a dynamic title". Using the same logic, you can update the other parameters in the same way.