Typescript Library to handle Responsive Images
Source: GiLab
Mirror: GitHub
Install via NPM
$ npm i @kirinnee/rimage
or
Install via Yarn
$ yarn add @kirinnee/rimage --prefer-offline
Using in browser
Attach scripts in dist/
folder
<script src="./dist/@kirinnee/rimage.min.js"></script>
Configure how you want to load your images with a Rimage
object
//import Rimage
let config: Rimage = {
key: "def",
width: 2000,
sizes: {
def: 80,
med: 50,
small: 30
}
};
The key is the name of the default size ratio. The image with suffix of this key will resize base on percentage set on the map
This is the screen width where you would want to use your default size, defined by the "key" key in the size map.
This is the size map. It maps the percentage of the default screen to each key. If the screen falls
below percentage * def-width
it will use the next lower image's prefix
- If the screen width is 1600 (2000*80) and above, it will use images of the "def" key
- If the screen width between 1000 and 1600, it will use images of the "med" key
- If the screen with is smaller than 1000, it will use images of the "small" key
You are responsible for resizing your images. When the image is resized to key of "def", it will use the image <name_of_file>_def.<extension_of_file>.
For example, if the file name you imported was "rain.png", and the key used is "med", it will look for "rain_med.png"
To use Rimage, you have to create a Rimager
object using the config. Do note that this depends on
@kirinnee/core
library.
let rimager: Rimager = new Rimager(core, config, new SortType(), false);
rimager.ExtendPrimitives();
core
is the @kirinnee/core
instances that already extended primitives. config
is the Rimage
config object.
There are 2 types of usage for rImage. You can either use it to preload and change all images during
initialization, or use an extended method, .Rimage()
or the string class to convert the string (url) of
the image to suffix
To preload and prechange all the images during initialization, use RegisterImages
method. It provides a
callback to allow to hook onto values for the loading progress (number of images loaded and not loaded).
//import the images
import sop from "./assets/test/sop.png";
import sophie from "./assets/test/sophie.png";
import book from "./assets/test/book.png";
//Make all the image into a single object
let images: any = {
ryne: {
ryne1: sop,
ryne2: sophie
},
book: book
};
//Register the image
rimager.RegisterImages(images, (ev: ImageLoadEvent) => {
//on each image load, print the progress
document.getElementById("load-progress")!.innerText = ev.progress.tangential.over;
});
//Use the url to set src, or use for vue, react, whichever.
document.getElementById("image1").setAttribute("src", images.ryne);
To use it on the run, use the .Rimage()
extension function on strings to change them.
import sop from "./assets/test/sop.png";
sop = sop.Rimage(); //make the link responsive
//or
let url:string = "./assets/sophie.png".Rimage();
//use the url to set src, or use for vue, react, whichever
document.getElementById("image1").setAttribute("src", url);
document.getElementById("image2").setAttribute("src", sop);
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
We use SemVer for versioning. For the versions available, see the tags on this repository.
This project is licensed under MIT - see the LICENSE.md file for details