Retrieving the Image Element Dimensions in LWCM7

Following is a simple way you can retrieve the height and width of image element of Content Item in the presentation template.

Images height: [Element context="current" type="content" key="imageEle" format="height"]<br/>

Images width: [Element context="current" type="content" key="imageEle" format="width"]<br/>

Place the above tags in presentation template and “imageEle” is name of the image element from the content Item.

Note: Above tags will retrieve actual height and width of the image directly.Author doesn't need give image dimensions in Authoring Template . If you want to avoid the authors to edit the height and width of the image , we can hide them in Authoring Template default content properties section so that author can't input the dimensions .

When referencing file resource and image elements, format attribute has following different options:

• Use format="mimetype" to render the mime type of a file or image. If no valid mime type can be determined then "www/unknown" is rendered.
• Use format="filename" to render the name of a file or image.
• Use format="size" to render the size of a file or image using the most appropriate unit. If the resource is smaller than 1K, then the size in bytes is rendered. If the size of the resource is less than 1MB, then the size in kilobytes is rendered. If the size is greater than or equal to 1MB, then the size is rendered in megabytes.
• Use format="size_bytes" to render the size of a file or image in bytes. Only the numeric value is displayed.
• Use format="size_KB" to render the size of a file or image in kilobytes. Only the numeric value is displayed.
• Use format="size_MB" to render the size of a file or image in megabytes. Only the numeric value is displayed.

Note: format=”height” and format=”width” is not mentioned anywhere in the info center but it is working fine when I tested it in my local.

Note: Along with width and height you can use format="{alt, border, basewidth, baseheight, name, attributes}" to access any of the specific attributes assigned to the image component and construct your own image tag