Fixed merge conflict.

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",
@@ -9701,6 +9706,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",
@@ -12565,6 +12575,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",
@@ -12710,6 +12732,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",
@@ -13292,6 +13323,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",

package.json

@@ -18,6 +18,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",

readme.md

@@ -1,25 +1,28 @@
 # Marten Application
 ### Background
-Given some recent research into the American marten, there is a need for a web application that is able to document marten sightings. Graduate research has produced a model that predicts habitat suitability for the northern Lower Peninsula, but a lack of anything besides anecdotal evidence makes testing the model difficult. This application would allow for "citizen science". This is the outsourcing of research efforts to the public. This would allow people to log marten sightings for research purposes. The project will be a web platform and certain groups including hunters, hunting club members, wildlife managers and state park personnel will be targeted for citizen science. This application will hopefully help bolster research efforts for the American marten.
+Given recent research into the American marten, there was a need for a web application that is able to document marten sightings. Graduate research has produced a model that predicts habitat suitability for the northern Lower Peninsula, but a lack of anything besides anecdotal evidence makes testing the model difficult. This application allows for "citizen science". This is the outsourcing of research efforts to the public. This would allow people to log marten sightings for research purposes. The project is a public web application and certain groups including hunters, hunting club members, wildlife managers and state park personnel will be targeted for citizen science. This application will hopefully help bolster research efforts for the American marten.
 
-The application will allow for users to post marten sightings. They can attach photos and make comments on said photos. They also can include the location where the sighting occurred and rank their confidence in the sighting. This will all be stored in some type of database that can be queried for research purposes. We also will integrate a map API to allow for users to see where marten sightings have occurred.
+The application allows for users to post marten sightings. They can attach photos and make comments on said photos using Disqus. They also can include the location where the sighting occurred and rank their confidence in the sighting. This is all stored in Google Firebase. We additionally utilize Google Maps, which allows for users to see where marten sightings have occurred. A trail-cam quiz with multiple difficulty settings incentivizes participation in the application. There is also information concerning martens and photo galleries with pictures of them built using the Flamelink CMS.
 
 ### URL
 
-[Marten Tracker](https://marten-application.netlify.com/ "Click here to see the application in action.")
+[Marten Tracker](https://marten-tracker.netlify.com/ "Click here to see the application in action.")
 
-### Intended Features
+### Features
 * Ability to log marten sightings.
-* Include type of sighting on marten sighting post.
+* Metadata on marten sighting posts.
-* Attach photos to marten sighting post.
 * A map per sighting post for location of marten sighting.
-* Map for all marten sighting posts.
+* State-wide map for all marten sighting posts.
-* Comments on photos.
+* Disqus threads on marten sighting posts.
 * Quiz game for learning more about martens.
+* Information section on martens.
+* Photo galleries of martens.
 
 ### Technologies
 * ReactJS
 * Firebase
+* Material-UI
 * Google API
 * Netlify
 * Flamelink CMS
+* EmailJS

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;

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;

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);

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;

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);

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>
         );
     }

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>
         );
     }

src/components/Main.js

@@ -14,7 +14,11 @@ 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';
+<<<<<<< HEAD
 import EmailIcon from '@material-ui/icons/Email';
+=======
+import PhotoLibraryIcon from '@material-ui/icons/PhotoLibrary';
+>>>>>>> ce9f5e9c512de50492974fc8bc0d368750fb8307
 import AssignmentIcon from '@material-ui/icons/Assignment';
 import MapIcon from '@material-ui/icons/Map';
 import InfoIcon from '@material-ui/icons/Info';
@@ -22,7 +26,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 Contact from '../pages/Contact';
 import SightingList from '../pages/SightingList';
@@ -31,6 +35,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;
 
@@ -73,7 +78,8 @@ class ResponsiveDrawer extends React.Component {
     state = {
         mobileOpen: false,
         key: 'Home',
-        open: false
+        open: false,
+        open2: false,
     };
 
     handleDrawerToggle = () => {
@@ -84,6 +90,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
@@ -142,6 +152,26 @@ class ResponsiveDrawer extends React.Component {
                         <ListItemIcon><InfoIcon /></ListItemIcon>
                         <ListItemText primary='About' />
                     </ListItem>
+                    <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>
@@ -201,11 +231,18 @@ class ResponsiveDrawer extends React.Component {
                     {this.state.key === 'Report' && <Report />}
                     {this.state.key === 'Map' && <ViewMap />}
                     {this.state.key === 'List' && <SightingList />}
+<<<<<<< HEAD
                     {this.state.key === 'About' && <Info />}
                     {this.state.key === 'Contact' && <Contact />}
+=======
+                    {this.state.key === 'About' && <About />}
+>>>>>>> ce9f5e9c512de50492974fc8bc0d368750fb8307
                     {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>
         );

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;

src/components/SightingMap.js

@@ -272,9 +272,8 @@ export class MapContainer extends Component {
                     initialCenter={this.state.myLatLng}
                     center={this.state.myLatLng}
                     minZoom={6}
-                    zoom={6}
+                    zoom={7}
                     onClick={this.onMapClick}
-                    defaultZoom={15}
                 >
                     <Marker
                         position={this.state.myLatLng}

src/css/FlameLink.css

@@ -0,0 +1,4 @@
+.flamelinkImage {
+  width: 100%;
+  max-width: 500px;
+}

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;

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'] })
             .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>
         );
     }
 }