neptunian/react-photo-gallery

React Photo Gallery

React Photo Gallery

• Responsive, accessible, composable, and customizable image gallery component
• Maintains the original aspect ratio of your photos
• Creates a masonry or justified grid
• Supports row or column direction layout
• Provides an image renderer for custom implementation of things like image selection, favorites, captions, etc.
• SSR app compatible

Preview

Row	Column

Installation

yarn add react-photo-gallery

API Documentation

http://neptunian.github.io/react-photo-gallery/

CodeSandbox Demos with Example Use Cases

• Basic Row Layout
• Basic Column Layout
• With Lightbox
• Dynamic Columns Using columns prop
• Selection using custom renderImage
• Sortable with drag and drop

To build some examples locally, git clone and run:

yarn install
yarn start

Then open localhost:8000 in a browser.

Minimal Setup Example

const photos = [
  {
    src: 'http://example.com/example/img1.jpg',
    width: 4,
    height: 3
  },
  {
    src: 'http://example.com/example/img2.jpg',
    width: 1,
    height: 1
  }
];

<Gallery photos={photos} />;

How It Works

Row Layout

This layout uses an algorithm adapted from the Knuth and Plass line breaking algorithm. It uses a graph to calculate the single best layout where each photo to break on is represented by a node and each edge is represented by a row. The cost of the edge is determined by the user provided targetRowHeight vs the row height calculated if it were to break on this node/photo. What you end up with is a layout with rows that are similar in height and photos that are not being stretched or shrunken abnormally as is what happens in a naive implementation. This solves the issue of panoramas shrinking rows or having stragglers or stretched images at the last row, instead creating a justified grid. To make sure it's speedy the graph is being built as the shortest path is being calculated so the entire adjacency list is not calculated ahead of time. You can control how many neighboring nodes that Dijkstra's algorithm will search when it's visiting a node by adjusting the limitNodeSearch property, but it's recommended you use the default algorithm. See documentation for recommendations.

Inspired by this blog article and this Google Photos blog article (under 2. Justified Gallery).

Column Layout

Goes through each column looking for the best place to insert the next photo by finding the shortest column. Not recommended for panorama aspect ratios.

Thanks

Special thanks to Christopher Chedeau for writing about this interesting algorithm and whos code served as a starting off point.

react-photo-gallery's Issues

Getting an error as soon as page loads with the package

As soon as page loads I am getting an error

Uncaught RangeError: Maximum call stack size exceeded
    at RegExp.[Symbol.replace] (native)
    at String.replace (native)
    at Object.escape (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:5532:34)
    at getComponentKey (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:5322:27)
    at traverseAllChildrenImpl (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:5360:35)
    at traverseAllChildren (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:5440:10)
    at flattenChildren (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:19767:5)
    at ReactDOMComponent._reconcilerUpdateChildren (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:17897:28)
    at ReactDOMComponent._updateChildren (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:18005:31)
    at ReactDOMComponent.updateChildren (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:17992:12)
    at ReactDOMComponent._updateDOMChildren (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:15332:12)

As when I try to resize the page ... it goes into infinite loop with following errors
Warning: performUpdateIfNecessary: Unexpected batch number (current 2012, pending 1769)

And it goes on infinitely please help me below is the code

let photoSet=[];
let src = 'https://source.unsplash.com/random/1024x768.jpg';
let img.cdnOriginal = 'https://source.unsplash.com/random/1024x768.jpg';
let srcset = ['https://source.unsplash.com/random/1024x768.jpg 1024w','https://source.unsplash.com/random/1024x768.jpg 768w','https://source.unsplash.com/random/1024x768.jpg 480w'];

        photoSet.push(
        {
          src: src,
          width: 1280,
          height: 960,
          aspectRatio: (Math.random()) + 1.5,
          lightboxImage: {
            src: img.cdnOriginal,
            srcset: srcset,
          },
        });

       <Gallery
            photos= {photoSet}
          />

Please @neptunian have a look

add srcset images to demo

add srcset option to lightbox component images (react-images component)

When used with lightbox, calculated sizes give broken layout

On Windows machines, the scrollbar is 17px wide.

