Skip to content

Instantly share code, notes, and snippets.

@dblodorn

dblodorn/FlexiblePortfolioLayout.js

Last active November 11, 2017 05:09
Show Gist options
  • Save dblodorn/2d7cdcb2049af98fb41f3b16d6cd95fe to your computer and use it in GitHub Desktop.
Save dblodorn/2d7cdcb2049af98fb41f3b16d6cd95fe to your computer and use it in GitHub Desktop.
Download ZIP
DANKE!
Raw
data.json
"portfolio_layout": [
{
"image": {
"urls": {
"large": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/07193946/HR_C21806-117-2-1600x1001.jpg",
"small": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/07193946/HR_C21806-117-2-800x501.jpg",
"id": "bwapiimg393"
},
"metadata": {
"credit": "",
"caption": "Miami, FL 2017",
"title": "Louis Vuitton Series 8 Campaign",
"keywords": []
},
"style": "single_column",
"position": "full_row"
}
},
{
"image": {
"urls": {
"large": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/07195050/HR_C21806-160-6-1370x1600.jpg",
"small": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/07195050/HR_C21806-160-6-685x800.jpg",
"id": "bwapiimg402"
},
"metadata": {
"credit": "",
"caption": "Miami, FL 2017",
"title": "Louis Vuitton Series 8 Campaign",
"keywords": []
},
"style": "single_column",
"position": "left"
}
},
{
"two_column": [
{
"image": {
"urls": {
"large": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/02182332/HR_C21806-07-3-1338x1600.jpg",
"small": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/02182332/HR_C21806-07-3-669x800.jpg",
"id": "bwapiimg302"
},
"metadata": {
"credit": "",
"caption": "Miami, FL 2017",
"title": "Louis Vuitton Series 8 Campaign",
"keywords": []
},
"style": "two_column",
"position": "left"
}
},
{
"image": {
"urls": {
"large": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/02182342/HR_C21806-36-6-1282x1600.jpg",
"small": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/02182342/HR_C21806-36-6-641x800.jpg",
"id": "bwapiimg303"
},
"metadata": {
"credit": "",
"caption": "Miami, FL 2017",
"title": "Louis Vuitton Series 8 Campaign",
"keywords": []
},
"style": "two_column",
"position": "right"
}
}
]
},
{
"image": {
"urls": {
"large": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/02182426/HR_C21806-166-12-1316x1600.jpg",
"small": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/02182426/HR_C21806-166-12-658x800.jpg",
"id": "bwapiimg309"
},
"metadata": {
"credit": "",
"caption": "Miami, FL 2017",
"title": "Louis Vuitton Series 8 Campaign",
"keywords": []
},
"style": "single_column",
"position": "centered"
}
},
{
"image": {
"urls": {
"large": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/02182417/HR_C21806-163-6-1327x1600.jpg",
"small": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/02182417/HR_C21806-163-6-664x800.jpg",
"id": "bwapiimg308"
},
"metadata": {
"credit": "",
"caption": "Miami, FL 2017",
"title": "Louis Vuitton Series 8 Campaign",
"keywords": []
},
"style": "single_column",
"position": "right"
}
},
{
"image": {
"urls": {
"large": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/07193946/HR_C21806-117-2-1600x1001.jpg",
"small": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/07193946/HR_C21806-117-2-800x501.jpg",
"id": "bwapiimg393"
},
"metadata": {
"credit": "",
"caption": "Miami, FL 2017",
"title": "Louis Vuitton Series 8 Campaign",
"keywords": []
},
"style": "single_column",
"position": "full_bleed"
}
},
{
"two_column": [
{
"image": {
"urls": {
"large": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/02182410/HR_C21806-99-7-1304x1600.jpg",
"small": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/02182410/HR_C21806-99-7-652x800.jpg",
"id": "bwapiimg307"
},
"metadata": {
"credit": "",
"caption": "Miami, FL 2017",
"title": "Louis Vuitton Series 8 Campaign",
"keywords": []
},
"style": "two_column",
"position": "left"
}
},
{
"image": {
"urls": {
"large": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/02182403/HR_C21806-87-1-1311x1600.jpg",
"small": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/11/02182403/HR_C21806-87-1-655x800.jpg",
"id": "bwapiimg306"
},
"metadata": {
"credit": "",
"caption": "Miami, FL 2017",
"title": "Louis Vuitton Series 8 Campaign",
"keywords": []
},
"style": "two_column",
"position": "right"
}
}
]
}
]
Raw
FlexiblePortfolioLayout.js
import React, { Component } from 'react';
import Image from './../dom-elements/Image';
import ProjectDetailCaption from './../ProjectDetailCaption';
import PortfolioPopover from './PortfolioPopover';
import { getKey, photoArray, bgImage } from './../../scripts';
import { spacing, widths, colors } from './../../styles/theme.json';
import './flex-layout.scss';
export default class FlexiblePortfolioLayout extends Component {
constructor(props) {
super(props);
this.clickPopup = this._clickPopup.bind(this);
this.closePopup = this._closePopup.bind(this);
this.layoutData = photoArray(this.props.LayoutItems);
console.log(this.layoutData);
this.state = {
popover: false
};
}
_clickPopup(id) {
console.log(id);
this.setState({
popover: true
});
}
_closePopup() {
this.setState({
popover: false
});
}
render() {
const GridItem = (props) => {
return (
<div className={'flexible-image-wrapper'} onClick={() => this._clickPopup(props.ImgData.image.urls.id)}>
<ProjectDetailCaption ProjectName={props.ImgData.image.metadata.title} ImageDescription={props.ImgData.image.metadata.caption}/>
<div className="image-inner">
<Image source={props.ImgData.image.urls.large}/>
</div>
</div>
);
};
const FlexLayout = this.layoutData.flex_array.map((item, i) =>
<li className={'flexible-row'} key={'flex-layout-item-' + i}>
{
(item.two_column)
? <div className={'two_column flex-row-wrapper'}>
<GridItem ImgData={item.two_column[0]}/>
<GridItem ImgData={item.two_column[1]}/>
</div>
:
(item.image)
? <div className={item.image.position + ' flex-row-wrapper'}>
<GridItem ImgData={item}/>
</div>
: null
}
</li>
);
return (
<div>
{
(this.state.popover)
? <div id={'popover-wrapper'}>
<button id={'close-popover'} onClick={this.closePopup} style={bgImage('/static/icons/close.svg')} />
<PortfolioPopover PortfolioImages={this.layoutData.carousel_array}/>
</div>
: <section id="flexible-layout">
<ul id="layout">
{FlexLayout}
</ul>
</section>
}
</div>
);
};
};
Raw
get-key.js
const getKey = (item) => {
const itemKey = Object.keys(item);
return itemKey[0];
};
export default getKey;
Raw
photo-array.js
import getKey from './get-key';
const photoArray = (array) => {
const flattenArray = (array) => {
let output = [];
array.forEach((el) => {
if (getKey(el) == 'two_column') {
output.push(el.two_column[0]);
output.push(el.two_column[1]);
} else {
output.push(el);
}
});
return output;
};
return {
carousel_array: flattenArray(array),
flex_array: array
};
};
export default photoArray;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment