Skip to content

Creating images for your Joomla content

Similar to creating text content such as blog posts or newsletters, this tab lets you create and modify images based on a description you provide.

The general workflow is:

  1. Enter a description of the desired image, select dimensions, possibly add more instructions to make sure the AI understands you well, then request the image creation
  2. Possibly ask AI to change a part of the generated image to suits your needs and request image modification
  3. Repeat #2 until you're happy with the image
  4. Click one button to Save the image to your server
  5. Click one button to Use the image in your content

4AI uses the OpenAI images models Dalle-e-2 and the latest version Dalle-e-3. They differ in speed, quality and pricing. Please refer to OpenAI documentation for up-to-date details about these models.

The AI provider creates an image in the png format, that is not well suited for use on a website due to its size. When you save an image, 4AI converts it to multiple sizes and into the jpg and webp formats to use in your website with the best performance.

Define the image you want

On that screenshot you can see the main controls you have over the image creation.

Description

This is where you describe the desired content of the image.

Do not start with An image of.... or Create an image of .... Instead, directly describe the content: A wooden bridge over a large river.

Image Alt text is automatically managed

This description will be used as image Alt text later so keep it concise. You can enter additional information about the image, that should not be part of the Alt text in a dedicated separate input field (click on More options to show that field)

Other options

  • Dimensions: is a list of possible dimensions based on the currently selected AI model. Dall-e-2 can only generate square images.
  • Quality: Selecting HD will cause the model to generate an image with more details (will take more time and cost a bit more of course)
  • Style: Select Vivid for more artificial images, Natural for more photo-like images
  • Modifiers: to help you defines your image characteristics, you'll see 4 selectors below the description with common image specifications. You do not have to use them, they are only here to help and guide as you discover how image generation works

More options

By clicking the More options button, another text input appears: Custom image generation instructions.

If needed, you can provide the model with additional instructions such as The river should be very wide, the sky should be cloudy and no human should be seen. These additional instructions will not be used in image Alt text.

Generate image

Once the above fields are set, click the Submit request button and the image will be generated. The time needed depends on the selected model, image size and quality.

As usual, 4AI will offer a live evaluation of the expected cost of the image generation in the request control area.

Be aware that generating images is comparatively more expensive than generating text.

The result screen will look like this:

Modify the response

If the image suits your need, you can move on to the next step, Save the image.

But if something's not right, you can either:

  • start again from scratch by clicking Modify request
  • ask the AI to modify the image, by clicking on Modify response

At this moment, only the Dall-e-2 model can modify images. But it's also restricted to square images, so the Modify response button is only available for square images

Here is a square image after clicking the Modify response button:

Select the area to modify

The first step here is to click around the area you want to modify:

You can:

  • add a point by clicking somewhere on the image
  • delete a point by clicking again on an existing point
  • click and drag an existing point to move it

4AI will automatically draw a line between points and close the area once you have drawn enough points. The area to be modified is colored in transparent red.

Explain the modification

Once you have selected the area to modify, click the Modify button (you can come back to change the selected area at any time).

Use the How should we modify the image? input field to describe how you would like the selected portion of the image to be modified, then click the Submit request button to ask the AI to perform the change.

You can repeat this process until you're happy with the image. Please note however that as this moment, our experience is that the modification model (Dall-e-2) is much less apt at understanding modifications instructions and requires extensive instructions to achieve good results.

Said result will vary a lot with the type of images you are creating and with the acquistion of prompting experience.

Save the image

Once you're happy with the result, click the Save image... button. This will cause the following to happen:

4AI will tell you where it saved the images, under which names. All generated images are saved in the folder:

/images/gen

Inside that folder, you'll see the following structure:

As you can see, 4AI:

  • saved the original image generated by the AI model under /images/gen/src as a png file
  • created additional versions in the jpg and webp formats in the corresponding folders
  • created additional dimensions in each format:
    • a 640 pixels image
    • a 800 pixels image
    • a 1280 pixels image
    • an image in the original dimension

The pixel dimensions listed above are the largest dimension of the image. 640 pixels, for instance, will be the height on a portrait image and the width on a landscape image.

You can access 4AI images with the media manager

All these saved images are normal images, living on your server and can be accessed and used normally with Joomla Media manager.

You can use the media manager to re-process them (crop, resize) and then use them wherever you would normally use images - but read on as 4AI lets you use them easily with just one click.

Use the image

As mentioned above, all images are saved on your server, and you can use them already was you would any other image.

But if you open the 4AI assistan while a Joomla editor is open, you can use the 3 buttons in the response control sidebar to directly inject the image in your content:

On an article, you can:

  • Set as Intro image
  • Set as Full image

Clicking any of these will set the generated image as the Intro or Full image for the currently edited article, as well as set the Alt text for them.

The last option here is the Insert at cursor button. Clicking it will create an optimized <img> tag in your content, at the cursor position.

The image tag created takes advantage of all the various dimensions and format created to generate the most optimized display for all screen sizes. Here is an example:

<img class="forai-gen"

src="images/gen/jpg/a-wooden-bridge-over-a-large-river-with-2024-01-26-18-58-05-1024x1024-24e9e3c823.jpg"

sizes="(min-width: 800px) 800px, (min-width: 1280px) 1280px, 640px"

srcset="images/gen/webp/a-wooden-bridge-over-a-large-river-with-2024-01-26-18-58-05-640x640-24e9e3c823.webp 640w,
 images/gen/webp/a-wooden-bridge-over-a-large-river-with-2024-01-26-18-58-05-800x800-24e9e3c823.webp 800w,
 images/gen/webp/a-wooden-bridge-over-a-large-river-with-2024-01-26-18-58-05-1280x1280-24e9e3c823.webp 1280w"

alt="A wooden bridge over a large river with a red bicycle on the middle of the bridge" 
width="1024" height="1024" 
loading="lazy">

The generated tag includes:

  • the Alt attribute filled with the description used to generate the image
  • sizes and srcset attributes listing the webp images and their dimensions so that browsers can load the most appropriate size based on the visitor device size
  • width and height attributes so that aspect ratio is known and Cumulative Layout Shift is avoided
  • lazy loading attribute (to be removed however if this is the first image on the page)