Skip to content
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

T5-73 Art-directed Fixed Images in Case Studies / ProjectPreview -> ImageCollage component. #81

Merged
merged 5 commits into from
Jul 2, 2019
Merged

T5-73 Art-directed Fixed Images in Case Studies / ProjectPreview -> ImageCollage component. #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d5a543f
T5-73 Implement Type A,B,C images by compiling all image derivates in…
earthday47 Jul 1, 2019
adabb85
Run `yarn upgrade` to get the latest version of gatsby-image that sup…
earthday47 Jul 2, 2019
c296a93
T5-73 Set up art-directed ImageCollage fixed images.
earthday47 Jul 2, 2019
0d1e0b6
T5-73 Remove reference to field_*_scale so they can be removed on Dru…
earthday47 Jul 2, 2019
38a3e41
T5-73 Add type-a|b|c field_image_arrangement field value as a class i…
earthday47 Jul 2, 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
43 changes: 34 additions & 9 deletions src/components/ProjectPreview/ImageCollage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import Img from 'gatsby-image';
import { css } from '@emotion/core';

const ImageCollage = ({ images }) => {
import { mediaQueries } from '../../styles';

const ImageCollage = ({ images, type }) => {
const flexWrap = css`
display: flex;
position: relative;
Expand All @@ -22,23 +25,44 @@ const ImageCollage = ({ images }) => {
// // eslint-disable-next-line no-nested-ternary
// slideNumber % 3 === 0 ? 3 : slideNumber % 2 === 0 ? 2 : 1;
const selectedClass = () => 1;

// Pass array of fixed images with media query for art direction.
// @see https://www.gatsbyjs.org/packages/gatsby-image/#art-directing-multiple-images
return (
<article css={flexWrap}>
<article className={type} css={flexWrap}>
<div className='twoStack'>
<img
src={images.secondary}
<Img
fixed={[
images.secondary.mobile.fixed,
{
...images.secondary.desktop.fixed,
media: mediaQueries.desktop.replace(`@media`, ``).trim(),
},
]}
alt='secondary'
className={`secondary${selectedClass()}`}
/>
<img
src={images.primary}
<Img
fixed={[
images.primary.mobile.fixed,
{
...images.secondary.desktop.fixed,
media: mediaQueries.desktop.replace(`@media`, ``).trim(),
},
]}
alt='primary'
className={`primary${selectedClass()}`}
/>
</div>
<img
src={images.tertiary}
alt='tertiary'
<Img
fixed={[
images.tertiary.mobile.fixed,
{
...images.tertiary.desktop.fixed,
media: mediaQueries.desktop.replace(`@media`, ``).trim(),
},
]}
alt='primary'
className={`tertiary${selectedClass()}`}
/>
</article>
Expand All @@ -47,6 +71,7 @@ const ImageCollage = ({ images }) => {

ImageCollage.propTypes = {
images: PropTypes.object.isRequired,
type: PropTypes.string.isRequired,
};

export default ImageCollage;
84 changes: 55 additions & 29 deletions src/components/ProjectPreview/ProjectPreview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,47 @@ import { colors, weights, smSectionHead } from '../../styles';

import ImageCollage from './ImageCollage';

const ProjectPreview = ({ project, index }) => (
<div
css={css`
const ProjectPreview = ({ project, index }) => {
// Prepare image srcset based on Type (A, B, or C).
const primaryImageData = project.relationships.field_image.localFile;
const secondaryImageData =
project.relationships.field_secondary_image.localFile;
const tertiaryImageData =
project.relationships.field_tertiary_image.localFile;

// Assuming type-a is the default.
const images = {
primary: {
mobile: primaryImageData.childImageMobile,
desktop: primaryImageData.childImageTypeA,
},
secondary: {
mobile: secondaryImageData.childImageMobile,
desktop: secondaryImageData.childImageTypeA,
},
tertiary: {
mobile: tertiaryImageData.childImageMobile,
desktop: tertiaryImageData.childImageTypeA,
},
};
switch (project.field_image_arrangement) {
case 'type-b':
images.primary.desktop = primaryImageData.childImageTypeB;
images.secondary.desktop = secondaryImageData.childImageTypeB;
images.tertiary.desktop = primaryImageData.childImageTypeB;
break;
case 'type-c':
images.primary.desktop = primaryImageData.childImageTypeC;
images.secondary.desktop = secondaryImageData.childImageTypeC;
images.tertiary.desktop = primaryImageData.childImageTypeC;
break;
default:
break;
}

return (
<div
css={css`
display: flex;
height: 650px;
max-width: 100%;
Expand All @@ -29,32 +67,20 @@ const ProjectPreview = ({ project, index }) => (
line-height: 98px;
margin: 5rem 0 3rem 0;
}
}
`}
key={project.title}
>
<section>
<h3 css={smSectionHead}>Our Work</h3>
<h1>{project.title}</h1>
<Button onClick={() => navigate(project.path.alias)}>
view case study
</Button>
</section>
<ImageCollage
images={{
primary:
project.relationships.field_image.localFile.childImageSharp.fluid.src,
secondary:
project.relationships.field_secondary_image.localFile.childImageSharp
.fluid.src,
tertiary:
project.relationships.field_tertiary_image.localFile.childImageSharp
.fluid.src,
}}
index={index}
/>
</div>
);
`}
key={project.title}
>
<section>
<h3 css={smSectionHead}>Our Work</h3>
<h1>{project.title}</h1>
<Button onClick={() => navigate(project.path.alias)}>
view case study
</Button>
</section>
<ImageCollage images={images} type={project.field_image_arrangement} />
</div>
);
};

ProjectPreview.propTypes = {
project: PropTypes.object.isRequired,
Expand Down
68 changes: 63 additions & 5 deletions src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,7 @@ export const query = graphql`
title
field_subtitle
field_inverse_header
field_primary_image_scale
field_tertiary_image_scale
field_secondary_image_scale
field_image_arrangement
path {
alias
}
Expand All @@ -99,9 +97,29 @@ export const query = graphql`
...GatsbyImageSharpFluid
}
}
childImageMobile: childImageSharp {
fixed(width: 670, height: 520) {
...GatsbyImageSharpFixed
}
}
childImageTypeA: childImageSharp {
fixed(width: 900, height: 640) {
...GatsbyImageSharpFixed
}
}
childImageTypeB: childImageSharp {
fixed(width: 760, height: 840) {
...GatsbyImageSharpFixed
}
}
childImageTypeC: childImageSharp {
fixed(width: 840, height: 680) {
...GatsbyImageSharpFixed
}
}
}
}
field_tertiary_image {
field_secondary_image {
id
localFile {
publicURL
Expand All @@ -110,9 +128,29 @@ export const query = graphql`
...GatsbyImageSharpFluid
}
}
childImageMobile: childImageSharp {
fixed(width: 400, height: 300) {
...GatsbyImageSharpFixed
}
}
childImageTypeA: childImageSharp {
fixed(width: 500, height: 360) {
...GatsbyImageSharpFixed
}
}
childImageTypeB: childImageSharp {
fixed(width: 680, height: 520) {
...GatsbyImageSharpFixed
}
}
childImageTypeC: childImageSharp {
fixed(width: 540, height: 420) {
...GatsbyImageSharpFixed
}
}
}
}
field_secondary_image {
field_tertiary_image {
id
localFile {
publicURL
Expand All @@ -121,6 +159,26 @@ export const query = graphql`
...GatsbyImageSharpFluid
}
}
childImageMobile: childImageSharp {
fixed(width: 240, height: 300) {
...GatsbyImageSharpFixed
}
}
childImageTypeA: childImageSharp {
fixed(width: 500, height: 990) {
...GatsbyImageSharpFixed
}
}
childImageTypeB: childImageSharp {
fixed(width: 460, height: 410) {
...GatsbyImageSharpFixed
}
}
childImageTypeC: childImageSharp {
fixed(width: 640, height: 420) {
...GatsbyImageSharpFixed
}
}
}
}
}
Expand Down
4 changes: 1 addition & 3 deletions src/templates/studies.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,7 @@ export const query = graphql`
id
title
field_subtitle
field_primary_image_scale
field_tertiary_image_scale
field_secondary_image_scale
field_image_arrangement
field_inverse_header
relationships {
node_type {
Expand Down
Loading