Building a custom image management system – Micro CMS

The task is to build a content management system that has 3 main components.

  1. The ability to create and manage a user account
  2. The ability to upload images of a vehicle (3 auto generated sizes)
  3. The ability to manage uploads

In order to accomplish this I will need to create a gallery table, image resizer script, folder structure and insert scripts. Submitted user info will be captured by a form from the main forms table.

User level access will be granted from main users table. There is a dashboard to manage user info, submitted images and stauts of submissions. Here will also keep any onsite communications regarding the submission.

Admin dashboard to give overall management of every submission. Ability to send direct message to users, approve usage (including used locations) and edit submission details.

 

I will be using my custom cms starter scripts and setup for this project. The theme will be built on the bootstrap framework using plain js and jquery. The user portion will be simple and intuitive with minimal screens. I will be using datatables and a custom table download script for the administrators dashboards.

jQuery Filters

Include the latest version of jQuery for this to work.

Filterable List

Type something in the input field to search the list for specific items:

  • First item
  • Second item
  • Third item
  • Fourth


<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>

Example explained: We use jQuery to loop through each table rows to check if there are any text values that matches the value of the input field. The toggle() method hides the row (display:none) that does not match the search. We use the toLowerCase() DOM method to convert the text to lower case, which makes the search case insensitive (allows “john”, “John”, and even “JOHN” on search).


Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!