Make every size from one design

Smart Resize lays your design out at other sizes. Design a square post once, add a story size and a banner size, and each one follows the original. When a size needs a small fix, you adjust it by hand. The original design doesn’t change.

Add a size

1. In the tool tabs on the left, click Resize. The panel shows the size of the original, for example “Original 1080 × 1080”.
2. Pick a size from the list. The sizes are grouped by platform, such as Instagram, LinkedIn, YouTube, Web & email and Print & PDF. For any other size, pick Custom size… and type the width and height in pixels.
3. Click Add size.
4. Click Save in the top bar.

The new size shows up as a card with:

• a thumbnail of the page on screen at that size,
• its name and its size in pixels,
• Auto, which means JamFrame lays it out for you,
• its id, such as story. You use the id to render this size.

Common sizes get short ids: square (1080 × 1080), portrait (1080 × 1350), story (1080 × 1920), landscape (1200 × 630), widescreen (1920 × 1080), thumbnail (1280 × 720) and pin (1000 × 1500). Other sizes from the list get the id of their preset, such as linkedin-post. A custom size gets its pixel size, such as 1200x628.

A template with several pages is resized page by page: every size has all the pages. See Pages and carousels.

Limits

• A template can have up to 20 sizes.
• Each side is 16 to 10,000 pixels.
• Two sizes can’t have the same width and height, and you can’t add the original’s own size.

How the automatic layout works

JamFrame doesn’t just stretch the design. It looks at what each layer is and moves it to fit:

• Backgrounds and photos fill the new canvas. A big photo grows or shrinks with the space around it. If its shape changes, it is cropped, never stretched.
• Edge decorations stay on their edge. A shape that touches the top of the page stays at the top of the new size.
• The content is scaled and centred again. Text, QR codes, icons and small shapes get bigger or smaller together. Text wraps the same way as in the original.
• Long values still fit. When text that holds a key or a variable gets smaller, Shrink text to fit box is turned on for it.
• Tall and wide designs reflow. When a portrait design becomes landscape, a photo above its text moves beside it. Two columns in a landscape design are stacked in a portrait size.

The layout follows the original. When you change the original design, every size changes with it.

The automatic layout needs help in one case: a tall story turned into a wide banner, with no big photo and no columns. It is scaled down to fit and centred, so its text gets small. Adjust a size like this by hand.

Adjust a size by hand

1. On the size’s card, click Adjust, or click its thumbnail. The canvas switches to that size. A banner above the canvas says which size you are adjusting, and that changes apply to this size only.
2. Edit as usual: move layers, resize them, change their style or text.
3. To leave a layer out of this size, delete it. It is hidden in this size only.
4. When you’re done, click Back to original in the banner, or Done on the card.
5. Click Save. This saves the original design and every size.

The card now says Adjusted instead of Auto. Only the changes you made by hand are kept for the size. Everything else still follows the original.

While you adjust a size, you can’t add layers, add, move or delete pages, or change the canvas size. A notice tells you when you try. Do these on the original design. A layer you add to the original shows up in every size.

To drop your changes, click Reset size in the banner, or Reset on the card. The size goes back to the automatic layout. You can also undo and redo everything you do in the Resize tab.

Rename and delete sizes

• Rename: click the size’s name on its card and type a new one. The id stays the same, so renders that use it keep working.
• Delete: click Delete on the card and confirm. The size and its changes are removed.

Render a size

Click API on a size’s card. It shows the request that renders this size:

{
  "templateId": "YOUR_TEMPLATE_ID",
  "modifications": { "headline": "Summer sale" },
  "response": { "format": "png", "size": "story" }
}

• Copy JSON copies the request.
• Test render (PNG) renders the saved design at this size and shows the images. It uses credits like any render. Save first: renders use the last saved version.

With two or more sizes, the tab also shows Every size in one call: one request that renders the original and every size, with sizes in place of size. One request can render up to 10 sizes. A render makes at most 20 template pages. With several sizes, it makes at most 30 pages in all, counting each page at each size.

The API also takes sizes you haven’t added, such as "landscape" or "1200x628", and lays them out automatically. Add a size in the editor when you want to see it or adjust it.

You can use sizes outside the API too:

• Dynamic URL: add _size to the link, such as _size=story.
• Form: pick one of the template’s sizes in Size in the form’s output settings.

For every option, see Smart Resize in the API.

Credits

Each size costs the same as a normal render: 1 render credit per page per size. A 3-slide carousel in the original size and as a story uses 6 credits. See Credits.

If the template has AI layers, all the sizes of one render share the same AI result, so you pay for it once.

Related

• Make the keys that change in every size: Choose what changes.
• Render many sizes from your code: Smart Resize in the API.
• Pick a size from the start: Create a template.