This scrollbar disappears when the Lightbox is opened. Then, a re-render of the Gallery is triggered when the Lightbox is closed. At this time, this._gallery.clientWidth is 17px wider than when first rendered. The computed widths for all pictures is therefore bigger.

However the scrollbar comes back afterwards, which forces the images to go into subsequent rows and break the layout.

I solved this issue by adding the following lines to my CSS:

html {
        overflow-y: scroll;
      }

which causes the scrollbar to be always visible, and therefore the clientWidth of the gallery to be constant.

I notice that in the demo, body has a padding of 17px (width of a scrollbar), is that for this reason?

How could this issue be solved at the component level?

Thanks for your package, it's been really helpful!

Make Gallery Stateless

invariant.js:17 Uncaught Invariant Violation: getNodeFromInstance: Invalid argument.

Fix error when upgrading to React 15.2.1

invariant.js:17 Uncaught Invariant Violation: getNodeFromInstance: Invalid argument.

Seems to be coming from using 'findDomNode' in the Gallery

This could be a bug in 15.2, hold off updating to 15.2
studiointeract/accounts-ui#60

Cols property does't work

Hi there,

First off, thanks for the component. I'm new to it, yet it seems to be a nice solution for one of the tasks.

During first steps experiments, I found out that cols property doesn't work as if it were ignored at all.
After digging down to lib/Gallery.js and render() method I can see why, generated script uses hardcoded rowLimit:

var rowLimit = 1, 
    photoPreviewNodes = [];
if (this.state.containerWidth >= 480) {
  rowLimit = 2;
}
if (this.state.containerWidth >= 1024) {
  rowLimit = 3;
}

but not the value from the property as it should due to the documentation and original script part:

var cols = this.props.cols,
    photoPreviewNodes = [];
if (!this.props.cols){
  cols = 3;
}

My guess that it's an artifact of some previous version and in the Repo is an old lib/Gallery.js which is a main script in the NPM module.

Can something be done with it in next version bump?

Cheers,
Andrew

documentation is not matching real code requirements

documentation is not matching real code requirements

let user pass in 'alt' attr to the gallery img

onLoad componentShouldMount Warning

Not causing any issues that I can see, just wanted to bring it to your attention. When I load my child that contains Photo Gallery, I get this error -

Gallery has a method called shouldComponentUpdate(). shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.

Only started happening when I upgraded to React 16.

Thanks!

Darker lightbox background?

Hi! Just wondering if there might be a way to darken the lightbox background so it's harder to see through? Thanks!

Upgrade peer dependencies react & react-dom to version 16.0.0

Currently, the react-dom peer dependencies are behind the devDependencies -- and all of them are a few versions behind the current stable react-dom release.

from package.json (Note the 15.6.1 and 15.5.0 mismatch):

 "devDependencies":{
   ... 
->  "react": "^15.6.1",
    "react-component-gulp-tasks": "^0.7.7",
->  "react-dom": "^15.6.1",
    "react-images": "~0.5.2",
    "react-measure": "^2.0.2"
  },
  "peerDependencies": {
->  "react": "~15.5.0",
->  "react-dom": "~15.5.0"
  },

Additionally, since the 15.6.1 version, there have been two react-dom & react releases:
15.6.2
16.0.0

I'm currently tracking down a few bugs and am not sure if this is their cause -- but will update when I figure them out!

EDIT: The other bugs were related to separate package management issues on my machine -- I was working with an old version without knowing it. A lot of other packages are behind on the peer dependencies, so this issue is not pressing but is probably worth getting to at some point

Grid is broken in version 5.3.0 on NPM

Issue

Hi Sandra,

I just upgraded from 5.0.2" to ^5.2.0" on NPM and noticed that the grid is now broken.

Here's what it looks like using random images on Unsplash.

After downgrading to "react-photo-gallery": "5.0.2",, the images look back to normal:

Secondarily, the versions on Github don't sync with the versions on NPM making this issue a bit more difficult to bisect/debug.

Info

$ cat node_modules/react-photo-gallery/package.json | grep gitHead

"gitHead": "51613a4ef2da6c5885e9027abc85a9aea0cd1e42",

aspectRatio should be optional?

Perhaps I'm missing the point of aspectRatio, but I cannot see why this field is required. Even better; I don't see why this should be a api property at all.

