How to shrink an image in an Embedded tag

Support
#1

Hi,

I hope this is not too much of a newbie question, but I am trying to display an image from an AWS S3 bucket in a Cuba platform page to go alongside the text information stored in the DB. I have created an Embedded component in the page to do this, the XML and code for the URL are below:


<groupBox caption="Photo"
          expand="app1B"
          height="250px"
          spacing="true"
          width="250px">
    <embedded id="app1B"
              align="MIDDLE_CENTER"
              width="100%"/>
</groupBox>


app1B.setType(Embedded.Type.IMAGE);
app1B.setSource(new URL("https://s3.eu-west-2.amazonaws.com/photo-upload.solutiondomain.co.uk/users/smartermetering/objects/"+entity.getUuid()+"/appliance1imageB"));

The trouble is the image is big (>1000px per side), but the 250px box just means you scroll around the image in the Embedded component - I want it to shrink to fit. If I modify the style tags on the iframe image directly in the resulting source I can add width and height to shrink it, but I can’t see how to do that using the XML or Controller.

Any help would be most appreciated,
Thanks
Mark

#2

Hi,

There is a problem with Embedded.setSource(URL) method. It sets Type.BROWSER implicitly. Simply swap lines:


app1B.setSource(new URL("https://s3.eu-west-2.amazonaws.com/photo-upload.solutiondomain.co.uk/users/smartermetering/objects/"+entity.getUuid()+"/appliance1imageB";));
app1B.setType(Embedded.Type.IMAGE);

After that, an image will be displayed as HTML tag and zoomed if you set width/height for Embedded component.

In the upcoming version 6.6 we have introduced new Image component with flexible zooming options and convenient API. See documentation draft here: Image - CUBA Platform. Developer’s Manual

#3

Thanks for the answer!

I am starting a new project, is 6.6 stable enough to use now? I would prefer to use the latest available.

#4

Yes, it is stable enough and we are planning to release 6.6.0 in 2-3 days.