Image¶
Attribute to specify an image file and display it on the page. ηCMS supports automatic image resizing according to attribute parameters.
Attribute options¶
![../../../../_images/image_img1.png](../../../../_images/image_img1.png)
Attribute options
Option | Description |
---|---|
Width | The desirable width of the image on the page. |
Height | The desirable height of the image on the page. |
Auto-scaling | Enable/disable automatic scaling of the image according to width (and/or) height. |
Cover area | The intelligent scale mode provides the picture scaling will fill the specified area with preserving of an aspect ratio. |
Restrict size | If this flag is enabled, the specified image will be checked to match the specified width and height. |
Skip small | Do not scale an image, if its size is smaller than specified dimension. This mode is useful to avoid grain on resized image. |
Edit mode¶
![../../../../_images/image_img2.png](../../../../_images/image_img2.png)
Attribute on the edit page panel
By clicking the image selection button ηCMS offers to select an image file:
![../../../../_images/image_img3.png](../../../../_images/image_img3.png)
Selecting an image file
![../../../../_images/image_img4.png](../../../../_images/image_img4.png)
Attribute view after the image is selected
Using in the markup¶
Type of an attribute value: com.softmotions.ncms.mhttl.Image
Example of the insertion of scaled image as a part of <img>:
#set(Image img = asm('image'))
<img src="$!{img.link}"></img>
or:
<img src="$!{((Image) asm('image')).link}"></img>