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

feat(v2): @docusaurus/plugin-ideal-image #1665

Merged
merged 9 commits into from
Jul 17, 2019

Conversation

endiliey
Copy link
Contributor

@endiliey endiliey commented Jul 16, 2019

Motivation

Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder)

Close #928

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

  • Lazy loading and blurred placeholder
    lazy loading

  • Generate no of responsive images depends on option

generated responsive img

The fork also had passing test case, original test cases are failing

@endiliey endiliey requested a review from yangshun as a code owner July 16, 2019 17:08
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Jul 16, 2019
@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented Jul 16, 2019

Deploy preview for docusaurus-2 ready!

Built with commit 2c2c5c6

https://deploy-preview-1665--docusaurus-2.netlify.com

@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented Jul 16, 2019

Deploy preview for docusaurus-preview ready!

Built with commit 2c2c5c6

https://deploy-preview-1665--docusaurus-preview.netlify.com

@@ -14,14 +14,14 @@ function Image(props) {
{...props}
alt={alt}
className={className}
height={img.src.height}
height={img.src.height || 100}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

in case someone wonders the hardcoded 100 value.

This is just to not throw error in dev because height and weight is a required field for react-ideal-image

see https://github.com/endiliey/responsive-loader#options

Disable processing of images by this loader (useful in development). srcSet and other attributes will still be generated but only for the original size. Note that the width and height attributes will both be set to 100 but the image will retain its original dimensions.

<div class="avatar__intro margin-left--none">
<h4 class="avatar__name">{user.title}</h4>
<small class="avatar__subtitle">
<div className="avatar">
Copy link
Contributor Author

Choose a reason for hiding this comment

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

fix class -> className

@endiliey endiliey merged commit b34ad72 into master Jul 17, 2019
@endiliey endiliey deleted the endiliey/docusaurus-plugin-image branch July 17, 2019 13:53
@wgao19 wgao19 mentioned this pull request Jul 18, 2019
20 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Progressive Image Loading
4 participants