Cover and Author Profile Images not rendering on Blog and Single Pages

[mariana-caldas]

What do we need to build or fix? Currently, the blog posts' cover images are not being rendered under the blog section, both on the main blog page and individual blog pages in production (Production - Blog | Production - Single Post) and in the staging environment (Staging). Additionally, the author's profile image is not displayed on the individual blog page. This issue requires investigating the root cause and implementing a fix to ensure that cover images appear correctly. We also need to add a placeholder fallback image, available in Figma (Figma file).

Technical details The task involves diagnosing why the blog cover and profile images are not rendering. This may be due to dev.to API version deprecation, as noted in the Forem API Documentation. Relevant API references: dev.to API - Articles. The solution should include loading a placeholder image for any missing cover images.

Approach suggestions

• First, check if the issue stems from API version deprecation or recent structural changes in the dev.to API.
• Investigate if the existing API requests for fetching blog and profile images are correctly retrieving and rendering the data.
• Implement a fallback solution using the placeholder image from Figma if cover images are missing.
• Consider caching or loading mechanisms to ensure images are loaded efficiently across the application.
• Deadline
• Please note that this task needs to be completed within 10 days from assignment.

Acceptance criteria

• Test the section and components on multiple screen sizes using the Inspect tool.
• Verify that the changes to components do not affect other instances where they are used.
• Test the feature across various browsers, including Chrome, Firefox, Edge, and Safari (MAC).
• Ensure no build issues occur when submitting the PR; if there are, run yarn build locally, resolve the issues, and commit changes.
• Update the CHANGELOG.md file to document this fix.

[cherylli]

LOoks like they changed where they host the image server again

we should probably use wildcard, which will cover every subdomains on dev.to

https://nextjs.org/docs/pages/api-reference/components/image

[rifat328]

I am new to this , this might not help :

Explanation

The "Failed to load resource: the server responded with a status of 403 ()" error in your browser means that the server you're trying to access has denied your request.

Here's a breakdown:

HTTP 403 Forbidden: This is a standard HTTP status code indicating that the server understood your request but refuses to authorize it. Reasons for 403 Errors: Lack of Permissions: You might not have the necessary permissions to access the requested resource. This could be due to: Incorrect login credentials: If you need to authenticate to access the resource, you might be using the wrong username or password. Insufficient user role: The server might have different user roles with varying access levels. Your current role might not grant you access to the specific resource. IP address restrictions: The server might be configured to only allow access from specific IP addresses. File or Directory Access Denied: The server might be configured to deny access to certain files or directories, even if you are authenticated. Server Configuration Issues: There might be a misconfiguration on the server that prevents access to the resource, even for authorized users. Security Measures: The server might have security measures in place that block your request, such as a firewall or intrusion detection system. Rate Limiting: The server might be limiting the number of requests you can make within a certain timeframe. Troubleshooting Steps:

Check your login credentials: If you need to log in, ensure you're using the correct username and password. Verify your user role: If applicable, confirm that your user role has the necessary permissions to access the resource. Contact the website administrator: If you believe the error is due to a server configuration issue or access restrictions, contact the website administrator or support team. Check your browser's cache and cookies: Sometimes, outdated cached files or cookies can cause issues. Clear your browser's cache and cookies and try again. Use a different browser: Try accessing the resource using a different web browser to see if the issue is specific to your current browser. Check your network connection: Ensure you have a stable internet connection. Check for any browser extensions: Some browser extensions might interfere with your access to the resource. Try disabling them temporarily and see if it resolves the issue.