Appearance

Projects Module ​

The Projects module allows you to create and manage project portfolios, showcase your work, and display projects on the frontend. This guide covers all project management features including categories, galleries, and portfolio display.

Table of Contents ​

  1. Overview
  2. Accessing Projects
  3. Creating a Project
  4. Project Categories
  5. Project Gallery
  6. Managing Projects
  7. Frontend Portfolio Display
  8. Best Practices

Overview ​

Features ​

  • ✅ Create and manage projects
  • ✅ Project categories
  • ✅ Project galleries (multiple images)
  • ✅ Project status management
  • ✅ Featured projects
  • ✅ SEO settings
  • ✅ Frontend portfolio display
  • ✅ Category filtering
  • ✅ Project detail pages

Admin Routes ​

  • Project List: /admin/projects
  • Create Project: /admin/projects/create
  • Edit Project: /admin/projects/{id}/edit
  • Project Categories: /admin/project-categories

Frontend Routes ​

  • Portfolio Page: /portfolio
  • Portfolio Item: /portfolio/{slug}
  • Category Filter: /portfolio/category/{category}

Accessing Projects ​

From Admin Panel ​

  1. Log in to admin panel
  2. Navigate to Projects → Projects
  3. Or go directly to: /admin/projects

Permissions Required ​

  • View Projects: view projects permission
  • Create Projects: create projects permission
  • Edit Projects: edit projects permission
  • Delete Projects: delete projects permission
  • Manage Projects: manage projects permission

Creating a Project ​

Step 1: Access Create Page ​

  1. Go to Projects → Create New Project
  2. Or navigate to: /admin/projects/create

Step 2: Basic Information ​

Project Title ​

  • Name of the project
  • Required field
  • Make it descriptive
  • Example: E-Commerce Website Redesign

Slug ​

  • Auto-generated from title
  • Can be edited manually
  • Must be unique
  • Used in project URL
  • Example: ecommerce-website-redesign

Short Description ​

  • Brief project summary
  • Shown in project listings
  • Recommended: 100-200 characters
  • Example: Complete redesign of e-commerce platform with modern UI/UX

Step 3: Project Details ​

Full Description ​

Use rich text editor for detailed project description:

Include:

  • Project Overview: What the project is about
  • Objectives: Goals and requirements
  • Challenges: Problems solved
  • Solution: Approach and methodology
  • Technologies Used: Tools, frameworks, languages
  • Results: Outcomes and achievements
  • Testimonials: Client feedback (if applicable)

Project Information ​

Client Name:

  • Client or company name
  • Optional field
  • Example: ABC Corporation

Project Date:

  • Completion date
  • Or project period
  • Used for sorting

Project URL:

  • Live project link
  • Optional field
  • Opens in new tab
  • Example: https://example.com

Project Status:

  • Completed: Finished project
  • In Progress: Ongoing project
  • On Hold: Temporarily paused
  • Cancelled: Project cancelled

Step 4: Project Media ​

  1. Click Set Featured Image
  2. Upload or select image
  3. Recommended size: 1200x675px
  4. Used in:
    • Project listings
    • Project detail page
    • Social sharing
  1. Click Add to Gallery
  2. Upload multiple images
  3. Showcase project work
  4. Screenshots, mockups, etc.
  5. Reorder by dragging
  6. Add captions (optional)

Gallery Best Practices:

  • Use high-quality images
  • Show different aspects
  • Include before/after (if applicable)
  • Add descriptive captions

Step 5: Category Assignment ​

Select Category ​

  1. Choose existing category
  2. Or create new category
  3. Can assign to multiple categories
  4. First category is primary

Common Categories:

  • Web Design
  • Web Development
  • Mobile App
  • Branding
  • UI/UX Design
  • E-Commerce

Step 6: Additional Settings ​

Status ​

  • Published: Visible on website
  • Draft: Saved but not published
  • Archived: Hidden from display
  • Toggle: Mark as featured
  • Featured projects highlighted
  • Shown prominently
  • Use for best work

Step 7: SEO Settings ​

Meta Information ​

  • Meta Title: Search engine title
  • Meta Description: Search result description
  • Keywords: Relevant keywords

