Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive Image #1212

Merged
merged 6 commits into from
Jun 16, 2020
Merged

Responsive Image #1212

merged 6 commits into from
Jun 16, 2020

Conversation

robertu7
Copy link
Contributor

@robertu7 robertu7 commented Jun 15, 2020

  • Responsive Images support for <UserProfile.Cover>, <Avatar>, <ArticleDetail.Content>, etc.
  • Add <Img> component

related issue: thematters/matters-server#1128

@robertu7 robertu7 changed the title Responsive Image WIP: Responsive Image Jun 15, 2020
@codecov
Copy link

codecov bot commented Jun 15, 2020

Codecov Report

Merging #1212 into develop will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff            @@
##           develop    #1212   +/-   ##
========================================
  Coverage    90.00%   90.00%           
========================================
  Files            1        1           
  Lines           10       10           
  Branches         2        2           
========================================
  Hits             9        9           
  Misses           1        1           

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f49ed94...313c214. Read the comment docs.

@robertu7 robertu7 changed the title WIP: Responsive Image Responsive Image Jun 15, 2020
@robertu7 robertu7 added the ready label Jun 15, 2020
@robertu7
Copy link
Contributor Author

Copy link
Contributor

@guoliu guoliu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🌴

Do we need to wait for image processing to finish, or can we rely on fallback of image source?

const [error, setError] = useState(false)

// Fallback to the raw `url` if manually disable or responsive image is failed to load
if (disabled || error) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

Copy link
Contributor

@devformatters devformatters left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Go. 🌦

media="(min-width: 768px)"
srcSet=${toSizedImageURL({ url: src, size: '1080w', ext: 'webp' })}
onerror="this.srcset='${src}'"
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool. Have not used <source> before.

`
}

$imgs.forEach(($img) => $img.addEventListener('error', onError))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wow.

@robertu7 robertu7 merged commit fd74a40 into develop Jun 16, 2020
@delete-merged-branch delete-merged-branch bot deleted the feature/responsive-image branch June 16, 2020 10:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants