Merge pull request #54 from alDuncanson/flamelinkGalleries

Flamelink collections & galleries
2018-11-25 17:43:15 -05:00 · 2018-11-25 17:43:15 -05:00 · ce9f5e9c51
parent cde8f9837d 970449fc5f
commit ce9f5e9c51
16 changed files with 620 additions and 81 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -3961,6 +3961,11 @@
      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz",
      "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw=="
    },
+    "detect-passive-events": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/detect-passive-events/-/detect-passive-events-1.0.4.tgz",
+      "integrity": "sha1-btR35uW863kHlzXc01d4nTf5qRo="
+    },
    "detect-port-alt": {
      "version": "1.1.6",
      "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
@ -9686,6 +9691,11 @@
        "lodash._reinterpolate": "~3.0.0"
      }
    },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
    "lodash.uniq": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@ -12550,6 +12560,18 @@
      "resolved": "https://registry.npmjs.org/react-flow-types/-/react-flow-types-0.2.0-beta.6.tgz",
      "integrity": "sha512-I4f8oJFGxVJYrJLxG4sCPW7vWedNB8Eee1U2v+xBzRPlF7X5IBelqaDIKxBDLzDFb++AzpoU+uu1jFaKy1QssQ=="
    },
+    "react-image-gallery": {
+      "version": "0.8.12",
+      "resolved": "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-0.8.12.tgz",
+      "integrity": "sha512-jkrsEhRZ3JPxFhLznrwPyAVy/n6HiM204tKBJ1W5z1a8QnWLVVi+j/UXsMETvks4rnSIkAQbW3WPHbrS19nNMQ==",
+      "requires": {
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.5.8",
+        "react-swipeable": "^4.2.2",
+        "resize-observer-polyfill": "^1.5.0"
+      }
+    },
    "react-jss": {
      "version": "8.6.1",
      "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.6.1.tgz",
@ -12695,6 +12717,15 @@
        }
      }
    },
+    "react-swipeable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-4.3.0.tgz",
+      "integrity": "sha512-L21VMbcDvG+AOVF4ZIbQ8sICGIgiKB/plGKWBMw6dkxt5neS7x74ZlTbJ39U8slz798MZBv/uIoE9Vzgp3PODQ==",
+      "requires": {
+        "detect-passive-events": "^1.0.4",
+        "prop-types": "^15.5.8"
+      }
+    },
    "react-transition-group": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz",
@ -13277,6 +13308,11 @@
      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
    },
+    "resize-observer-polyfill": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
+      "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
+    },
    "resolve": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.6.0.tgz",
--- a/package.json
+++ b/package.json
@ -17,6 +17,7 @@
    "moment": "^2.22.2",
    "react": "^16.5.1",
    "react-dom": "^16.5.1",
+    "react-image-gallery": "^0.8.12",
    "react-quiz-component": "0.2.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
--- a/src/components/FlameLinkCollection.js
+++ b/src/components/FlameLinkCollection.js
@ -0,0 +1,47 @@
+import React, { Component} from 'react';
+import flamelinkApp from '../flamelink.js';
+import FlameLinkCollectionComponentCreations from './FlameLinkCollectionComponentCreations';
+
+class FlameLinkCollection extends Component {
+    constructor() {
+        super();
+        
+        global.mediaID = '';
+
+        this.state = {
+          schemaContent: '',
+        }
+
+        flamelinkApp.content.get(global.schemaName)
+        .then(result => this.setState({
+          schemaContent: result
+        }))
+      }
+
+    getCollectionContent(schemaData){
+        var arr2 = [];
+        var collectionInfo = [schemaData, this.state.schemaContent];
+        for (var val in this.state.schemaContent){
+            arr2.push(val);
+        }
+        return arr2.map(this.getCollectionComponentInfo, collectionInfo);
+    }
+
+    getCollectionComponentInfo(num){
+        var arr3 = [];
+        for (var val in this[0]){
+            arr3.push(val);
+        }
+        return <FlameLinkCollectionComponentCreations schemaData={this[0]} schemaContent={this[1][num]} arr={arr3} key={num} />
+    }
+
+    render() {
+        return(
+            <div>
+                {this.getCollectionContent(this.props.schemaData)}
+            </div>
+        );
+    }
+}
+
+export default FlameLinkCollection;
--- a/src/components/FlameLinkCollectionComponentCreations.js
+++ b/src/components/FlameLinkCollectionComponentCreations.js
@ -0,0 +1,25 @@
+import React, { Component} from 'react';
+import Grid from '@material-ui/core/Grid';
+import FlameLinkCollectionStructure from './FlameLinkCollectionStructure';
+
+class FlameLinkCollectionComponentCreations extends Component {
+
+    createCollectionEntries(schemaData, schemaContent, arr){
+        var collectionInfo = [schemaData, schemaContent];
+        return arr.map(this.createCollectionComponents, collectionInfo);
+    }
+
+    createCollectionComponents(num){
+        return <FlameLinkCollectionStructure schemaData={this[0]} schemaContent={this[1]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
+    }
+
+    render() {
+        return(
+                <Grid container>
+                    {this.createCollectionEntries(this.props.schemaData, this.props.schemaContent, this.props.arr)}
+                </Grid>
+        );
+    }
+}
+
+export default FlameLinkCollectionComponentCreations;
--- a/src/components/FlameLinkCollectionGallery.js
+++ b/src/components/FlameLinkCollectionGallery.js
@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import { withStyles } from '@material-ui/core/styles';
+import RenderGallery from './RenderGallery';
+import flamelinkApp from '../flamelink.js';
+import FlameLinkCollectionGalleryContent from './FlameLinkCollectionGalleryContent';
+import "react-image-gallery/styles/css/image-gallery.css";
+import '../css/FlameLink.css';
+
+const styles = theme => ({
+    flamelinkItem: {
+        marginRight: 20,
+        marginLeft: 20,
+        marginTop: 20,
+    },
+
+    flamelinkGallery: {
+        marginRight: "auto",
+        marginLeft: "auto",
+    },
+
+    flamelinkGalleryContainer: {
+        backgroundColor: 'black',
+        marginTop: 20,
+    },
+});
+
+class FlameLinkCollectionGallery extends Component {
+    getPageTitle = galleryName => {
+        switch (galleryName) {
+            case 'martensAndKits':
+                document.title = 'Marten Tracker | Martens and Kits';
+                break;
+            case 'martensAtNight':
+                document.title = 'Marten Tracker | Martens at Night';
+                break;
+            case 'martensBeingMartens':
+                document.title = 'Marten Tracker | Martens Being Martens';
+                break;
+            default:
+                document.title = 'Marten Tracker | Galleries';
+                break;
+        }
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            schemaDetails: '',
+            schemaContent: '',
+            schemaDescription: '',
+        }
+
+        flamelinkApp.schemas.getFields(this.props.galleryName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
+            .then(result => this.setState({
+                schemaDetails: result
+            }))
+
+        flamelinkApp.content.get(this.props.galleryName)
+            .then(result => this.setState({
+                schemaContent: result
+            }))
+
+        if (this.props.showTitle === false) {
+        } else {
+            flamelinkApp.schemas.get(this.props.galleryName)
+                .then(result => this.setState({
+                    schemaDescription: result.title
+                }))
+        }
+
+        this.getPageTitle(this.props.galleryName);
+    }
+
+    getGalleryInfo(schemaDetails, schemaContent) {
+        var key;
+        var mediaNums = [];
+        var mediaIDs = [];
+
+        for (var val in schemaDetails) {
+            key = schemaDetails[val].key
+        }
+        for (var val1 in schemaContent) {
+            for (var val2 in schemaContent[val1][key]) {
+                mediaIDs.push(schemaContent[val1][key][val2]);
+            }
+        }
+        for (var val3 in mediaIDs) {
+            mediaNums.push(val3)
+        }
+
+        return mediaNums.map(this.createGallery, mediaIDs);
+    }
+
+    createGallery(num) {
+        if (num === '0') {
+            global.galleryImages = [];
+        }
+        return <FlameLinkCollectionGalleryContent mediaIDs={this} num={num} key={this[num]} />;
+    }
+
+    render() {
+        const { classes } = this.props;
+
+        return (
+            <Grid container>
+                {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)}
+                <Typography variant='display2' className={classes.flamelinkItem}>
+                    {this.state.schemaDescription}
+                </Typography>
+                <Grid container className={classes.flamelinkGalleryContainer}>
+                    <Grid item lg={8} md={8} sm={12} xs={12} className={classes.flamelinkGallery} >
+                        <RenderGallery key={Math.random()} />
+                    </Grid>
+                </Grid>
+            </Grid>
+        );
+    }
+}
+
+export default withStyles(styles)(FlameLinkCollectionGallery);
--- a/src/components/FlameLinkCollectionGalleryContent.js
+++ b/src/components/FlameLinkCollectionGalleryContent.js
@ -0,0 +1,38 @@
+import { Component } from 'react';
+import flamelinkApp from '../flamelink.js';
+import '../css/FlameLink.css';
+
+class FlameLinkCollectionGalleryContent extends Component {
+    constructor(props) {
+        super(props);
+
+        global.galleryImages = [];
+
+        this.state = {
+            mediaURL: '',
+        }
+
+        flamelinkApp.storage.getURL(this.props.mediaIDs[this.props.num])
+            .then(url => this.setState({
+                mediaURL: url
+            }))
+    }
+
+    addURLs = () => {
+        if (this.state.mediaURL === '') {
+        } 
+        else {
+            var element = {}
+            element.original = this.state.mediaURL;
+            global.galleryImages.push(element);
+        }
+        
+        return null;
+    }
+
+    render() {
+        return this.addURLs();
+    }
+}
+
+export default FlameLinkCollectionGalleryContent;
--- a/src/components/FlameLinkCollectionStructure.js
+++ b/src/components/FlameLinkCollectionStructure.js
@ -0,0 +1,128 @@
+import React, { Component} from 'react';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
+import flamelinkApp from '../flamelink.js';
+import FlameLinkImage from './FlameLinkImage';
+import FlameLinkFieldSet from './FlameLinkFieldSet';
+
+const styles = theme => ({
+        flamelinkItem: {
+            paddingRight: 20,
+            paddingLeft: 20,
+            paddingTop: 20,
+        },
+    });
+
+class FlameLinkCollectionStructure extends Component {
+    constructor() {
+        super();
+        
+        global.mediaID = '';
+
+        this.state = {
+          schemaContent: '',
+        }
+
+        flamelinkApp.content.get(global.schemaName)
+        .then(result => this.setState({
+          schemaContent: result
+        }))
+      }
+
+    getContent(content, field, key, type, description){
+        if (type === 'text'){
+                if(description === 'h1'){
+                    return  (
+                            <Typography variant='display4' id={key}>
+                                {content[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h2'){
+                    return  (
+                            <Typography variant='display3' id={key}>
+                                {content[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h3'){
+                    return  (
+                            <Typography variant='display2' id={key}>
+                                {content[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h4'){
+                    return  (
+                            <Typography variant='display1' id={key}>
+                                {content[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h5'){
+                    return  (
+                            <Typography variant='headline' id={key}>
+                                {content[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h6'){
+                    return  (
+                            <Typography variant='title' id={key}>
+                                {content[key]}
+                            </Typography>
+                            )                
+                }
+                else{
+                    return  (
+                            <Typography variant='body2' component="p" id={key}>
+                                {content[key]}
+                            </Typography>
+                            )
+                }
+            }
+            if(type === 'textarea'){
+                return  (
+                        <Typography variant='body2' component="p" id={key}>
+                            {content[key]}
+                        </Typography>
+                        )               
+            }
+            if (type === 'media'){
+                for (var val in content[key]){
+                    global.mediaID = content[key][val];
+                    return <FlameLinkImage/>
+                } 
+            }
+            if (type === 'fieldset'){
+                if(content === ''){
+                    return
+                }
+                else{
+                    return <FlameLinkFieldSet field={content[key]} field2={field.options}/>
+                }
+            }
+        console.log('Content: ', content)
+        console.log('Field: ', field)
+        console.log('Key: ', key)
+        console.log('Type: ', type)
+        console.log('Description: ', description)
+    }
+
+    render() {
+        const { classes } = this.props;
+
+        const lg = this.props.field.gridColumns.lg;
+        const md = this.props.field.gridColumns.md;
+        const sm = this.props.field.gridColumns.sm;
+        const xs = this.props.field.gridColumns.xs;
+        return(
+            <Grid item lg={lg} md={md} sm={sm} xs={xs} className={classes.flamelinkItem}>
+                    {this.getContent(this.props.schemaContent, this.props.field, this.props.field.key, this.props.type, this.props.field.description)}
+            </Grid>
+        );
+    }
+}
+
+export default withStyles(styles)(FlameLinkCollectionStructure);
--- a/src/components/FlameLinkComponentCreations.js
+++ b/src/components/FlameLinkComponentCreations.js
@ -1,25 +1,39 @@
 import React, { Component} from 'react';
 import FlameLinkStructure from './FlameLinkStructure';
+import FlameLinkCollection from './FlameLinkCollection';
 import Grid from '@material-ui/core/Grid';

 class FlameLinkComponentCreations extends Component {
-
-    getSchemaFieldData(schemaData){
+    
+    getSchemaFieldData(schemaData, schemaType){
        var arr = [];
        for (var val in schemaData){
            arr.push(val);
        }
-        return arr.map(this.createComponents, schemaData);
+
+        if(schemaType === 'single'){
+            return arr.map(this.createSingleTypeSchemaComponents, schemaData);
+        }
+        if(schemaType === 'collection'){
+            return this.createCollectionTypeSchemaComponents(schemaData);
+        }
+        else{
+            return
+        }
    }

-    createComponents(num){
+    createSingleTypeSchemaComponents(num){
        return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
    }

+    createCollectionTypeSchemaComponents(schemaData){  
+        return <FlameLinkCollection schemaData={schemaData} />
+    }
+
    render() {
        return(
                <Grid container>
-                    {this.getSchemaFieldData(this.props.schemaDetails)}
+                    {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
                </Grid>
        );
    }
--- a/src/components/FlameLinkFieldSetContent.js
+++ b/src/components/FlameLinkFieldSetContent.js
@ -21,11 +21,11 @@ class FlameLinkFieldSetContent extends Component {
                        )
        }
        if(type === 'textarea'){
-            return  (
-                    <Typography variant='body2' component="p" id={this.props.field.key} gutterBottom>
-                    {fieldsetContent[key]}
-                    </Typography>
-                    )               
+                return  (
+                        <Typography variant='body2' component="p" id={this.props.field.key} gutterBottom>
+                        {fieldsetContent[key]}
+                        </Typography>
+                        ) 
        }
        if (type === 'media'){
            for (var val in fieldsetContent[key]){
--- a/src/components/FlameLinkImage.js
+++ b/src/components/FlameLinkImage.js
@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Typography from '@material-ui/core/Typography';
 import flamelinkApp from '../flamelink.js';
-
+import '../css/FlameLink.css';

 class FlameLinkImage extends Component {
    constructor() {
@ -20,7 +20,7 @@ class FlameLinkImage extends Component {
    render() {
        return(
                <Typography align='center'>
-                    <img src={this.state.mediaURL} width="70%" alt='' />
+                    <img src={this.state.mediaURL} className='flamelinkImage' alt='' />
                </Typography>
        );
    }
--- a/src/components/FlameLinkStructure.js
+++ b/src/components/FlameLinkStructure.js
@ -31,78 +31,78 @@ class FlameLinkStructure extends Component {
      }

    getContent(schemaField, key, type, description){
-        if (type === 'text'){
-            if(description === 'h1'){
-                return  (
-                        <Typography variant='display4' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
+            if (type === 'text'){
+                if(description === 'h1'){
+                    return  (
+                            <Typography variant='display4' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h2'){
+                    return  (
+                            <Typography variant='display3' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h3'){
+                    return  (
+                            <Typography variant='display2' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h4'){
+                    return  (
+                            <Typography variant='display1' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h5'){
+                    return  (
+                            <Typography variant='headline' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h6'){
+                    return  (
+                            <Typography variant='title' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                else{
+                    return  (
+                            <Typography variant='body2' component="p" id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )
+                }
            }
-            if(description === 'h2'){
-                return  (
-                        <Typography variant='display3' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
-            }
-            if(description === 'h3'){
-                return  (
-                        <Typography variant='display2' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
-            }
-            if(description === 'h4'){
-                return  (
-                        <Typography variant='display1' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
-            }
-            if(description === 'h5'){
-                return  (
-                        <Typography variant='headline' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
-            }
-            if(description === 'h6'){
-                return  (
-                        <Typography variant='title' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
-            }
-            else{
+            if(type === 'textarea'){
                return  (
                        <Typography variant='body2' component="p" id={key}>
                            {this.state.schemaContent[key]}
                        </Typography>
-                        )
+                        )               
            }
-        }
-        if(type === 'textarea'){
-            return  (
-                    <Typography variant='body2' component="p" id={key}>
-                        {this.state.schemaContent[key]}
-                    </Typography>
-                    )               
-        }
-        if (type === 'media'){
-            for (var val in this.state.schemaContent[key]){
-                global.mediaID = this.state.schemaContent[key][val];
-                return <FlameLinkImage/>
-            } 
-        }
-        if (type === 'fieldset'){
-            if(this.state.schemaContent === ''){
-                return
+            if (type === 'media'){
+                for (var val in this.state.schemaContent[key]){
+                    global.mediaID = this.state.schemaContent[key][val];
+                    return <FlameLinkImage/>
+                } 
            }
-            else{
-                return <FlameLinkFieldSet field={this.state.schemaContent[key]} field2={schemaField.options}/>
+            if (type === 'fieldset'){
+                if(this.state.schemaContent === ''){
+                    return
+                }
+                else{
+                    return <FlameLinkFieldSet field={this.state.schemaContent[key]} field2={schemaField.options}/>
+                }
            }
-        }
    }

    render() {
--- a/src/components/Main.js
+++ b/src/components/Main.js
@ -14,6 +14,7 @@ import Hidden from '@material-ui/core/Hidden';
 import Divider from '@material-ui/core/Divider';
 import MenuIcon from '@material-ui/icons/Menu';
 import HomeIcon from '@material-ui/icons/Home';
+import PhotoLibraryIcon from '@material-ui/icons/PhotoLibrary';
 import AssignmentIcon from '@material-ui/icons/Assignment';
 import MapIcon from '@material-ui/icons/Map';
 import InfoIcon from '@material-ui/icons/Info';
@ -21,7 +22,7 @@ import ListIcon from '@material-ui/icons/List';
 import SlideshowIcon from '@material-ui/icons/Slideshow';
 import Home from '../pages/Home';
 import ViewMap from '../pages/ViewMap';
-import Info from '../pages/Info';
+import About from '../pages/About';
 import Quiz from '../pages/QuizPage';
 import SightingList from '../pages/SightingList';
 import Report from '../pages/Report';
@ -29,6 +30,7 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import Collapse from '@material-ui/core/Collapse';
+import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';

 const drawerWidth = 240;

@ -71,7 +73,8 @@ class ResponsiveDrawer extends React.Component {
    state = {
        mobileOpen: false,
        key: 'Home',
-        open: false
+        open: false,
+        open2: false,
    };

    handleDrawerToggle = () => {
@ -82,6 +85,10 @@ class ResponsiveDrawer extends React.Component {
        this.setState(state => ({ open: !state.open }));
    }

+    handleClick2 = () => {
+        this.setState(state => ({ open2: !state.open2 }));
+    }
+
    nav = (text) => {
        this.setState({
            key: text
@ -136,6 +143,26 @@ class ResponsiveDrawer extends React.Component {
                            </ListItem>
                        </List>
                    </Collapse>
+                    <ListItem button onClick={this.handleClick2}>
+                        <ListItemIcon>
+                            <PhotoLibraryIcon />
+                        </ListItemIcon>
+                        <ListItemText inset primary="Galleries" />
+                        {this.state.open2 ? <ExpandLess /> : <ExpandMore />}
+                    </ListItem>
+                    <Collapse in={this.state.open2} timeout="auto" unmountOnExit>
+                        <List component="div" disablePadding>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery1')}>
+                                <ListItemText inset primary="Martens and Kits" />
+                            </ListItem>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery2')}>
+                                <ListItemText inset primary="Martens at Night" />
+                            </ListItem>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery3')}>
+                                <ListItemText inset primary="Martens Being Martens" />
+                            </ListItem>
+                        </List>
+                    </Collapse>
                </List>
                <Divider />
            </div>
@ -195,10 +222,13 @@ class ResponsiveDrawer extends React.Component {
                    {this.state.key === 'Report' && <Report />}
                    {this.state.key === 'Map' && <ViewMap />}
                    {this.state.key === 'List' && <SightingList />}
-                    {this.state.key === 'About' && <Info />}
+                    {this.state.key === 'About' && <About />}
                    {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
                    {this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate'/>}
                    {this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced'/>}
+                    {this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martensAndKits'}/>}
+                    {this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martensAtNight'}/>}
+                    {this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martensBeingMartens'}/>}
                </main>
            </div>
        );
--- a/src/components/RenderGallery.js
+++ b/src/components/RenderGallery.js
@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import ImageGallery from 'react-image-gallery';
+import "react-image-gallery/styles/css/image-gallery.css";
+import '../css/FlameLink.css';
+
+class RenderGallery extends Component {
+    constructor() {
+        super();
+
+        this.state = {
+            showThumbnails: false,
+            showIndex: true,
+            showBullets: true,
+            mounted: false,
+        }
+    }
+
+    componentDidMount() {
+        this.setState({ mounted: true })
+    }
+
+    _onImageLoad = event => {
+        console.debug('loaded image', event.target.src);
+    }
+
+    render() {
+        return (
+            <ImageGallery
+                items={global.galleryImages}
+                showThumbnails={this.state.showThumbnails}
+                showIndex={this.state.showIndex}
+                showBullets={this.state.showBullets}
+                onImageLoad={this._onImageLoad}
+            />
+        );
+    }
+}
+
+export default RenderGallery;
--- a/src/css/FlameLink.css
+++ b/src/css/FlameLink.css
@ -0,0 +1,4 @@
+.flamelinkImage {
+  width: 100%;
+  max-width: 500px;
+}
--- a/src/pages/About.js
+++ b/src/pages/About.js
@ -0,0 +1,43 @@
+import React, { Component, Fragment } from 'react';
+import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
+import flamelinkApp from '../flamelink.js';
+
+class About extends Component {
+    constructor() {
+        super();
+
+        global.schemaName = 'martenAbout';
+
+        this.state = {
+          schemaDetails: '',
+          schemaType: '',
+        }
+
+        flamelinkApp.schemas.getFields(global.schemaName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options' ] })
+        .then(result => this.setState({
+          schemaDetails: result
+        }))
+        
+        flamelinkApp.schemas.get(global.schemaName)
+        .then(result => this.setState({
+          schemaType: result.type
+        }))
+    }
+
+    componentDidMount() {
+        document.title = 'Marten Tracker | About';
+    }
+
+    render() {
+        
+        return (
+            <div>
+                <Fragment>
+                    <FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails} schemaType = {this.state.schemaType}/>
+                </Fragment>
+            </div>
+        );
+    }
+}
+
+export default About;
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
+import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
 import flamelinkApp from '../flamelink';
+import Grid from '@material-ui/core/Grid';

 class Home extends Component {
    constructor() {
@ -10,12 +12,18 @@ class Home extends Component {

        this.state = {
            schemaDetails: '',
+            schemaType: '',
        }

-        flamelinkApp.schemas.getFields(global.schemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
+        flamelinkApp.schemas.getFields(global.schemaName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] })
            .then(result => this.setState({
                schemaDetails: result
            }))
+
+        flamelinkApp.schemas.get(global.schemaName)
+            .then(result => this.setState({
+              schemaType: result.type
+            }))
    }

    componentDidMount() {
@ -24,7 +32,10 @@ class Home extends Component {

    render() {
        return (
-            <FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} />
+            <Grid container>
+                <FlameLinkCollectionGallery galleryName={'martenHomeGallery'} showTitle={false}/>
+                <FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} schemaType = {this.state.schemaType}/>
+            </Grid>
        );
    }
 }