Fix issue #61: Ensure course images are square to avoid scaling issues

[Satyamkumarnavneet]

This pull request resolves issue #61 by ensuring that course images are displayed as squares, preventing any scaling issues. The following changes have been made:

1. HTML Template Update:

   • Modified the search.html template to ensure course images are displayed with a square aspect ratio.
   • Added a new div style to maintain this square aspect ratio, improving the visual consistency of the images.

2. In create_test_data.py:

   • Added external_url="https://example.com/default-material" when creating CourseMaterial instances. This ensures that the external_url field, which likely has a NOT NULL constraint, is always populated with a valid URL, preventing potential database errors during test data creation.

3. In models.py:

   • Included "assignment" as a valid choice for the material_type field in the CourseMaterial model. This addition expands the flexibility of course materials, allowing the creation and management of more diverse types of content.

[A1L13N]

Looks great can you please also apply this to the homepage and the detail.HTML page as well as the create a new course page and the image upload currently crops to the rectangle please make the crop function be a square

[Satyamkumarnavneet]

Updated fix the issue and make these changes

1. Model Update (models.py):

   • Updated the help_text for the image field to reflect the new 300x300px square aspect ratio.
   • Adjusted the image processing logic to crop and resize images into a square format (300x300px).

2. Template Update (search.html, index.html, detail.html):

   • Added a wrapper div with specific styles (width: 300px; height: 300px; overflow: hidden) to enforce a consistent square aspect ratio for course images.
   • Updated the image rendering to use object-fit: cover, ensuring the images fill the square area without distortion.

3. Code Refinements:

   • Refined the layout and styling to ensure a consistent and polished visual presentation of course images across various pages.

These changes not only address the original issue of image scaling but also improve the overall appearance of course frames. While the main goal was to ensure that images are uploaded as squares in models.py, I also fixed the course frames' display, which now looks much better than before.

[Satyamkumarnavneet]

Looks great can you please also apply this to the homepage and the detail.HTML page as well as the create a new course page and the image upload currently crops to the rectangle please make the crop function be a square

Thanks for the feedback! Just to clarify, could you please elaborate a bit on what you mean by "create a new course page"? As we already have the "Courses" section in the navigation bar, I want to make sure I understand if you're referring to something specific that needs to be added or updated. Let me know, and I'll proceed with the changes!

[A1L13N]

Looks great can you please also apply this to the homepage and the detail.HTML page as well as the create a new course page and the image upload currently crops to the rectangle please make the crop function be a square

Thanks for the feedback! Just to clarify, could you please elaborate a bit on what you mean by "create a new course page"? As we already have the "Courses" section in the navigation bar, I want to make sure I understand if you're referring to something specific that needs to be added or updated. Let me know, and I'll proceed with the changes!

When a user creates a new course, they upload an image, I'm not sure if we have an image preview there but I think we don't so I think this is complete. Can you please run the pre-commit so the files get formatted and pass the test? Then we can merge! Thank you!

[A1L13N]

please run the pre-commit linting

[A1L13N]

Congratulations on your first merged PR!

[Satyamkumarnavneet]

Congratulations on your first merged PR!

Thank you! Sorry for the delay, I’ve been working on resolving the issue, but it’s still not fixed. It says 'flake8...................................................................Failed.