Skip to content

Added option to add thumbnail #13

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.

Sign up for GitHub

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added option to add thumbnail #13

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
25e196b
Added option to add thumbnail
Ovi May 16, 2019
d339b1b
Updated package.json *v0.1.6*
Ovi May 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 14 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -13,8 +13,8 @@ Below you will find some information on how to perform common tasks.<br>
- [License](#license)


## What's new `v0.1.5`
* Fixed key warning.
## What's new `v0.1.6`
* Added option to provide thumbnail.


## Demo
@@ -38,19 +38,27 @@ yarn add react-fb-image-grid

## Basic Usage

```
```jsx
import FbImageLibrary from 'react-fb-image-grid'

<FbImageLibrary images={[]}/>
<FbImageLibrary images={['img_01', 'img_02', '...']}/>
```
or
```jsx
import FbImageLibrary from 'react-fb-image-grid'

<FbImageLibrary images={[
{url: 'img_01', thumbnail: 'thumb_01'},
{url: '......', thumbnail: '........'},
]}/>
```

## Props

Props | Type | Default | Example
:--- | :---: | :---: | :---
images | Array (String) | **required** | `{['https://some-url.com/image.jpg', importedImage]}` `//Local image should be imported first`
countFrom | Number | 5 | `{2}` `//Should be from 1 to 5`
images | **Array (String)** <br> OR <br> **Array (Object)** | **required** | `{['imgURL', 'imgURL', '...']}` <br> OR <br> `{[ {url: 'imgURL, thumbnail: 'thumbnailURL'}, {url, '...', thumbnail: '...'} ]}`
countFrom | Number | 5 | `{2}` - *Should be between 1 to 5*
hideOverlay | Boolean | false | `{true}`
renderOverlay | Function | `() => 'Preview Image'` | `{() => <button>Show Image</button>}`
overlayBackgroundColor | String | `#222222` | `'green'` or `'#000000'` or `'rgb(255, 26, 26)'`
41 changes: 29 additions & 12 deletions demo/src/index.js
View file
Original file line number Diff line number Diff line change
@@ -3,20 +3,37 @@ import {render} from 'react-dom'
import '../../src/css/style.css';
import FbImageLibrary from '../../src'

const images = ['https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350',
'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg',
'https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg',
'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg',
'https://images.pexels.com/photos/257840/pexels-photo-257840.jpeg?auto=compress&cs=tinysrgb&h=350',
"https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350",
"https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg"]
const images = [
'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350',
'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg',
'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350',
'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg',
'https://images.pexels.com/photos/257840/pexels-photo-257840.jpeg?auto=compress&cs=tinysrgb&h=350',
'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350',
'https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000'
]

const imgs = [
{
url: 'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg',
thumbnail: 'https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000'
},
{
url: 'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg'
},
{
url: 'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg'
}
]

class Demo extends Component {
render() {
return <div>
<FbImageLibrary images={images}/>
</div>
render() {
return (
<div>
{/* images can be 'images' or 'imgs' */}
<FbImageLibrary images={images} />
</div>)
}
}

render(<Demo/>, document.querySelector('#demo'))
render(<Demo />, document.querySelector('#demo'))
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-fb-image-grid",
"version": "0.1.5",
"version": "0.1.6",
"description": "A beautifully featured image grid library for React which represents the images just like the facebook grid images with the count for extra as well",
"main": "lib/index.js",
"module": "es/index.js",
73 changes: 53 additions & 20 deletions src/components/Images.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import React, { Component } from 'react';
import { Image, Grid, Row, Col } from 'react-bootstrap';
import { Grid, Row, Col } from 'react-bootstrap';
import Modal from './Modal'
import PropTypes from 'prop-types';

class Images extends Component {
static defaultProps = {
images: [],
hideOverlay: false,
renderOverlay: () => 'Preview Image',
overlayBackgroundColor: '#222222',
@@ -19,7 +18,9 @@ class Images extends Component {
this.state = {
modal: false,
countFrom: props.countFrom > 0 && props.countFrom < 5 ? props.countFrom : 5,
conditionalRender: false
conditionalRender: false,
imageUrls: [],
thumbnails: [],
};

this.openModal = this.openModal.bind(this);
@@ -30,28 +31,57 @@ class Images extends Component {
}
}

componentDidMount() {
const {images} = this.props;
if(!images.length) return;

const imageUrls = [];
const thumbnails = [];

images.forEach(img => {
if(this.pureTypeOf(img) === 'object') {
imageUrls.push(img.url);
thumbnails.push(img.thumbnail || img.url);
} else {
imageUrls.push(img);
thumbnails.push(img);
}

this.setState({ imageUrls, thumbnails })
})
}


openModal(index) {
const {onClickEach, images} = this.props;
const {onClickEach} = this.props;
const {imageUrls} = this.state;

if(onClickEach) {
return onClickEach({src: images[index], index})
return onClickEach({src: imageUrls[index], index})
}

this.setState({modal: true, url: images[index], index})
this.setState({modal: true, url: imageUrls[index], index})
}

onClose() {
this.setState({modal: false})
}

pureTypeOf = obj => {
return Object.prototype.toString
.call(obj)
.slice(8, -1)
.toLowerCase();
};

renderOne() {
const {images} = this.props;
const {countFrom} = this.state;
const {countFrom, thumbnails} = this.state;
const overlay = images.length > countFrom && countFrom == 1 ? this.renderCountOverlay(true) : this.renderOverlay();

return <Grid>
<Row>
<Col xs={12} md={12} className={`border height-one background`} onClick={this.openModal.bind(this, 0)} style={{background: `url(${images[0]})`}}>
<Col xs={12} md={12} className={`border height-one background`} onClick={this.openModal.bind(this, 0)} style={{background: `url(${thumbnails[0]})`}}>
{overlay}
</Col>
</Row>
@@ -60,16 +90,16 @@ class Images extends Component {

renderTwo() {
const {images} = this.props;
const {countFrom} = this.state;
const {countFrom, thumbnails} = this.state;
const overlay = images.length > countFrom && [2, 3].includes(+countFrom) ? this.renderCountOverlay(true) : this.renderOverlay();
const conditionalRender = [3, 4].includes(images.length) || images.length > +countFrom && [3, 4].includes(+countFrom);

return <Grid>
<Row>
<Col xs={6} md={6} className="border height-two background" onClick={this.openModal.bind(this, conditionalRender ? 1 : 0)} style={{background: `url(${conditionalRender ? images[1] : images[0]})`}}>
<Col xs={6} md={6} className="border height-two background" onClick={this.openModal.bind(this, conditionalRender ? 1 : 0)} style={{background: `url(${conditionalRender ? thumbnails[1] : thumbnails[0]})`}}>
{this.renderOverlay()}
</Col>
<Col xs={6} md={6} className="border height-two background" onClick={this.openModal.bind(this, conditionalRender ? 2 : 1)} style={{background: `url(${conditionalRender ? images[2] : images[1]})`}}>
<Col xs={6} md={6} className="border height-two background" onClick={this.openModal.bind(this, conditionalRender ? 2 : 1)} style={{background: `url(${conditionalRender ? thumbnails[2] : thumbnails[1]})`}}>
{overlay}
</Col>
</Row>
@@ -78,19 +108,19 @@ class Images extends Component {

renderThree(more) {
const {images} = this.props;
const {countFrom} = this.state;
const {countFrom, thumbnails} = this.state;
const overlay = !countFrom || countFrom > 5 || images.length > countFrom && [4, 5].includes(+countFrom) ? this.renderCountOverlay(true) : this.renderOverlay(conditionalRender ? 3 : 4);
const conditionalRender = images.length == 4 || images.length > +countFrom && +countFrom == 4;

return <Grid>
<Row>
<Col xs={6} md={4} className="border height-three background" onClick={this.openModal.bind(this, conditionalRender ? 1 : 2)} style={{background: `url(${conditionalRender ? images[1] : images[2]})`}}>
<Col xs={6} md={4} className="border height-three background" onClick={this.openModal.bind(this, conditionalRender ? 1 : 2)} style={{background: `url(${conditionalRender ? thumbnails[1] : thumbnails[2]})`}}>
{this.renderOverlay(conditionalRender ? 1 : 2)}
</Col>
<Col xs={6} md={4} className="border height-three background" onClick={this.openModal.bind(this, conditionalRender ? 2 : 3)} style={{background: `url(${conditionalRender ? images[2] : images[3]})`}}>
<Col xs={6} md={4} className="border height-three background" onClick={this.openModal.bind(this, conditionalRender ? 2 : 3)} style={{background: `url(${conditionalRender ? thumbnails[2] : thumbnails[3]})`}}>
{this.renderOverlay(conditionalRender ? 2 : 3)}
</Col>
<Col xs={6} md={4} className="border height-three background" onClick={this.openModal.bind(this, conditionalRender ? 3 : 4)} style={{background: `url(${conditionalRender ? images[3] : images[4]})`}}>
<Col xs={6} md={4} className="border height-three background" onClick={this.openModal.bind(this, conditionalRender ? 3 : 4)} style={{background: `url(${conditionalRender ? thumbnails[3] : thumbnails[4]})`}}>
{overlay}
</Col>
</Row>
@@ -106,7 +136,7 @@ class Images extends Component {

return [
<div key={`cover-${id}`} className="cover slide" style={{backgroundColor: overlayBackgroundColor}}></div>,
<div key={`cover-text-${id}`} className="cover-text slide animate-text" style={{fontSize: '100%'}}>
<div key={`cover-text-${id}`} className="cover-text slide animate-text" style={{fontSize: '100%'}}>
{renderOverlay()}
</div>
]
@@ -121,7 +151,7 @@ class Images extends Component {
}

render(){
const {modal, index, countFrom} = this.state;
const {modal, index, countFrom, imageUrls} = this.state;
const {images} = this.props;
const imagesToShow = [...images];

@@ -135,20 +165,23 @@ class Images extends Component {
{imagesToShow.length >= 2 && imagesToShow.length != 4 && this.renderTwo()}
{imagesToShow.length >= 4 && this.renderThree()}

{modal && <Modal onClose={this.onClose} index={index} images={images}/>}
{modal && <Modal onClose={this.onClose} index={index} images={imageUrls} />}
</div>
)
}

}

Images.propTypes = {
images: PropTypes.array.isRequired,
images: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.string),
PropTypes.arrayOf(PropTypes.shape({ url: PropTypes.string.isRequired })),
]).isRequired,
hideOverlay: PropTypes.bool,
renderOverlay: PropTypes.func,
overlayBackgroundColor: PropTypes.string,
onClickEach: PropTypes.func,
countFrom: PropTypes.number,
};

export default Images;
export default Images;