add course cover images (500x500)#9849
Conversation
…9467) Import the environment configuration to the course detail component to support environment-specific logic for course cover images.
- Fix undefined SASS variables in courses-add.scss by adding proper namespacing. - Migrate MatDialog from legacy to standard Angular Material import in courses-add.component.ts. - Repair corrupted DashboardTileTitleComponent definition in dashboard-tile.component.ts, fixing syntax errors and missing @input properties. - Update courses-add.component.spec.ts with correct imports to address some test compilation errors. Co-authored-by: PlataformasInformaticas <9954269+PlataformasInformaticas@users.noreply.github.com>
Hi,
This feature has been implementedCourse cover images (500x500 px) are now supported in both:
The cover is displayed correctly in the course views, and a fallback is used when no image is provided. Please find the attached screenshot showing the implementation. Let me know if any adjustments are needed. |
|
Covers are working in create/edit and also in the dashboard. Screenshot attached + another image in a separate comment. Ready for review. 
|
PlataformasInformaticas
deleted the
9467-feature-course-cover-image-support
branch
PlataformasInformaticas
restored the
9467-feature-course-cover-image-support
branch
# Conflicts: # src/app/courses/add-courses/courses-add.component.spec.ts # src/app/courses/add-courses/courses-add.component.ts # src/app/courses/view-courses/courses-view-detail.component.ts # src/app/dashboard/dashboard-tile.component.ts
# Conflicts: # src/app/courses/add-courses/courses-add.component.ts # src/app/dashboard/dashboard-tile.component.html # src/app/dashboard/dashboard-tile.component.ts
…rse cover image text overflow
|
@codex review |
There was a problem hiding this comment.
Pull request overview
Adds initial support for course “cover images” by introducing client-side image normalization utilities and wiring cover display/upload into the courses UI (dashboard tiles + course detail, and add/edit form).
Changes:
- Add shared helpers for CouchDB attachment URL building and browser-side image downscaling/re-encoding (
normalizeImage,scaledDimensions), plus unit tests. - Display course cover images in the dashboard course tiles and in the course detail view.
- Add a cover image upload field to the course add/edit form and persist the cover filename + attachment upload on save.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
src/app/shared/utils.ts |
Adds attachment URL helper and browser-side image normalization utilities. |
src/app/shared/utils.spec.ts |
Adds tests for scaledDimensions and failure fallback behavior for normalizeImage. |
src/app/dashboard/dashboard-tile.scss |
Styles for the cover thumbnail in dashboard course tiles. |
src/app/dashboard/dashboard-tile.component.ts |
Adds cover URL helper + dynamic text line clamping when cover is present. |
src/app/dashboard/dashboard-tile.component.html |
Renders cover thumbnail for “My Courses” tiles. |
src/app/courses/view-courses/courses-view-detail.component.ts |
Adds cover URL computation (local vs parent) and inline cover styling. |
src/app/courses/view-courses/courses-view-detail.component.html |
Renders cover image in the course detail view when present. |
src/app/courses/add-courses/courses-add.scss |
Adds layout styling for the cover upload field. |
src/app/courses/add-courses/courses-add.component.ts |
Integrates file upload state, normalizes image before upload, and saves cover filename/attachment. |
src/app/courses/add-courses/courses-add.component.html |
Adds the cover image upload UI with preview and hint text. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: cae8650312
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0232a6e9a2
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d82d14dc7f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 3ad9218b05
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 538fae1a53
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Feature: add course cover images (500x500)
Overview
Introduce support for adding a square cover image to courses. This image will be used as the visual representation of the course across the app.
What
UI/UX
Behavior
Technical Considerations
Why
Course covers improve:
Acceptance Criteria
Result
Courses have a consistent and visually appealing representation, improving user experience and usability.