Blog Image
Blog Image Tailwind Make

12.07.2024

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.

speakerimage_final.png

Preparation

speakerimage13.png

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)

speakerimage18.png

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

speakerimage20.png

  • 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

speakerimage19.png

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

speakerimage22.png

4. Done

The generated images will be stored in the gdrive folder.

speakerimage24.png

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

Tailwind

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.

speakerimage25.png

We hope you enjoy using this feature.

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

Extra

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

speakerimage_complex.png