Blog Image
Blog Image Tailwind Make


Generating Images on the Fly with Make

The example we have chosen is the generation of speaker images for the NoCode Rocks conference.

This example is stripped down to the most important parts. You can easily extend it.

We have also an Airtable version of this implementation: here.

In this scenario, we are going to combine images and place a text on them. A more complete scenario for the NoCode Rocks conference can be found at the end of this post.




Fill in the Google Sheet

For each speaker image, fill in the columns in a new row:

Create the Make scenario

1. Add a connection to the Google Sheets as “Search Rows” from above. Add a filter (Checked Equal to)


2. Add the 1001fx app and select “Convert HTML String or URL to an Image”

  • Fill HTML with
  • Replace the placeholders REPLACE_SpeakerImageUrl_cell, REPLACE_OverlayImageUrl_cell and REPLACE_Name_cell with outputs from the Google Sheet


  • Set width and height to 1000

  • Optionally add a filter to the link between the data fetch step from Google Sheet and the 1001fx step


3. Add Google Drive “Upload File” App and select the output path


4. Done

The generated images will be stored in the gdrive folder.


The complete Make blueprint can be downloaded here: GenerateSpeakerImageBlueprint.json


This example uses tailwind to generate a html page. For developing the template you can use the Tailwind Playground before running your examples on make.


We hope you enjoy using this feature.

If you need assistance in creating an automation solution, we offer professional services.


Here is a more complete scenario of a map for the Nocode Rocks conference (1600x900).