Isn't the aspectRatio simply width / height? Anything else results in distortion no?

Photos properties

Property	Type	Default	Description
width	number	undefined	Required. Width of the gallery image
height	number	undefined	Required. Height of the gallery image
aspectRatio	number	undefined	Required. Aspect ratio of the gallery image (width / height)

separate out gallery image component

componentWillUnmount isn't in the npm package

Files in lib and dist folders are outdated.

Support Image preloading

React-Images has an option to pass in bool preloadNextImage to support image preloading. Can that be supported by this component?

Preload images

Hi,
I love the small footprint of the gallery.

Have you considered adding a preloader for the next image or two? Thats a must-have for a gallery imo.

Custom filters extending the PHOTO_SET

Is it possible? I would like to create my own filters in the gallery, to display only images according to the user wish.

layout breaks when at certain breakpoints

caused by browser returning the containing element of gallery's width as for example 1200px when its actually 1199.5px in the computed output. since i cannot force it to round down before it is returned to me i subtract one pixel for prevention.

add option to let user pass in custom image component

Compatibility issue with react-images 0.3.3

react-photo-gallery 4.2.4 depends on react-images "^0.3.2".
Since react-images has released 0.3.3, react-photo-gallery will use react-images 0.3.3 and give an error.

ReactTransitionGroup: ref is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

Either of the followings will resolve the issue.

1. Explicitly use react-images 0.3.2, not 0.3.3.
2. Update react-images to 0.4.x and update react & react-dom to 15.x.

Unknown props `photos`

I am getting this error in console

proxyConsole.js:56 Warning: Unknown prop photos on <gallery> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop in gallery (at gallery.jsx:7) in Gallery (created by RouterContext) in RouterContext (created by Router) in Router (at routes.js:8)

add routing to demo

add routing to demo example so users can see how that works. maybe have a demo with and without.

Video Support?

So far the best thought out media gallery for react that I could find. Any plans on supporting videos?

Option for custom number of images per row

See issue #32

Loading... does not work in IE11

Please note that loading does not work in IE11.

Make lightbox functionality optional

Attribution

Looked briefly at the codebases of your project and this one:

https://github.com/benhowell/react-grid-gallery

It would seem perhaps your code and efforts have been unattributed / unacknowledged by this newer fork?

"srcset" and "sizes" are marked as optional, but cause "undefined" error when missing

This error seems to have been introduced in one of the recent commits.

My code has not changed, but has started to fail with the following error:

Cannot read property 'join' of undefined
    at Gallery.js:135
    at Array.map (<anonymous>)
    at Gallery.render (Gallery.js:126)

Line 135 of Gallery (runtime, after compile):
_react2['default'].createElement('img', { src: photo.src, srcSet: photo.srcset.join(), sizes: photo.sizes.join(), style: { display: 'block', border: 0 }, height: photo.height, width: photo.width, alt: photo.alt })

I wasn't able to find the issue in the code (it might be a srcset vs srcSet thing), but was impressed by how clean your code is!

A quick patch is to pass srcset=[] sizes=[] as props to the gallery component

Thumbnails image size is uncontrolled

