docs(example): Add more detail about focalPoint and scale with image …

…preview
pitipatdop · Feb 21, 2017 · 4aa1a3a · 4aa1a3a
1 parent b1c3da3
commit 4aa1a3a
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -13,14 +13,16 @@ all normal `<img />` props can be used
   - `cover`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
   - `contain`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
   - `stretch`: Scale width and height independently, This may change the aspect ratio of the src.
-- `focalPoint`: default=`.5 .5` (work if resizeMode = 'cover')
+- `focalPoint`: default=`50% 50%` (work if resizeMode = 'cover')
   Decides origin of the where to focus on the image,
   - `left`: Keep left most part of the image.
   - `right`: Keep right most part of the image.
   - `top`: Keep top most part of the image.
   - `bottom`: Keep bottom most part of the image.
   - `{x} {y}`: (eg. `focalPoint=".75 .5"` or `focalPoint="75% 50%"`) focus on the point `x%` from the left and `y%` from the top.
+![img](http://i.imgur.com/XY3jVPX.png)
 - `scale`: (work if resizeMode = 'cover') if provided, the image will scale from container width. (Not image original width)
+  - scale = 1, the image will cover the whole area perfectly
 
 Note: If you do not provide resizeMode, `<BetterImg />` will just render normal `<img />`
 
@@ -47,7 +49,7 @@ render() {
         src="/img/puppy.jpg"
         height={600}
         resizeMode="cover"
-        focalPoint=".75 .5"
+        focalPoint="75% 50%"
       />
     </div>
   )

diff --git a/better-img-0.0.0-development.tgz b/better-img-0.0.0-development.tgz
diff --git a/dev/containers/App.js b/dev/containers/App.js
@@ -1,29 +1,151 @@
+
+
 import React, { Component } from 'react';
 // import BetterImg from '../../dist';
 import BetterImg from '../../src';
 
 export default class App extends Component {
+
   render() {
     return (
-      <div>
+      <div className="container">
         <h1>resizeMode: Contain</h1>
         <BetterImg
           src="/img/puppy.jpg"
           height={600}
           resizeMode="contain"
         />
+        <hr />
         <h1>resizeMode: Cover</h1>
+        <pre>
+          &lt;BetterImg scale={1} focalPoint="50% 50%"/&gt;
+        </pre>
         <BetterImg
           src="/img/puppy.jpg"
           height={600}
           scale={1}
           focalPoint="75% 50%"
           resizeMode="cover"
         />
+        <div className="row">
+          <div className="col-sm-4">
+            <pre>
+              &lt;BetterImg scale={2} focalPoint="0% 0%"/&gt;
+            </pre>
+            <BetterImg
+              src="/img/puppy.jpg"
+              height={200}
+              scale={2}
+              focalPoint="0% 0%"
+              resizeMode="cover"
+            />
+          </div>
+          <div className="col-sm-4">
+            <pre>
+              &lt;BetterImg scale={2} focalPoint="50% 0%"/&gt;
+            </pre>
+            <BetterImg
+              src="/img/puppy.jpg"
+              height={200}
+              scale={2}
+              focalPoint="50% 0%"
+              resizeMode="cover"
+            />
+          </div>
+          <div className="col-sm-4">
+            <pre>
+              &lt;BetterImg scale={2} focalPoint="100% 0%"/&gt;
+            </pre>
+            <BetterImg
+              src="/img/puppy.jpg"
+              height={200}
+              scale={2}
+              focalPoint="100% 0%"
+              resizeMode="cover"
+            />
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-sm-4">
+            <pre>
+              &lt;BetterImg scale={2} focalPoint="0% 50%"/&gt;
+            </pre>
+            <BetterImg
+              src="/img/puppy.jpg"
+              height={200}
+              scale={2}
+              focalPoint="0% 50%"
+              resizeMode="cover"
+            />
+          </div>
+          <div className="col-sm-4">
+            <pre>
+              &lt;BetterImg scale={2} focalPoint="50% 50%"/&gt;
+            </pre>
+            <BetterImg
+              src="/img/puppy.jpg"
+              height={200}
+              scale={2}
+              focalPoint="50% 50%"
+              resizeMode="cover"
+            />
+          </div>
+          <div className="col-sm-4">
+            <pre>
+              &lt;BetterImg scale={2} focalPoint="100% 50%"/&gt;
+            </pre>
+            <BetterImg
+              src="/img/puppy.jpg"
+              height={200}
+              scale={2}
+              focalPoint="100% 50%"
+              resizeMode="cover"
+            />
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-sm-4">
+            <pre>
+              &lt;BetterImg scale={2} focalPoint="0% 100%"/&gt;
+            </pre>
+            <BetterImg
+              src="/img/puppy.jpg"
+              height={200}
+              scale={2}
+              focalPoint="0% 100%"
+              resizeMode="cover"
+            />
+          </div>
+          <div className="col-sm-4">
+            <pre>
+              &lt;BetterImg scale={2} focalPoint="0% 50%"/&gt;
+            </pre>
+            <BetterImg
+              src="/img/puppy.jpg"
+              height={200}
+              scale={2}
+              focalPoint="50% 100%"
+              resizeMode="cover"
+            />
+          </div>
+          <div className="col-sm-4">
+            <pre>
+              &lt;BetterImg scale={2} focalPoint="0% 100%"/&gt;
+            </pre>
+            <BetterImg
+              src="/img/puppy.jpg"
+              height={200}
+              scale={2}
+              focalPoint="100% 100%"
+              resizeMode="cover"
+            />
+          </div>
+        </div>
+        <hr />
         <h1>resizeMode: Stretch</h1>
         <BetterImg
           src="/img/puppy.jpg"
-          height={600}
+          height={400}
           resizeMode="stretch"
         />
       </div>

diff --git a/img/puppy.jpg → dev/img/puppy.jpg b/img/puppy.jpg → dev/img/puppy.jpg
diff --git a/index.html → dev/index.html b/index.html → dev/index.html
@@ -8,6 +8,23 @@
     <meta http-equiv='Expires' content='-1'>
     <meta http-equiv='Pragma' content='no-cache'>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
+    <style type="text/css">
+      pre {
+        display: block;
+        padding: 9.5px;
+        margin: 30px 0 0px;
+        font-size: 13px;
+        line-height: 1.42;
+        color: #333;
+        background:#f5f5f5;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+      .better-img {
+        border: 1px solid black;
+      }
+    </style>
   	<title>BetterImg Demo</title>
   </head>
   <body>

diff --git a/server.js b/server.js
@@ -6,6 +6,8 @@ var config = require('./webpack.config.dev');
 var app = express();
 var compiler = webpack(config);
 
+var DEV_FOLDER = 'dev';
+
 app.use(require('webpack-dev-middleware')(compiler, {
   // noInfo: true,
   publicPath: config.output.publicPath,
@@ -28,9 +30,9 @@ app.use(require('webpack-dev-middleware')(compiler, {
 
 app.use(require('webpack-hot-middleware')(compiler));
 
-app.use('/img', express.static('img'));
+app.use('/img', express.static(DEV_FOLDER + '/img'));
 app.get('*', (req, res) => {
-  res.sendFile(path.join(__dirname, 'index.html'));
+  res.sendFile(path.join(__dirname, DEV_FOLDER + '/index.html'));
 });
 
 app.listen(3000, (err) => {

diff --git a/src/index.js b/src/index.js
@@ -139,10 +139,10 @@ class BetterImg extends Component {
 
     const wrapperStyles = {
       overflow: 'hidden',
+      position: 'relative',
       // If props.width is provide, use it, else no need to control container's width
       width: this.props.width ? this.props.width : undefined,
       height: containerHeight,
-      border: '1px solid black',
     };
 
     // Calculate Scale