How to upload a content image and allow an enlarged view when clicked?

Question

Hi all, 
 My use case is that I am creating content (all types) using the REST API. 
 My issue is that when I create content manually that has an image, the image can be clicked for a pop-up enlarged view of the image. But when I create content via REST this does not occur. 
 What I am finding is that the URL patterns are different for manually created vs. programmatically created content. When I upload the image via REST I upload it to CFS and then use the macro code in the content body. 
 
 This URL is created by uploading an image and placing it some content : 
 /cfs-file/ __key/communityserver-wikis-components-files/00-00-00-00-48/2055.image3698.png 
 And this URL is created by creating content manually and dropping an image into the content : 
 /resized-image/ __size/320x240/__key/communityserver-discussions-components-files/4/Screen-Shot-2020_2D00_12_2D00_18-at-4.58.22-PM.png 
 
 My expectation is that the /resized-image/ path is what triggers the addition of the JS code for the enlarged image pop-up. 
 
 Question: How can I translate the non-popup URL to a pop-up URL? Or do I need to upload the image using a different REST endpoint? 
 
 Thanks.

Ben Tiedt · Accepted Answer

The resized-image endpoint works on any file stored within the CFS. Images stored in the CFS and embedded in HTML (via [view] or

) will be saved/secured with the content being created (whether created on-site or via REST). There is logic within the platform client script libraries that detects tags referencing the resized-image/ handler and inspects them to add the pop-up viewer support. You could embed the with the resized-image/ handler directly (it's what the on-site editor does). The format for the resized-image/ handler is: /resized-image/__size/{WIDTH_IN_PIXELS}x{HEIGHT_IN_PIXELS}[x{RESIZE_METHOD}]/__key/{SOURCE_CFS_PROVIDER}[/{SOURCE_CFS_PATH}]/{SOURCE_CFS_FILENAME} Where the RESIZE_METHOD is an integer: 1 = Scale down (Default). Resizes the image, maintaining its aspect ratio, only smaller (so small images are not enlarged), to the bounding box of WIDTH_IN_PIXELS by HEIGHT_IN_PIXELS 2 = Zoom and crop. Resizes the image (maintaining the aspect ratio) to cover WIDTH_IN_PIXELS by HEIGHT_IN_PIXELS and then center-crops the image to WIDTH_IN_PIXELS by HEIGHT_IN_PIXELS. This will resize a small image larger and will always return an image at the requested width and height. The generation of this URL can also be done through the API via $core_v2_ui.GetResizedImageUrl() in scripts or IUI.GetResizedImageUrl in plugins.

How to upload a content image and allow an enlarged view when clicked?

Top Replies