What are “img” Tags?

The Image tag, "<img>", is the tag that we use to insert an image from a file path or a URL. In Ingeniux, we mainly use the file path option because Ingeniux can store images. For example:

  • <img src="url" alt="some_text" style="width:128px;height:128px;">
  • <img src="image.gif" alt="The Image" width="128px" height="128px">

Using "img" Tags

When using the “img” tag in HTML code, there are several attributes that are needed.

  • src="url": this will input the file path to the image in the assets folder in Ingeniux. 
  • alt="some_text": this attribute is also required. Without it, the code will not be in compliance with web standards. If the image does not load the text inputted will be displayed.

Adjusting the Image

The coding required to adjust the width and height of the image is presented below as "Style" and "Width". The style attribute is considered an inline attribute, which can have a negative effect on global css, so it is not recommended. The preferred use is the width code as presented below:

  • style="width:width;height:height;"
  • width="128px" height="128px"

Creating an Image in Ingeniux Editor

Click in the Body Copy section where you want the image to appear. If you want to change an image, then simply click on the image. Next, click on the image icon in the toolbar.

an image of a tree

This will bring up a new window, which will ask you for the Image URL, description and title.

The image URL is where you will insert the location of the image that you saved in the Assets. If you don't remember where you saved the image, then you can click on the image icon to the right of it.

an image of a computer window with folders

Once you have selected the icon, you can search and find the image. After the Image URL is finished, don’t forget to write the description and title. Your image should be ready to display. If you want to change the size of the image, you can click on the appearance tab, and you will see a section called Dimensions. This section will allow you to change the size.

Click here for more information regarding images in HTML.