Documentation
  • Welcome to Documentero Docs
  • General
    • Usage Limits and Quotas
    • Manage Account & Plans
    • Documentero Roadmap / Changelog
    • Privacy Policy
    • Frequently Asked Questions
  • Templates Introduction & Tutorial
  • Template Upload/Re-upload
  • Organize Templates into Folders
  • templates
    • Fields
    • Sections
    • Fields - Images
    • Fields - QRCodes
    • Fields - Links
    • Fields - HTML Support
    • Fields - Markdown Support
    • Fields - Mermaid Support
    • Fields - Formatters
    • Sections - Types & Options
    • Smart Fields
    • Smart Sections
    • Template Variables
  • Charts & Diagrams
  • Templates - Excel
    • Fields
  • Sections / Tables
  • Fields - Images
  • Fields - QRCodes
  • Fields - Links
  • Fields - HTML Support
  • Fields - Markdown Support
  • Forms
    • Create Documents using Form
    • How to customize document form
    • Fields/Sections - General Settings
    • Field- Types & Options
      • Field - Multi Checkbox
      • Field - Checkbox
      • Field - Radio Button
      • Field - Datepicker
      • Field - Radio Select
      • Field - Select
      • Field - Multiline
      • Field - Number
      • Field - TextField
    • Conditional Fields & Sections
    • Shared Forms
      • Sharing Forms
      • Shared Form Configuration
      • Consent Form (GDPR)
      • Embeed & customize shared form on your website
  • Spreadsheet
    • Create Documents using Spreadsheet
  • API
    • Create Documents using API & JSON
    • Integrate with Documentero Cloud API
  • ChatGPT
    • Create Documents using ChatGPT
  • Integrations
    • Zapier
    • Make.com
    • Integrately
    • Pabbly Connect
    • Albato
    • Bubble.io Plugin
    • Webflow
    • Flutterflow
Powered by GitBook
On this page
  • Adding a dynamic image to document template
  • Dynamic Image Size
  • How to pass the image data using API

Fields - Images

PreviousSections / TablesNextFields - QRCodes

Last updated 3 days ago

You can inject logos, photos or images into your spreadsheets cells dynamically. It's possible using special field type (available in API mode using Base64 or Image URL).

Syntax

You need to add an "%" in front of your field name The final syntax should be: {%fieldName}

{photo} - Regular Field that supports only regular text / number
{%photo} - Special field that creates images in output document
{#%people.photo} - Special field in table/section "people" that creates Images

Adding a dynamic image to document template

You can add dynamic images to your templates using the "%" prefix. Examples: {%logo}, {%photo}, {%product}. Image will be placed with starting point of top-left corner for placeholder cell and can overlap cells on the right/below image placeholder cell.

Dynamic Image Size

By default image size will be the same as the size of the image that is being sent, however, in most cases, we would like set width/height manually or limit the maximum width or maximum height to keep the aspect ratio of the image (recommended). You can do that by using "size" and "maxSize" formatters and providing desired width and height.

Most of the time you need to set maxSize (otherwise your image could be cut)

Examples:

{%image1}
{%image2 | size:250:100}
{%image3 | maxSize:300:500}

How to pass the image data using API

Once you upload your document template that consists image tag ( e.g. {%logo} ) it should be detected on the template overview page

You can send images over API in two ways:

  • as image url (provide full url to image)

  • as text using base64 format (see example below)

Supported file types: jpg, png, svg.

Sample Small Image example will be added to your API section:

Example: Passing image using image url
Template
Output