The thumbnail images size is recalculated, so I could not manage the size of thumbnail images, in this way the size is uncontrolled by json images objects photo set. Please advice. Here is your code for recalculation, why don't you add parameter, which exclude calculation of image size by aspect ratio?
...
for (var i=0;i<this.props.photos.length;i+=rowLimit){
var rowItems = [];
// loop thru each set of rowLimit num
// eg. if rowLimit is 3 it will loop thru 0,1,2, then 3,4,5 to perform calculations for the particular set
var aspectRatio=0,
totalAr=0,
commonHeight = 0;
for (var j=i; j<i+rowLimit; j++){
if (j == this.props.photos.length){
break;
}
totalAr += this.props.photos[j].aspectRatio;
}
commonHeight = contWidth / totalAr;
// run thru the same set of items again to give the common height
for (var k=i; k<i+rowLimit; k++){
if (k == this.props.photos.length){
break;
}
...
#######################

Display images in smaller sizes

Hi,
I want to display images in a smaller size, in order to have more images per line.
I've tried to do so passing by props small photos with small width and height values, but nothing changes, there are always 3 photos per line.

Could you please give me a clue ?

Ane

Can't resolve 'react-measure'

Just updated to 6.0.0, getting this error from webpack:

Warning: Module not found: Error: Can't resolve 'react-measure' in '/dist/node_modules/react-photo-gallery/lib'

Aborted due to warnings.

Image alignment issue

Hi,

I'm not seeing this issue on your gallery, but it's definitely showing up consistently on my side. See below

On the last row, the image doesn't appear to be fill 100% of the container width. In my particular case, the containerWidth is 1280, but the inline style width is being set to 1266.

srcset and sizes are no longer optional

In 6.5.3, the properties srcset and sizes are no longer optional, if they are not set, you get an undefined error.

Publish 4.2.15 to clear peerDependencies warning

Current NPM version is 4.2.14 and throws warnings for react & react-dom packages for not meeting the following: peerDependencies: "~15.3.0"

Looks like you have it fixed in master. Please publish a new version.

It may also be helpful to list that as ^15.4.0 so anything above 15.4 works

examples - trigger loadMorePhotos on Opened Lightbox

examples folder:
more photos should be loaded, if lightbox is opened and the photos array is exhausted. loadMorePhotos should be triggered w/o any scrolling.

Annotorious library

Is there any way to add the annotorious library https://github.com/annotorious/annotorious, or alternative methods to enable annotating of images while the lightbox is open?

svg color fill

Hey, anybody else having an issue with the close and arrow buttons being grey instead of white? I've tried looking into what could be causing it but i can't figure it out...

How to add CSS properties with img

I wanted to add CSS property like mix-blend-mode : darken but there is no prop to add css feature to img

Can you guide me how to add css property to images

How to make rows aligned

Hi, I'm having a problem with using this component. I basically used the same code as the example just to see if I can get a basic gallery to show but this is what happens:
screenshot

Now the thing is , I don't have a sourcset for each image and I assume that's the problem. What I need to know is , what exactly do these images need to have in terms of dimensions in order to get them to line up properly like in your demo?

Add ability to make cols vary

Some rows having 2 images, others such as a panorama spanning the entire row (1 col); user defined.

Routing support?

Hi @neptunian! Thank you for the component!

Do you have thoughts on the component allowing for router support - to have it update the url as one opens the lightbox and moves from one image to another?

I noticed you are also the maintainer of react-images now. Would that be a more appropriate library to build this feature on?

Thank you!

custom intagration

Hi. How to set gallery if dimensions is unknown or each picture scr is called 'id' for example?

Remove 'resize' event listener when component unmounts.

I'm using the photo gallery with react router and when I switch from one gallery to the next (swapping out the entire photoset) and then resize the browser I get this error, Uncaught Invariant Violation: findDOMNode was called on an unmounted component. The window still seems to be listening for changes on the Gallery that has been removed.

Adding this seems to fix it pretty easily:

componentWillUnmount(){
    window.removeEventListener('resize', this.handleResize, false);
}

Thanks, this is great!

image layout not set until after resizing the page

On the demo GitHub page the layout doesn't properly tile itself until after I resize the page.

<a> class name set to image index

Gallery.js contains <a href="#" className={k} onClick={(e) => this.props.onClickPhoto(k, e)}>. This leads to the following HTML (from the example page):

<a href="#" class="1">...</a>

I was wondering if the numeric class name is intended or a side effect of something different.

excuse me, but can you resolve this problem?

Bug: Intermittent image quality degradation

Hi 👋 ,

Thanks for building this component - it's super helpful!

Steps to Reproduce

• Create a photoset that includes ~8 images from of a common aspect ratio mixed between portrait and landscape modes, include a srcset per image.
• Pass the photoset to the gallery and render it.

Expected Results
All images should all display clearly with the original aspect ratio preserved at varying viewport widths.

Actual Results
About half the time, the last or second to last image displays blurry on a full width view port (1920x1080). The lightbox image quality always looks good.

If I figure it out why this is happening, I'll submit a PR 😃 .

Thanks,

Michael

add onClickPhoto callback option

let the user pass in custom callback method when clicking on gallery photo

Implement srcset and sizes attribute for gallery images

Reference: #8