Update News Card and Single NewsPage Rendering Logic

[Rutjake]

✨ Enhancement Description

The primary goal of this issue is to refactor the rendering logic for the News Card component and the Single News Page to prevent rendering an image element when the associated news article does not have a featured image.

Currently, a hotfix is in place where an empty or transparent PNG (defaultImage) is used as a placeholder image for articles missing a featured image. This approach is sub-optimal and needs to be replaced with proper conditional rendering.

---

🌟 Benefits of the Enhancement

• Performance Improvement: The pages will load and render faster by avoiding unnecessary image requests and element rendering when no image is present.
• Code Quality: Eliminates the need for a brittle hotfix (defaultImage), leading to cleaner, more maintainable code.
• User Experience: Ensures a consistent and correct display, preventing unnecessary image placeholder space when an image is truly missing.

---

🛠️ Proposed Implementation

• Technical Details: The rendering logic (both on the fetch/data side and the component side) must be fixed to conditionally render the image element based on whether the article data contains a featured image URL. The layout of the news card/page must remain stable even when the image element is skipped, ensuring content flow is not broken.

• Implementation Plan:

1. Test Data Setup: Create a test news article in Directus without a featured image (or use an existing one if available) to validate the new logic. (The issue author may need to assist with this step).

   • (Crucial Note: DO NOT modify existing production data unless you are certain of the consequences, as most of the current data is live/production data. If unsure, create a new test entry or consult the issue author for assistance.)

2. Logic Enhancement: Update the data fetching and component rendering logic to gracefully handle articles with a missing image property.

3. Thorough Testing: Verify the updated logic works correctly on both the News Card and the Single News Page:

   • Articles with an image render the image.
   • Articles without an image do not render the image element, but the surrounding layout remains intact.

4. Cleanup: Once validated, remove the transparent/empty defaultImage from from Directus configuration where it is used as a fallback.

---

📎 Additional Information

• Layout Constraint: It is crucial that the visual layout on both the News Card (on the list view/news page) and the Single News Page is preserved when the image is not rendered. The current transparent image workaround keeps the space reserved; the new logic must achieve a structurally sound layout without the image element itself.

• Visual Examples (Current Behavior with Hotfix):

  • News Card with Transparent Image Placeholder: Shows how the current hotfix renders an article without an image (using the transparent placeholder) on the card view, maintaining the layout structure.
  • Single News Page with Transparent Image Placeholder: Shows how the current hotfix renders an article without an image (using the transparent placeholder) on the single page view.

📷 Preview: