Directus Extension Assets

screenshot of Directus Extension Assets
vue
directus

Directus extension for resizing images preserving focal_point

Overview

The Directus Assets extension revolutionizes the way images are managed and displayed by introducing smarter image resizing capabilities. This feature, adapted from the Contao CMS, allows users to define and preserve the "important part" of an image during cropping. Whether you're looking to maintain the focus on a subject in a portrait or ensure aesthetic appeal in your gallery, this extension offers the perfect solution for maintain image integrity.

With a user-friendly interface, editors can easily select and adjust the focal point of images, ensuring that content is both visually appealing and dynamic. As a critical tool for anyone working with images in Directus, this extension streamlines the process of resizing, especially in projects requiring consistent display across various platforms.

Features

  • Smart Cropping: Automatically maintains the “important part” of images when cropping, ensuring key visual elements aren't lost.
  • User-Friendly Selection: Easily mark focal points using a simple mouse-dragging method directly on your images.
  • Reset Selection: Quick and hassle-free resetting of focal point selections with a simple double-click.
  • Gallery Support: Perfectly suited for image galleries, where different aspect ratios of portraits can be displayed uniformly.
  • Responsive Design Integration: Define multiple image size presets for different breakpoints and efficiently implement them using the srcset attribute in your HTML.
  • Version Compatibility: Easily switch back to a simpler focal point selection system if needed, with access to a previous version of the extension.
vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

directus
Directus

A website that uses Directus as an open source headless CMS to manage content. This includes features such as a customizable content model, role-based access control, and API-based content delivery to support a wide range of digital experiences.

Recoil

Recoil is a state management library for React that provides an intuitive and flexible API for managing and sharing state across components. It supports a range of features, including derived state, asynchronous updates, and time-travel debugging, and is designed to work well with the React ecosystem and other state management solutions.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.