Frontend image generation requires Premium or Agency.
Configure The Feed #
- Add an optional File Upload field for the generated image.
- Create an AI Image feed and choose Frontend button.
- Build a prompt with merge tags from fields the visitor completes before generation.
- Choose the target File Upload field, size, quality, and format.
- Choose public or administrator-only frontend access.
- Save the feed and note its numeric ID.
Add The Button And Preview #
Place these inside the form, replacing 456:
[goaif_image_button feed_id="456" label="Generate image"]
[goaif_image_preview feed_id="456" aspect="3/2"]Use the same feed ID for both. Add an optional placeholder_url to the preview when the design needs an initial image. The placeholder and generated image fill the preview’s aspect ratio; images with different proportions are cropped from the center.
What Happens Before Submission #
The visitor selects the button. The plugin obtains a single-use token, sends the current prompt values to OpenAI, stores a temporary verified generation session, and displays the result. The temporary image is not yet an ordinary entry upload.
When the form is submitted, the plugin verifies the generation session and passes the file through the target File Upload field handling. The saved entry can then distinguish a temporary generated image from the verified attached file.
If the visitor generates another image, confirm the desired preview is visible before submission. Avoid multiple previews with the same feed ID unless they are intentionally showing the same result.
