Can someone please tell me how to change the image size for all catalog items in the fulfiller View and Service Portal.

[guzman]

Can someone please tell me how to change the image size for all catalog items in the fulfiller and in the Service Portal. We recently upgraded to Paris,

and the images now look way too big on all catalog item forms (fig.1). Especially in the fulfiller view. I inspected the image for the following catalog item in

fulfiller view, in Chrome, and I found a class called: navpage-layout. It contains a div class called sc_cat_item_image_block where I can manualy change the size attribute.

I would like to know where I should make the changes to make them permanent for all catalog items.

 

 Sample catalog image:

 Fig.1

 

Thanks,

Juan

[sachin_namjoshi]

Your best solution will be to update  your service portal theme with update CSS.

Better way to create CSS, stylesheet relationships for your portal theme and mention this class attributes.

This way its applicable to all pages for your service portal.

Regards,

Sachin

[guzman]

I'm sorry for the late response, but I had not had a chance to work on it again.

The issue that I'm having is in the Fulfiller portal, not in the Service Portal.

I right-mouse clicked the BOX image in Fulfiller view to inspect it in Chrome, and I would like to change size from large <img src ="1312312312..1312313?t=large (shown inside red rectangle below) to small or medium, but I would like to make it permanent for all other catalog items in fulfiller view, as they all show the same pattern. Please see sample screenshot of the html page I got after inspecting the BOX image shown above. 

Thanks,

Juan

[Willem]

Hi Juan,

You can do this using DOM. Create an onLoad Catalog client script with the following code.

To replace large with medium:

(set Isolate script to false. This field is not on the form per default, but you can add it to the Catalog client script)

function onLoad() {
	//img is the catalog image
	var img = document.querySelector(".sc_cat_item_image_block img");
	img.src = img.src.replace('large', 'medium');//replace large with medium
}

The result:

[guzman]

Thanks Willem for the quick response.

I'm afraid it will mean having to update all existing catalog items, and export them to all other instances. Is that the case?

There must be a fulfiller-view class style for catalog items somewhere where I can make a default, global change.

Thanks,

Juan

[Willem · Accepted solution]

Hi Juan,

I might have found something:

yourinstance.service-now.com/nav_to.do?uri=sys_ui_macro.do?sys_id=770989b10a0a0b0800b1333d892e2cdd

UI Macro: catalog_item

Try and update that large to medium and let us know if that works for you.