Images

Images uploaded to Phosis’s CDN have some dynamic, on-the-fly options through attributes & their URLs.

data-phosis-object-img-configuration

This powerful feature lets you take advantage of Phosis’s cloud-enabled image manipulation functionality by passing a configuration URL mask that will be added to the cloud image’s URL (if you’re loading images that exist within Phosis.)

Edits made to images are cached in Phosis’s content delivery network. If a request is made to an image & configuration combination that hasn’t already been cached, it’s created on-the-fly and returned to the user while being simultaneously uploaded to the CDN in the background so that the next time that image configuration URL is hit the cached CDN version can be used, for speed.

It takes the form of a URL path, e.g. “s/w/1600/h/500/q/55/”. The available options are:

Size: s/[w|h]/[px]

The s/ URL option followed by w/[px] and/or h/[px] lets you tell Phosis Render to resize/crop the object to the specified pixel dimensions.

If you include only the width or height, your image will be resized proportionally to the dimension you specify.

If you include both width and height, your image will be first intelligently resized to the most appropriate dimension and then cropped.

Quality: q/[%] (for JPGs only)

The q/ URL option followed by a number between 1-100 specifies the JPEG compression quality Phosis should encode this image with. The default quality is 75 for a reasonable tradeoff between image quality and file size. However, you may choose to go lower for further optimization.

Example:

<img src="/mockup-image.jpg" data-phosis-object="Image" data-phosis-object-attributes="src,title,alt" title="" alt="Alt Text Placeholder" data-phosis-object-img-configuration="s/w/500/h/500/q/55/">