Design Studio - Display a dummy image when searched photo does not exist

[Former Member]

hello,

I would like to display an employee photo, which should be searched on the server folder with URL.

Each photo name in my folder is : "employeeId.png".

But some employees do not have a photo, and in this case I try to display a dummy photo, which I have in the same folder with employee id 00000000.

My variables are :

- URLlink variable is global variable type URL, which gives a path to my folder with employees photos

- empnb variable is filled with employee id through getSelectedMember on cross table

- filename variable to search a photo on the server

- filename0 variable for those employees for which photo does not existe

I tried to test the existence of an employee photo with getHeigh() method or getImage() method, to check if a photo filename set in Image1 is a real

one. Cause if a photo does not exist, the Design studio put by default a small black cube inside Image.

Unfortunatelly these tests are not working .

My script:

var filename =  URLlink + empnb + ".png";    // existing employee photo

var filename0 = URLlink + "00000000" + ".png";  // dummy profile photo

IMAGE_1.setImage(filename); //Try to put a photo found on the server 

var height = IMAGE_1.getHeight(); 

if (height == -1)

{ IMAGE_1.setImage(filename0);   }

else   {IMAGE_1.setImage(filename);}

Does anyone have other idea how to test if a photo exist or not in my folder.

Many thanks!

Bea

[Karol-K · Accepted solution]

Hi Beata,

I can offer you the SDK component on short term:

Feel free to check if this helps you.

If you need help, just ask - example application is attached on the blog post (via GitHub).

Regards, Karol

[mike_howles4 · Accepted solution]

Good stuff

[Former Member · Accepted solution]

Works perfectly for me!

Thank you for helping

Beata

[mike_howles4]

You can't do this today without inline CSS.  If you'd like, I can show you how to do it with my HTML extension in my Utility Pack.  Basically you need two DIVs, a container fallback div with a "not pictured" fallback background-image, and one inside with the candidate picture having a background-image specified from your BIAL logic, whereby if it fails to find the image, you have no black box.

Make sense?

[Karol-K]

I do not think it is possible today (at least not via checking of the image size). Such function would require

* code extension in image component -> boolean IMAGE.exists()

or

* could be made by custom image implementation via design studio SDK. This custom image would send a request via Ajax and check response status. in case not existing some dummy images would be placed.

for both options there are no plans as of today.

the only option I see today is to generate in the folder "dummy" images for all employes who do not have any real image.