Step 7: Image & Video Upload

Developing a Simple CMS Application with GridlessBuilder.js

Example file: example7.php

GridlessBuilder.js allows you to browse local image or video files and embed them into your content. This feature requires server side handling for saving files on the server. In the GridlessBuilder.js package, you will find uploadimage.php and uploadvideo.php that you can use for uploading image and video files. You need to specify the uploadImageHandler and uploadVideoHandler parameters with these files:

var obj = new GridlessBuilder({
    wrapper: '.is-wrapper', 
    ...
    uploadImageHandler: 'uploadimage.php',
    uploadVideoHandler: 'uploadvideo.php'
});

By default, all files will be uploaded into uploads/ folder. To view the files, a viewer named uploads.php. is provided. This page can also act as an image or video picker. You just need to specify the imageSelect and videoSelect parameters with this page, following with a querystring type=image or type=video.

var obj = new GridlessBuilder({
    wrapper: '.is-wrapper', 
    ...
    uploadImageHandler: 'uploadimage.php',
    uploadVideoHandler: 'uploadvideo.php',
    imageSelect: 'uploads.php?type=image',
    videoSelect: 'uploads.php?type=video'
});

When you click the select image or video button, the file viewer (uploads.php) is opened. You can select an image or video to insert into your page.

Step 6: Separating Draft & Published Page

Step 8: Adding Icons, Slider & Optional Animation Script

About | Privacy | Delivery & Return