Step 8: Save Project ​

  • Save Draft: Save without publishing
  • Publish: Make project live
  • Toggle Status: Quick status change
  • Toggle Featured: Quick featured toggle

Project Categories ​

Creating Categories ​

  1. Go to Projects → Categories
  2. Click Create New Category
  3. Enter:
    • Name: Category name
    • Slug: URL-friendly version
    • Description: Category description (optional)
    • Image: Category image (optional)
  4. Click Save

Managing Categories ​

  • Edit: Modify category details
  • Delete: Remove category (projects not deleted)
  • View Projects: See all projects in category

  1. Upload Images:

    • Click Add to Gallery
    • Select multiple images
    • Upload files
    • Images appear in gallery

  2. Image Details:

    • Caption: Image description
    • Alt Text: Accessibility text
    • Order: Display order

  3. Reordering:

    • Drag and drop images
    • Change display order
    • First image is featured
  • Edit: Modify image details
  • Delete: Remove from gallery
  • Set as Featured: Make primary image
  • Reorder: Drag to new position

Managing Projects ​

Project List View ​

Access at: /admin/projects

List Features ​

Search:

  • Search by title
  • Search by description
  • Search by client name
  • Real-time results

Filters:

  • Category: Filter by category
  • Status: Published/Draft/Archived
  • Featured: Featured/Not Featured
  • Project Status: Completed/In Progress/etc.

Sorting:

  • By Title (A-Z, Z-A)
  • By Date (Newest/Oldest)
  • By Category
  • By Status

Displayed Information ​

  • Project Title: Project name
  • Category: Assigned category
  • Status: Published/Draft
  • Featured: Featured badge
  • Date: Project date
  • Client: Client name (if set)

Editing Projects ​

  1. Click Edit on project
  2. Make changes
  3. Click Update
  4. Changes saved

Deleting Projects ​

  1. Click Delete on project
  2. Confirm deletion
  3. Warning: Cannot be undone
  4. Project removed
  5. Gallery images deleted

Bulk Operations ​

Bulk Delete ​

  1. Select multiple projects
  2. Click Bulk Actions → Delete
  3. Confirm deletion
  4. All selected projects deleted

Frontend Portfolio Display ​

Portfolio Page ​

URL: /portfolio

Features:

  • All published projects
  • Category filtering
  • Search functionality
  • Project grid/list view
  • Project cards showing:
    • Featured image
    • Project title
    • Short description
    • Category
    • View project button

Portfolio Item Page ​

URL: /portfolio/{slug}

Features:

  • Full project information
  • Project gallery (lightbox)
  • Project details
  • Technologies used
  • Client information
  • Project URL (if set)
  • Related projects
  • Social sharing

Category Filtering ​

URL: /portfolio/category/{category}

Features:

  • Projects in specific category
  • Category name displayed
  • All portfolio features available
  • Filtered results

Best Practices ​

Project Creation ​

  1. Compelling Content:

    • Tell the project story
    • Show problem and solution
    • Highlight achievements
    • Include metrics/results

  2. Visual Quality:

    • High-quality images
    • Professional screenshots
    • Consistent style
    • Showcase best work

  3. Complete Information:

    • Fill all relevant fields
    • Add detailed descriptions
    • Include technologies
    • Add client testimonials

Portfolio Presentation ​

  1. Featured Projects:

    • Showcase best work
    • Update regularly
    • Highlight achievements
    • Show variety

  2. Organization:

    • Use categories effectively
    • Keep descriptions updated
    • Maintain gallery quality
    • Regular updates

  3. SEO Optimization:

    • Use descriptive titles
    • Add meta descriptions
    • Include relevant keywords
    • Optimize images

Troubleshooting ​

Project Not Displaying ​

Solutions:

  1. Check status (must be Published)
  2. Verify category is published
  3. Clear cache
  4. Check frontend settings

Images Not Uploading ​

Solutions:

  1. Check file size limits
  2. Verify file formats (JPG, PNG, etc.)
  3. Check storage permissions
  4. Review error messages

Solutions:

  1. Verify images uploaded
  2. Check image permissions
  3. Clear cache
  4. Verify frontend template

Last Updated: [Date will be updated during final review]

Released under the MIT License.

Copyright © 2024 OmniSuite CMS