How to embed images into your projects

How to embed images into your projects

Use cases


Wall of images

If you wish to embed a wall of images, the best way to do it is to use the "auto" mode of the Real Time Image Editor. Just set the div area of the image at your will and set the scale mode to "auto". The service will return you the perfect image to be fitted in the element of your wall.


Here's an example:




The url of each single element of the wall has the following structure:




Fitting an image into a specific <div>


If you wish to fit an image into a specific <div>, you could either do that by cropping and resizing it in order to make a specific detail of the image fit the space properly or you might want to just center the image into that div. In the first case you can use the "manual" scale mode of the getThumbnail web service; in the second case you use the "centered" scale mode. 

The "manual" mode can be easily exploited in the GUI assistant which can be found within the Shareboard of your IMAGE content, under the "Cutom Thumbnail" sharing type.


Here is an example:


[dropdown:This is the original image - Click to see]

[/dropdown] [dropdown:This is the div - Click to see]


[/dropdown] [dropdown:This is what i get with a manual crop - Click to see]

[/dropdown] [dropdown:This is what i get with the centered scale mode - Click to see]



This is the url structure when using the "manual" scale mode:



This is the url structure when using the "centered" scale mode:



Scale the image to a smaller resolution


If you wish to preserve the original image in its integrity but simply scale it to a smaller resolution you can simply edit the divArea within the url, without providing any additional parameter. Just set the desired height or width, and the other dimension will adapt accordingly. 

This is an example:



The url will be structured as follows:



Hint: set the proper image according to device resolution


According to device's dpi you might want to embed different resolutions of the image; the browser will automatically choose the most appropriate resolution according to the device in use. In order to do so you can use the "srcset" attribute of the <img> tag.

The use case here is: I want the same image to be displayed across all devices, but I want to display it in a higher resolution on devices which can support it.

Here is an example:

<img src="//[clientId][clientId]/400x400/[xcontentId].jpg"
     srcset="//[clientId][clientId]/400x400/[xcontentId].jpg 1x,
     //[clientId][clientId]/800x800/[xcontentId].jpg 2x,
     //[clientId][clientId]/1200x1200/[xcontentId].jpg 3x,
     //[clientId][clientId]/1600x1600/[xcontentId].jpg 4x"

 NOTE: Internet Explorer and Edge browsers currently do not support the srcset attribute.

Further reference on srcset attribute can be found in this article.




In order to extract content's thumbnail make sure you have the following information:

1. the xcontentId of the content

2. the clientId, which is usually your company name.


Extracting the thumbnail

For some projects you may need to extract the thumbnail of your content, getting the most appropriate resolution to fill a div of a certain size. This procedure can be done via web services: the service to be used is getThumbnail which is included within the delivery package of xcontents


Rule of thumb of the getThumbnail service:

If the original image is a png file, this service will return a png to preserve transparency; in any other case it will return a jpg.


The URL of the service is structured as follows:



  • clientId (mandatory): is the domain name used to access THRON. Usually the company name.
  • divArea (mandatory): it is the desired dimension of the resulting image. If it is higher than the original image's dimension, no processing will be performed. If you want to get the highest thumbnail available you can set this parameter to "0x0".
  • xcontentId (mandatory): the unique identifier of the content for which you want to extract the image.
  • scalemode (optional): It represents the method used by the service to crop and resize the image. Available values are:
    • manual: (default value): is used to specify crop parameters, if no "cropmode" is provided, the image will be scaled to fit the requested dimension;
    • centered: it scales the image to fit the requested dimension, cropping borders if desired aspect ratio is different from the source image;
    • auto: this mode will work only if "Real-time Image Editor" (RTIE) application has been purchased. It applies a smart cropping of the image by preserving the subject, regardless its position. An interactive demo of how the application works can be found here. If auto mode is requested but the application has not been purchased, the service will return the image centered according to the requested resolution.
  • cropmode (optional): It is used to define whether cropping will be performed with absolute coordinates or relative ones. Available values are: pixel; percent (default). Percent values always refer to the original size of the image.
  • cropx (optional): Starting point (distance from left border) of the cropping function. Default value is 0 (top left corner of the image).
  • cropy (optional): Starting point (distance from left border) of the cropping function. Default value is 0 (top left corner of the image).
  • cropw (optional): The width of the resulting cropped image before resize. The default value is the width of the image minus cropx. If this value is higher than the Width of the requested image, no resize will be performed.
  • croph (optional): The height of the resulting cropped image before resize. The default value is the height of the image minus cropy. If this value is higher than the Height of the requested image, no resize will be performed.
  • quality (optional): The quality of the resulting image. Available values are: [0-100]. Default value is 90.


Was this article helpful?
1 out of 1 found this helpful

Have more questions?


Hai altre domande?