Resource Content Tab | Image Type
- Rustam Negmetov
- Mary DelPiano
This section describes the user interface and workflow for uploading image content within the Resource Content Tab, assuming the language context has already been established.
Figma Link
UI Description
Image Upload
Description: Allows the user to upload the main image file associated with the resource. This is the primary visual content for the resource.
Required: Yes.
Type of Input: File upload.
Validation Criteria: The system accepts common image formats such as JPG, PNG, and GIF. File size limitations apply (for example, a maximum of 10MB) to ensure optimal performance and storage efficiency. The aim is to balance quality and accessibility across various devices and contexts.
Thumbnail Upload
Description: Users can upload a smaller, thumbnail version of the image to represent the resource in summaries and search results. If a thumbnail is not provided, the system will automatically generate one based on the main image.
Required: No.
Type of Input: File upload.
Validation Criteria: While the system accepts common image formats, it's recommended to adhere to specific dimensions and size limits (for example, a maximum of 2MB) for thumbnails. This automated feature ensures each image resource has a visually consistent and optimized representation across the platform.
Alt Text
Description: Users can enter alternative text, a textual description associated with an image on a web page.
Required: No.
Type of Input: Text input.
Validation Criteria: Must contain at least 2 characters and no more than 140 characters.
User Interaction and Validation Notes
Image Upload: A crucial step for adding visual content to the resource, where users must provide an image file that meets the system’s criteria for format and size. This ensures the image can be effectively displayed and stored.
Thumbnail Upload: Offers an optional step for users to provide a custom thumbnail. The automatic generation of a thumbnail from the main image simplifies the process, ensuring all resources have a thumbnail even if the user does not upload one explicitly. Thumbnail images must occupy 100% of the container width and align to the top of the container. If the user uploads a new file for the resource a new thumbnail will be auto-generated to accurately reflect the new resource.
Alt Text Description: It serves several important functions: providing context or description of the image content for visually impaired users who rely on screen readers, offering a textual substitute when images fail to load, and improving search engine optimization (SEO) by allowing search engines to better understand and index the image content.
Workflow Description for Image Type Content
Uploading the Image:
The user uploads the image file via the file upload interface. This action is mandatory to proceed.
Optional Thumbnail Upload:
The user has the option to upload a thumbnail image. If skipped, the system will automatically create a thumbnail from the uploaded image, maintaining the resource’s visual integrity across listings and previews.
Optional Alt Text:
The user has the option to input alternative text for an image. If skipped, there will be no alt text description for the image on the RethinkEd platform.
Validation and Feedback:
The system validates the uploaded images based on the specified criteria. If an upload does not meet the requirements, the user is prompted with feedback to adjust their submission accordingly.
Submission:
Once the image (and optionally, the thumbnail) passes validation, the user submits the content. The system then processes and stores the images, updating the resource content on the server.
Loading Progress Indicator:
Once the user selects an image to upload, a loading progress indicator will display on the page. The user will have the option to cancel the upload by clicking the “X”.
The loading progress indicator replaces the uploader in the section on the page.
Confirmation:
After successful submission, a confirmation message is displayed, and the user can proceed with further actions, knowing the visual content has been successfully managed.
This streamlined process ensures efficient management of image resources, allowing for high-quality visual representation while accommodating system performance and user experience standards.