Image in Widget

williammorton · ‎10-10-2017

I'm trying to add an image to a Service Portal page, but whenever I insert it (directly into the container, I can't find another way to do it, it copies the image 3 times. I suspect that this is because it is the wrong size, but I do not know how to fix that or indeed what the required size is.

In the preview window, the whole image is visible (albeit 3 times), but on the actual page it just shows a horiontal line taken from part of the image.

I am also trying to embed a link behind the image, but that is a separate issue.

brianrichards · ‎10-10-2017

It's a little unclear how you're adding the image, as I cannot see how to add an image directly to a container. It would seem the most common approach to adding an image to a Service Portal page would be to:

Add the image to the images library at System UI > Images

Create a new widget using Service Portal Configuration > Widget Editor

Display the image in the widget using HTML code such as:

From Service Portal Configuration > Designer drag the widget into a container.

Do you have a screenshot of how you've inserted the image?

- Brian

williammorton · ‎10-11-2017

Yes. I selected the container using the breadcrumbs, then clicked edit. I then selected Background Image > Upload an image

And this is the image it produced from the image I selected (it is the correct image, just repeated):

I just tried your method, and got stuck at the adding to the Image library step. It kept giving me the error message

I tried it with the .gif and .png versions of the file, but got the same error message both times.

williammorton · ‎10-11-2017

I have noticed that when I attach the file in the image library, it keeps saying Manage Attachments (0), even though there is obviously an attachment there

When I insert 2 attachments, it shows Manage Attachments (1)

brianrichards · ‎10-11-2017

When you add an image to the image library, the 'attachments' functionality is not what we are interested in. At the bottom of the form you should see a (somewhat obscure) field for 'Image' and a link to 'Click to add...', and that's what we want.

Give the file a name that matches the file name (I do that to prevent confusion on my part), and it is this name that you would reference in the src='' attribute of the <img> tag. Then click on 'Click to add...' to add your image to the library.