Skip to content

gettingstarted.md

Latest commit

 

History

History
35 lines (23 loc) · 2 KB

gettingstarted.md

File metadata and controls

35 lines (23 loc) · 2 KB
Raw

First, make sure you've setup your site on your Salieo account. If you haven't done this yet you will want to do so before proceeding.

Include salieo.js

Next, you can get started with Salieo by including the salieo.js library in your site's <head> with the following:

<script src="https://cdn.jsdelivr.net/npm/salieo.js@0/dist/salieo.min.js" defer></script>

You can find comprehensive documentation of all the salieo.js features and options here.

Create Instance

Create an instance, passing in your options.

var instance;
document.addEventListener("DOMContentLoaded", function() {
    instance = new salieo({
        site_id: "YOURSITEID"
    });
});

NOTE: It's important that salieo.js is included in your site's <head> and is initialized right after the DOMContentLoaded event to ensure there is enough time to load the crop direction data and apply the transformations to your images before they are displayed (resulting in no visible jump when the images reposition). More information about initializing salieo.js can be found here.

Setup an image

To activate Salieo on your first image, add the salieo class to any <img> element or element with a CSS background-image. You can also specify a custom class to use (instead of the default salieo) with the img_class option.

@jsfiddle

To fine tune how your image is positioned or scaled there are a variety of crop options that can be set globally (for all images) or per-image. Here's the same image with the zoom set to auto.

@jsfiddle