Skip to main content

Overview

Images adds a frontend generator to a WordPress page. Visitors enter a prompt, choose a provider and model if those controls are visible, and receive the generated media on the page. Use it for image generation, image editing, Google video generation, logged-in user history, usage limits, logs, and connected app recipes. In WordPress admin, go to AI Puffer > Images. Use the Image Generator tab to preview and publish the generator shortcode. Use the Settings tab for limits, UI text, custom CSS, and frontend model access.

Live image generator demo

Open the frontend image generator example.

Providers

See which providers support images, edits, and videos.

Generate Images

Let visitors create images from prompts.

Edit Images

Let visitors upload an image and describe changes.

Generate Videos

Use Google video models from the frontend generator.

Publish

Embed the generator with a shortcode or block.

Settings

Configure the Limits, UI Text, Custom CSS, and Frontend Models tabs.

Connected Apps

Send generated media events to external apps.

Logs

Review image, edit, and video activity.

Providers

Set up at least one image provider before publishing the generator. If the model list is empty, configure the provider in AI Providers, sync models, then return to Images.
xAI image generation and image editing use xAI image models such as grok-imagine-image. Generated xAI URLs are temporary, so AI Puffer stores generated images in the WordPress Media Library when possible.
Image editing only works with OpenAI, Google, OpenRouter, and xAI models that support image editing. xAI edit mode accepts JPG/JPEG and PNG source images.

Generate Images

To generate an image:
  1. Open a page that contains the image generator.
  2. Select the provider and model if those selectors are visible.
  3. Enter the prompt.
  4. Click Generate.
AI Puffer sends the prompt to the selected provider and displays the returned image in the results area. For logged-in users, generated images are saved to the WordPress Media Library.
Images frontend generate mode

Edit Images

Use edit mode when visitors should upload an image and describe the change they want. To enable edit mode from the Images screen:
  1. Go to AI Puffer > Images > Image Generator.
  2. Click the settings icon next to the shortcode.
  3. Set UI Mode to Edit only or Generate + Edit.
  4. If you choose Generate + Edit, choose the Default Mode and whether to show the mode switch.
  5. Click the shortcode snippet to copy the updated shortcode.
  6. Add it to a page.
To edit an image on the frontend:
  1. Select Edit if the mode switch is visible.
  2. Select OpenAI, Google, OpenRouter, or xAI.
  3. Select a model that supports editing.
  4. Upload one source image.
  5. Enter the edit prompt.
  6. Click Edit Image.
Images frontend edit mode

Generate Videos

Video generation uses Google video models. To use it:
  1. Go to AI Puffer > Settings > AI.
  2. Add the Google API key.
  3. Sync Google models.
  4. Return to AI Puffer > Images.
  5. Publish the generator shortcode or block.
  6. On the frontend, select Google and a video model.
  7. Enter a prompt and click Generate.
Video generation is an . Keep the page open while AI Puffer checks the status. Completed videos are saved as MP4 files in WordPress uploads.
Images frontend video model

Publish

Shortcode

Add the basic shortcode to any page, post, or shortcode area:
Common examples:
Use the shortcode settings panel when you want to build the shortcode from the UI.
  1. Go to AI Puffer > Images > Image Generator.
  2. Click the settings icon beside the shortcode.
  3. Choose the options you want.
  4. Click the shortcode snippet to copy the updated shortcode.
  5. Add it to a page or post.
Images shortcode settings
When provider or model selectors are hidden, the shortcode uses the provider and model attributes as fixed values.

Block

Use the block when you prefer the block editor.
  1. Edit a page or post.
  2. Add the AI Puffer Image Generator block.
  3. Choose whether to show provider and model selectors.
  4. Choose the UI mode.
  5. Enable history if needed.
  6. Choose the theme.
  7. Save the page.
Images block in the WordPress block editor
The block renders the same generator as the shortcode.

User History

History shows previously generated images and videos for logged-in users. To enable it, turn on Show User History in the shortcode settings panel, enable history in the block, or add history="true" to the shortcode. Guest generations are not shown in user history.
Images user history

Settings

Open AI Puffer > Images > Settings. The Settings screen is split into tabs.
Images Settings

Limits

Limits control how much image generator usage is allowed for guests and logged-in users. Open Limits.
  1. Set Guest quota.
  2. Choose Quota mode for logged-in users.
  3. Set User quota or Role-based quotas.
  4. Choose Reset period.
  5. Edit Quota reached message.
  6. Configure optional primary and secondary buttons.
Reset periods are Never, Daily, Weekly, and Monthly.
For credit-based image access, define pricing rules in Usage. To sell prepaid credits, create WooCommerce credit packages in Usage.

UI Text

UI Text changes the frontend labels without editing code. Open UI Text.

Custom CSS

Custom CSS applies to generators using the custom theme. Open Custom CSS. Use the custom theme in the shortcode:
Then target the custom wrapper:

Frontend Models

Frontend Models controls which models visitors can select when the frontend provider or model selectors are visible. Open Frontend Models.
  1. Select the models visitors can use.
  2. Leave all models unselected if you want to allow every configured image and video model.
  3. Save the settings.
AI Puffer builds the frontend provider list from the selected . For example, if you only select OpenAI models, the frontend provider selector only shows OpenAI. You can override the global setting for one page with the allowed_models shortcode attribute.

Connected Apps

Connected Apps can run a recipe after a successful image or video generation.
  1. Go to AI Puffer > Settings > Apps.
  2. Connect the app or webhook destination.
  3. Create a recipe that uses the Image Generated event.
  4. Publish the image generator on a page.
  5. Generate an image or video to test the recipe.
AI Puffer emits image.generated after the output is complete. For payload fields, see Event Webhooks.

Logs

Image and video requests are logged with the module set to image_generator. Logs can include the prompt, provider, model, mode, usage, WordPress user, guest session, and edit source image metadata. Source image binary data is not stored in the log. Usage operations:

Troubleshooting

Check that Images is enabled in AI Puffer > Settings > Modules and that the shortcode is on a published page. Admin users may see a module-disabled message; visitors see empty output.
Configure the provider in AI Puffer > Settings > AI or Settings > Integrations, sync models, then reload the Images screen. If Frontend Models is restricted, confirm that the selected models still exist.
Use OpenAI, Google, or OpenRouter. The selected model must support image editing, and the visitor must upload one JPG, PNG, WEBP, or GIF image under 10 MB.
Google video generation can take time. Keep the page open while AI Puffer checks the operation status. If it times out, try a shorter prompt and review the related log entry.
History only appears for logged-in users. Enable Show User History in the shortcode settings panel, enable history in the block, or add history="true" to the shortcode.
Open AI Puffer > Images > Settings > Limits and review the guest, user, or role-based quota. If you sell credits, also check the user’s balance and the pricing rules in Usage.