Media - globules-io/OGX.JS GitHub Wiki

OGX.JS has its own responsive media engine so there is no need to use a third party plugin or library. It handles following a set of pre-defined rules, the resizing and positioning of graphics elements such as images and videos. It offers targeted re-rendering to minimize the overhead that resizing many elements at the same time produce.

Creating responsive images and videos

One important thing to remember is that images and videos must be created using their native resolution such as

  <img src="img/my_image.png" width="300" height="500" class="_RESPONSIVE_MODE_">

Videos must follow the same rules, such as

  <video src="video/myvideo.webm" width="1920" height="1200" class="_RESPONSIVE_MODE_">

OGX.JS Responsive Graphics Engine offers different responsive modes under the form of a CSS class

 .ogx_image_contain //displays the entire image and is centered
 .ogx_image_cover //covers the entire container, scaled on X and centered on Y
 .ogx_image_fit  //scales on X and Y while keeping ratio and centers it
 .ogx_image_scale  //scales on X and Y while keeping ratio, not centered
 .ogx_image_resp //scales on X until native width while keeping ratio, not centered
 .ogx_video  //always display the whole video in container, keep aspect ratio, not centered (scale from left)
 .ogx_video_poster  //always display the whole video in container, keep aspect ratio, centered
 .ogx_video_resp  //fill X & Y + keep aspect ratio + center on Y	

Binding

OGX.JS does not automatically handle added elements at runtime unless you specify to watch for changes in one or more HTML elements. For instance, if we create a progressive list that loads 20 items at a time once the user reaches the bottom of the list, we need to tell the responsive graphics extension of the core, that the HTML element into which our dynamicList displays needs to be watched for changes.

In this case we simply bind the responsive graphics to that element which will make sure that if any other graphic elements are created inside that HTML element will be handled.

 OGX.Media.bind(_BIND_NAME_, _SELECTOR_);

BIND_NAME is an arbitrary name that you have to pass, SELECTOR the selector representing the HTML element to observe. To break the bind, simply do

 OGX.Media.unbind(_BIND_NAME_);

Forced Refresh

It is possible also instead of watching separate element to refresh the whole screen (less recommended)

 OGX.Media.resize();

but also possible to force a refresh on some single elements (more recommended) such as

 OGX.Media.resize(_SELECTOR_);

Why BIND_NAME vs SELECTOR ? The reason is very simple. While building apps with a lot of graphic elements, we realized that it was just be easier to sets binds with a name and forget about the selector due to the amount of them in some extreme cases.

Crop 1.32.0+

The crop method allows you to resize and/or crop a base64 encoded image

OGX.Media.crop(_BASE64_, _CALLBACK_, _WIDTH_, _HEIGHT_, _X_, _Y_);

To resize an image

OGX.Media.crop('ar23ez4a5r...', (__base64) => {...}, 600, 600);

To crop an image to get a square of 100px from position x 50px and y 50px

OGX.Media.crop('ar23ez4a5r...', (__base64) => {...}, 100, 100, 50, 50);