DEV Community

loading...

Looking at internal details of a Telescope!

phast184 profile image Thanh Tien Phat Nguyen ・2 min read

Introduction

This week, I'm working on an issue on Telescope. You might ask what Telescope is? Telescope is a tool written by Seneca College students and used to keep track of the process of student weekly by fetching their blog post on multiple sites such as: https://dev.to/, http://medium.com/,...

What is the issue?

In certain posts, pictures are scaled up beyond their natural size. Consequently, the quality of the pictures is reduced and make users uncomfortable. We have to find a way to fix it.
Alt Text

How to fix it?

I realized this problem only happens to those posts fetched from https://www.blogger.com/ because the images' width is not fully displayed in the original post.
Alt Text

And in the css file of the post, I have seen something like:

.telescope-post-content img {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Due to width: 100%, the pictures may get scaled beyond their natural size. To fix it, I have set width: auto and display: block to display width as their natural size. And if the picture's width is not fully displayed, it will be centered

.telescope-post-content img {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  width: auto;
  display: block;
}
Enter fullscreen mode Exit fullscreen mode

Result after change:

Alt Text

Challenges while fixing this issue

  • The only difficulty I encountered while fixing this issue is the amount of time it takes to set up a proper environment to run the app. You can check my PR at here to have a closer look at the changes I made.

Discussion

pic
Editor guide