If the mn:editable attribute is applied to an image, new features and constraints will be added to it, such as associating a link and resizing it.
mn:editable will open the editor interface, allowing users to resize images in width and height, configure their alignment, title, alt text, and associate a link to make the image clickable.
Image width
It is always mandatory to specify the width value.
To set it, use the width="" attribute which defines the maximum width of the inserted image.
<img mn:editable width="100" />
The platform's default behavior for automatic image resizing is based on the following rules:
- If the image is too wide, it is proportionally scaled down to the maximum allowed width;
- If the image is narrower and no constraints have been applied, no operation is performed;
- If height dimensions are specified, the image width rules apply first; if the image remains too tall, it will be cropped in height.
Default images
It is possible to set up the src attribute with a default image that resides in the imported template's .zip file. If src is empty, the platform will display a gray box with the dimensions specified in the img tag.
<img mn:editable width="100" src="img/image1.jpg">
When the user selects the image to insert, it will be automatically resized to meet the required width.
You can also define the height of the image. In this case, the image will first be resized in width and then possibly cropped to match the desired height.
The basic attributes for managing images with Giotto are as follows:
| Attribute | Description | Example |
|---|---|---|
| mn:min-width | Prevents the user from selecting an image narrower than the configured value. | mn:minwidth="60" |
| mn:min-height | Prevents the user from selecting an image shorter than the configured value. | mn:min-height="60" |
| mn:max-width | Resizes an image's width. | mn:max-width="60" |
| mn:max-height | Defines the maximum height of the image after potential height resizing. If the height exceeds the limit, it is cropped. |
mn:max-width="100" |
| mn:linkable | Defines whether a link can be associated with the image. Its default value is true. |
mn:linkable="true" or "false". |
| mn:editable | Makes a content editable. | |
| mn:label | Displays a label in the content editing form. | mn:label="Label" |
<img mn:editable width="100" mn:min-height="70" mn:resize="false" mn:label="Logo" alt="Alternate text" mn:linkable="false"> <img mn:editable width="100" height="100" alt="Image not hosted on the platform" mn:noimport />
To optimize the template display, the Giotto language attributes can sometimes modify the behavior of standard HTML attributes.