text-here

tylercrady.com

Personal Project - Oct 2018

Overview

Tylercrady.com is my own, custom, ever-evolving CMS.

From pagination, to related and recent content feeds, to data filtering, to administration tools, all of it is custom coded. tylercrady.com is my own custom CMS.

I used bootstrap, jquery, and LESS to build all the tools that manage the content on my site. These tools include:

  • A blog
  • A flexible slider builder
  • A content block builder
  • A gallery and image editing tool
  • A users creation tool with permissions settings for each content type
  • A basic image library which other tools leverage.

Continue down the page to take a look at the various tools I built and use for my website.

Show More

Technologies

Blog

The blog tool is just a standard blog, no comments. In addition to writing text, you can pick between 3 different types of media to attach to a post: image, slider, or Youtube video. The backend blog listing page has several filters and pagination. Each post can be attributed to a category.

Slider Builder

My slider builder has 3 main sections: slider media, slider settings, and the slider live preview.

Media

Each slide can hold an image or a Youtube video. Each image can be aligned top, center, or bottom and have a caption. The slides can be arranged using drag n' drop.

Slider Settings:

  • Filter: grayscale or sepia
  • Gradient: black or white
  • Caption styling and alignment
  • Show arrows: on/off
  • Show bullets: on/off
  • Transition effect: slide or fade
  • Transition duration
  • Image display: contain the images, or fill the slide, or leave the images original sizes.

Live Preview

Almost all of the settings can be seen in real time in the slider preview.

Gallery Tool

The gallery tool was one of the main reasons I started building this site. I wanted to be able to easily create and manage images galleries to store images and to share them. I can upload 20 images at a time to a new or existing gallery. My script will clone and resize any excessively large images and discard the original. Once the gallery is created, there are many settings for each image. I can rotate them, hide them from displaying on the front end, make it the gallery cover image, drag and drop to arrange them, add a caption, or delete them.
123

Content Blocks

My content block systems works by selecting a template, populating it with title, text, an uploaded image, an image chosen from the image library, or a slider. Blocks can be collapsed after completion, and rearranged using drag n' drop.

Currently I have 6 templates. Additional templates can be added by simply created the new-layout.php file in the blocks directory and an adding the 'add block' button to the 'add blocks' template.

All blocks can be rearranged with drag n' drop and expanded/collapsed.

Media Options for a 50-50 template

The image is displayed and all slider markup is pulled into the preview.

123