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
Collaborator

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 Jul 16, 2019

@docusaurus-bot

This comment has been minimized.

Copy link
Collaborator

commented Jul 16, 2019

Deploy preview for docusaurus-2 ready!

Built with commit 2c2c5c6

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

@docusaurus-bot

This comment has been minimized.

Copy link
Collaborator

commented Jul 16, 2019

Deploy preview for docusaurus-preview ready!

Built with commit 2c2c5c6

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

endiliey added some commits Jul 17, 2019

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

This comment has been minimized.

Copy link
@endiliey

endiliey Jul 17, 2019

Author Collaborator

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">

This comment has been minimized.

Copy link
@endiliey

endiliey Jul 17, 2019

Author Collaborator

fix class -> className

endiliey added some commits Jul 17, 2019

@endiliey endiliey merged commit b34ad72 into master Jul 17, 2019

4 checks passed

ci/circleci: lint-prettier Your tests passed on CircleCI!
Details
ci/circleci: tests Your tests passed on CircleCI!
Details
deploy/netlify Deploy preview ready!
Details
netlify/docusaurus-2/deploy-preview Deploy preview ready!
Details

@endiliey endiliey deleted the endiliey/docusaurus-plugin-image branch Jul 17, 2019

@wgao19 wgao19 referenced this pull request Jul 18, 2019
12 of 19 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.