Refactor Gallery: Unified Schema For Images And Animations

by Editorial Team 59 views
Iklan Headers

Hey guys! Let's dive into how we're revamping the gallery to make it smoother, faster, and way more flexible. We're talking about ditching the old, clunky system and bringing in a sleek, unified schema that plays nice with multiple images, animations, and even optional links. Buckle up, because this is gonna be a fun ride!

🛠 Refactor Description

So, what's the big plan? We're refactoring the gallery backend to vibe with the members or newsApi module patterns. Think of it as giving the gallery a modern makeover. All the main goodies are moving straight to the photo_object collection, and we're kicking the photo_version collection to the curb. Why? To create a flatter, more efficient data structure that just makes sense.

🔍 Reason for Refactor

The old setup was like trying to navigate a maze. It relied on a complex relational structure (the photo_version collection), which was a total drag. It added unnecessary overhead and made managing data a headache. By flattening the schema and moving assets directly to the photo_object collection, we're:

  • Boosting API performance: Less database joins mean faster loading times. Who doesn't love that?
  • Making code easier to maintain: Unifying the data fetching pattern with existing members and newsApi modules means less head-scratching and more smooth sailing.
  • Enhancing scalability: A more flexible way to handle extra media assets (multiple images, animations) and external links per object means the gallery can grow and adapt without breaking a sweat.

Basically, we're future-proofing the gallery and making it a whole lot easier to work with. Think of it as going from dial-up to fiber optic!

🛑 Current Code Issues

Alright, let's talk about the stuff we're leaving behind. These old patterns are getting the boot:

  • Inefficient Data Fetching: Remember those secondary queries or deep joins to access the photo_version collection (e.g., preview.* and full.*)? Yeah, those are history. They made readItems configurations way too complicated.

    • Example to be removed: fields: ['*', 'preview.*', 'full.translations.*']

  • Over-engineered Logic: The frontend used to map one image into a "version" object. It was like trying to fit a square peg in a round hole. Now, we're mapping asset IDs directly to URLs, which is much cleaner and more straightforward.

    • Example to be removed: photo.versions?.preview ? [[photo.versions.preview.image]] : []

  • Lack of Content Flexibility: The old structure only supported a single preview and full image. What if you wanted multiple frames, animations, or external project links? Tough luck. But not anymore! We're opening up a whole new world of possibilities within the standard photo_object.

We're basically saying goodbye to the clunky old ways and hello to a streamlined, modern approach.

🛠️ 1. Directus Schema Changes

Here's the lowdown on the changes we're making to the photo_object collection. We're adding these fields directly:

  • image (Image/File, Required) - This is your main preview/static image. The star of the show!
  • image_2 (Image/File, Optional) - Extra image number two!
  • image_3 (Image/File, Optional) - And yet another image, if you're feeling fancy.
  • animation (Video/File, Optional) - Bring your gallery to life with some sweet animations.
  • link (URL/String, Optional) - External reference number one. Link to a project, a website, or whatever floats your boat.
  • link_2 (URL/String, Optional) - Another external reference, because why not?

These changes will give us way more flexibility and control over the content we display in the gallery. No more limitations, just pure creative freedom!

✅ 2. Technical Implementation Details

Alright, let's get down to the nitty-gritty. Here's how we're making all this magic happen.

API & Data Fetching

  • Interface Update: The PhotoObject interface is getting a makeover to reflect the flat structure. All those legacy versions or photo_version types are getting the boot. It's all about keeping things clean and simple.
  • API Service: The galleryApi is being refactored to request fields directly from photo_object. We're also adding try-catch blocks and FetchBaseQueryError to match the error-handling pattern found in membersApi and newsApi. This means better error handling and more stable code.

Logic & Hook Integration

  • Data Mapping: In the useGetDirectusGalleryImages hook, asset IDs are being converted into full URLs using the ${directusBaseUrl}/assets/${id} pattern. This makes it super easy to get the correct image URLs.
  • Link Handling: The linkify hook/utility is being integrated to process link and link_2. This ensures that external URLs are handled safely and consistently. No more dodgy links!
  • Conditional Logic: We're implementing strict checks to make sure optional fields aren't rendered in the UI if the data is null or undefined. No more empty slots or broken images!

UI Rendering

  • Frames Composition: Assets (image, image_2, image_3, and animation) are being bundled into the frames property as a single row array. This makes it easier to manage and display multiple assets.
  • Button Components:
    • The Animation button will only show up if there's an animation URL. No more empty buttons!
    • Link buttons (e.g., "Project" or "More") will only appear if a valid URL is returned after being processed by the linkify logic. Again, no more broken buttons!

We're paying close attention to the details to make sure the UI is clean, intuitive, and user-friendly.

🏁 Acceptance Criteria

To make sure we're on the right track, here's what we need to achieve:

  • [ ] Gallery items support up to 3 images and 1 animation. More content, more fun!
  • [ ] UI does not show empty slots or broken buttons for missing optional data. Clean and professional.
  • [ ] External links are processed via the linkify logic and appear only when data is present. Safe and reliable.
  • [ ] The data fetching pattern is unified with the members and newsApi modules. Consistent and maintainable.
  • [ ] Redundant relational fetches for photo_version are removed. Streamlined and efficient.

These criteria will help us ensure that the refactor is a success and that the gallery is better than ever.

📋 Additional Information

Hey, when you're jumping into Directus, give a shout to the team veterans to hook you up with an account if you're not already in the club.

🔗 Directus Documentation

📷 Preview:

Image