Help Documentation

Folders

Assets

This folder contains images.

CSS

This folder contains all CSS files. There are two ready themes (light and dark) you can use.

Files

This folder contains all elements, frames, icons and templates hierarchically.

JS

This folder contains all javascript files. All javascript plugins (except FabricJS) we've used are in js/plugins.min.js file.

Json

This folder contains 2 json file which are required for loading "Google Fonts" and "Material Icons".

To open a new image on the photo editor, click New button. A modal box will appear;

Click this upload image button to select an image from your computer.

Click select from media library button to select an image from WordPress media library.

If you have a template (.json file) which you’ve created with Palleon before, use upload template button to open it on the photo editor.

If you want to open a default image on the first page load find the following line on index.html file;

<img id="palleon-canvas-img" src="" data-filename="" />

and add your file url and name like the following;

<img id="palleon-canvas-img" src="assets/placeholder-big.jpg" data-filename="placeholder" />

Template Library

Template library tab: You can find our template collection on this tab. Just click on the template to add it to the canvas.

Blank Canvas

Click “Blank Canvas” tab. Set the dimention, select a background color and click create button.

Panning and Zooming

To zoom in/out use the plus/minus icons which is at the bottom right corner of the screen. Please keep in mind that maximum supported zoom in/out levels may change on different browsers and systems.

To pan the image, click “hand” icon and drag&drop the image as you want. When you are done, don’t forget to click “hand” icon again to make the layers selectable again.

Layers

All objects you’ve added to the canvas, will displayed on this panel. You can drag&drop to change the order of the layers.

To view the layer settings click gear icon;

Lock/Unlock: A locked object can not moved or selected on click.

Dublicate: Click this icon to clone the object.

Show/Hide: You can use this button to toggle visibility.

Delete: Click this icon to delete the layer.

For bulk deleting, you can use the dropdown menu at the bottom of the panel.

Adjust

There are 2 section on this panel;

1) You can crop, resize or rotate your images easily from this section;

2) This section contains all image manipulation settings. You can use ready to use image filters from Quick Filters tab or you can combine other filter settings such as gamma, contrast,saturation etc. to create an unique filter on your image;

Note: This section is available only if you are editing an image. If you are working on a blank canvas, the section will not be available since there is no background image.

Photo Frames

You can find beautiful photo frames for your images on our frames gallery. Just click on a frame to add it to the canvas.

All: All frames are on this tab.

My favorites: Click the star icon on any frame, and you will see it here next time you visit.

Settings: You can rotate or flip the frame to get the best result according to your image ratio. Currently, the color setting is working on only Grunge frames.

Text

Palleon allows you to add as many text as you want to the canvas. You can customize the text as you wish using the rich set of customization settings such as color, font size, font family etc.

Image

You can add as many image as you want to the canvas. You can upload the image from your computer or select one of the images on the WordPress media library. When you add the image, the customization settings will appear.

Shapes

Shapes are useful elements that may help you to create contrast background for your texts or to create decorative patterns. The customization settings will appear when you add or select a shape.

Elements

Element library comes with carefully selected single color SVG graphics which are integrated with Palleon. You can use elements to create attractive banners, social media posts, video thumbnails etc.

All: All elements you can use are on this tab.

My favorites: Click the star icon on any element, and you will see it here next time you visit.

Settings: An element must be selected to view the customization settings.

Brushes

You can use all brushes except eraser, to paint the canvas freely. You can use eraser brush to delete the selected portions of the background image.

Icons

Palleon comes with hundreds of multipurpose icons ready to use. You can also upload your custom SVG files to the canvas. Please keep in mind that SVG files are made by different designers using different softwares. So, some custom SVG files may not displayed properly on the canvas.

Canvas Ruler

You can use the ruler to align your elements properly and fix spacing issues.

Settings

If you are working on a blank canvas, you can change the background color from this section. This section also contains user preferences.

Palleon is built on JQuery and FabricJS. So, starting from FabricJs Docs may be a good idea to learn how FabricJs works.

Custom.js

We recommend you not to edit original js/palleon.js file if it is not necessary. You can add your custom javascript functions to js/custom.js file. We added some example functions for you. You can find all you need to integrate Palleon with your app on this file.

baseURL: You may need to add the url of the main directory when you upload it to your site. For example;

baseURL: "http://www.mysite.com/palleon-js/",

Canvas Settings

These are all FabricJs options you may want to edit.

fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", // Should be a web safe font
    fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", // Should be a web safe font
    fontSize: 60, // Default font size
    fontWeight: 'normal', // e.g. bold, normal, 400, 600, 800
    fontStyle: 'normal', // Possible values: "", "normal", "italic" or "oblique".
    canvasColor: 'transparent', // Canvas background color
    fill: '#000', // Default text color
    stroke: '#fff', // Default stroke color
    strokeWidth: 0, // Default stroke width
    textBackgroundColor: 'rgba(255,255,255,0)', // Default text background color
    textAlign: 'left', // Possible values: "", "left", "center" or "right". 
    lineHeight: 1.2, // Default line height.
    borderColor: '#000', // Color of controlling borders of an object (when it's active).
    borderDashArray: [4, 4], // Array specifying dash pattern of an object's borders (hasBorder must be true).
    borderOpacityWhenMoving: 0.5, // Opacity of object's controlling borders when object is active and moving.
    borderScaleFactor: 2, // Scale factor of object's controlling borders bigger number will make a thicker border border is 1, so this is basically a border thickness since there is no way to change the border itself.
    editingBorderColor: 'rgba(0,0,0,0.5)', // Editing object border color.
    cornerColor: '#fff', // Color of controlling corners of an object (when it's active).
    cornerSize: 12, // Size of object's controlling corners (in pixels).
    cornerStrokeColor: '#000', // Color of controlling corners of an object (when it's active and transparentCorners false).
    cornerStyle: 'circle', // Specify style of control, 'rect' or 'circle'.
    transparentCorners: false, // When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill).
    cursorColor: '#000', // Cursor color (Free drawing)
    cursorWidth: 2, // Cursor width (Free drawing)
    enableGLFiltering: true, // set false if you experience issues on image filters.
    textureSize: 4096, // Required for enableGLFiltering
    watermark: true, // true or false
    watermarkText: 'https://palleon.website/', // The watermark text
    watermarkFontFamily: 'Georgia, serif', // Should be a web safe font
    watermarkFontStyle: 'normal', // Possible values: "", "normal", "italic" or "oblique".
    watermarkFontColor: '#000', // Watermark font color
    watermarkFontSize: 40, // Watermark font size (integer only)
    watermarkFontWeight: 'bold', // e.g. bold, normal, 400, 600, 800
    watermarkBackgroundColor: '#FFF', // Watermark background color
    watermarkLocation: 'bottom-right', // Possible values: "bottom-right", "bottom-left", "top-left" and "top-right".

Custom Functions

We added some example functions to help you start. You can edit these functions as your needs.

customFunctions: function(selector, canvas, lazyLoadInstance) {
/**
* @see http://fabricjs.com/fabric-intro-part-1#canvas
* You may need to update "lazyLoadInstance" if you are going to populate items of a grid with ajax. 
* lazyLoadInstance.update();
* @see https://github.com/verlok/vanilla-lazyload
*/

// You can put your custom functions here.    
},

Save Template

saveTemplate: function(selector, template) {
/**
* var template is JSON string
* @see http://fabricjs.com/docs/fabric.Canvas.html#toDataURL
*/

// var name = selector.find('#palleon-json-save-name').val();

console.log(template);

/* Do what you want */

toastr.success("Success!", "Lorem ipsum dolor");
// toastr.error("Error!", "Lorem ipsum dolor");
},

Save Image

saveImage: function(selector, imgData) {
var name = selector.find('#palleon-save-img-name').val();
var quality = parseFloat(selector.find('#palleon-save-img-quality').val());
var format = selector.find('#palleon-save-img-format').val();

if (format == 'svg') {
    // var imgData is raw svg code
    console.log(imgData);

    /* Do what you want */
} else {
    /**
    * var imgData is DataURL
    * @see https://flaviocopes.com/data-urls/
    * @see http://fabricjs.com/docs/fabric.Canvas.html#toDataURL
    */
    console.log(imgData);

    /* Do what you want */
}

/* Do what you want */

toastr.success("Success!", "Lorem ipsum dolor");
// toastr.error("Error!", "Lorem ipsum dolor");
}

Translation Strings

To translate the strings which are used in palleon.js file, open index.html file and find and edit the following code which is at the bottom of the page.

var palleonParams = {
"textbox": "Enter Your Text Here",
"object": "Object",
"loading": "Loading...",
"loadmore": "Load More",
"saved": "Saved!",
"imgsaved": "Image is saved.",
"tempsaved": "Template is saved.",
"freeDrawing": "Free drawing",
"frame": "Frame",
"image": "Image",
"circle": "Circle",
"square": "Square",
"rectangle": "Rectangle",
"triangle": "Triangle",
"ellipse": "Ellipse",
"trapezoid": "Trapezoid",
"emerald": "Emerald",
"star": "Star",
"element": "Element",
"customSvg": "Custom SVG",
"success": "Success",
"error": "Error",
"delete": "Delete",
"duplicate": "Duplicate",
"showhide": "Show/Hide",
"lockunlock": "Lock/Unlock",
"text": "Text",
"started": "Editing started.",
"added": "added.",
"removed": "removed.",
"edited": "edited.",
"replaced": "replaced.",
"rotated": "rotated.",
"moved": "moved.",
"scaled": "scaled.",
"flipped": "flipped.",
"bg": "Background image",
"filter": "filter"
};

How to add my own templates?

1) Create something with the image editor and download as template (You can also upload this JSON file directly to the editor from New->Upload Template).

2) Put the JSON file into Files->Templates->Json folder.

3) Create a thumbnail image and put the image into Files->Templates->img folder.

4) Open index.html file and add your template into #palleon-templates-grid div like the following example;

<div id="palleon-templates-grid" class="palleon-grid template-grid template-selection paginated" data-perpage="21">

    ...

    <div class="grid-item" data-keyword="MY TEMPLATE" data-category="blog-banners">

        <div class="template-favorite">

            <button type="button" class="palleon-btn-simple star"><span class="material-icons">star_border</span></button>

        </div>

        <div class="palleon-masonry-item-inner palleon-select-template" data-json="YOUR_JSON_URL">

            <div class="palleon-img-wrap">

                <div class="palleon-img-loader"></div>

                <img class="lazy" data-src="YOUR_THUMBNAIL_URL" title="MY TEMPLATE" />

            </div>

            <div class="palleon-masonry-item-desc">MY TEMPLATE</div>

        </div>

    </div>

</div>

The following data attributes are important;

data-perpage: The number of templates on the page. Required for pagination plugin.

data-keyword: The keyword which is used on template search.

data-category: The category which is associated with the template.

data-json: The url of the JSON (template) file.

data-src: The url of the thumbnail image. We used lazyload so there is no need to add src attribute.