{galleryItemData.name}
- ![{`Shop]()
+ ![{`Shop]()
{
/>
);
- const { modalImage, ...selectedGalleryItem } = data.gallery[selectedGalleryItemId];
-
return (
{
diff --git a/src/styles/gallery.sass b/src/styles/gallery.sass
index 0dd7b1af..41b44570 100644
--- a/src/styles/gallery.sass
+++ b/src/styles/gallery.sass
@@ -48,12 +48,6 @@
grid-column: span 2
grid-row: span 2
- &.wide
- grid-column: span 2
-
- &.tall
- grid-row: span 2
-
&:hover
.img-overlay
opacity: 1
diff --git a/src/styles/main.sass b/src/styles/main.sass
index 6d65cb33..77308664 100644
--- a/src/styles/main.sass
+++ b/src/styles/main.sass
@@ -44,50 +44,6 @@ nav
font-size: 0.7em
@import './header'
-
-.shop-cta
- position: relative
- background-image: url('../images/hero.jpg')
- background-size: cover
- height: 200px
-
- @media screen and (min-width: 640px)
- height: 300px
-
- .shop-cta-overlay
- position: absolute
- background: rgba($domhue, 0.9)
- top: 0
- left: 0
- bottom: 0
- right: 0
-
- .shop-cta-box
- text-align: center
- display: block
- position: relative
- top: 50%
- left: 50%
- transform: translate(-50%, -50%)
- width: 300px
- padding: 30px
-
- h2
- font-weight: normal
- margin: 0 0 30px
-
- a
- background: none
- padding: 10px 20px
- border: 3px solid $black
- font-size: inherit
- outline: none
- cursor: pointer
-
- &:hover
- background: $black
- color: $domhue
-
@import './gallery'
@import './modal'
@import './contact'
diff --git a/src/styles/shop.sass b/src/styles/shop.sass
index c8db6804..5847e6f2 100644
--- a/src/styles/shop.sass
+++ b/src/styles/shop.sass
@@ -37,3 +37,45 @@
top: 40%
left: 50%
transform: translate(-50%, -50%)
+
+.shop-cta
+ position: relative
+ height: 200px
+
+ @media screen and (min-width: 640px)
+ height: 300px
+
+.shop-cta-overlay
+ position: absolute
+ background: rgba($domhue, 0.9)
+ top: 0
+ left: 0
+ bottom: 0
+ right: 0
+
+.shop-cta-box
+ text-align: center
+ display: block
+ position: relative
+ top: 50%
+ left: 50%
+ transform: translate(-50%, -50%)
+ width: 300px
+ padding: 30px
+
+ h2
+ font-weight: normal
+ margin: 0 0 30px
+
+ a
+ background: none
+ padding: 10px 20px
+ border: 3px solid $black
+ font-size: inherit
+ outline: none
+ cursor: pointer
+
+ &:hover
+ background: $black
+ color: $domhue
+
\ No newline at end of file
{product.title}
{product.desc}
diff --git a/src/content/gallery.yaml b/src/content/gallery.yaml index 44d90011..c9045af3 100644 --- a/src/content/gallery.yaml +++ b/src/content/gallery.yaml @@ -2,7 +2,6 @@ - id: 0 name: choose life src: thumbs-022.jpg - size: large shop: false desc: The result of working in an office for too long. Made using ink, brush and pigment ink pens. modalImage: modal-000.jpg @@ -10,7 +9,6 @@ - id: 1 name: desert eyes src: thumbs-002.jpg - size: wide shop: false desc: Part of my desert tryptich illustration. Pen and ink drawings coloured using mixed media and finished on Photoshop. modalImage: modal-001.jpg @@ -18,7 +16,6 @@ - id: 2 name: bardo pond src: thumbs-003.jpg - size: wide shop: false desc: Gig poster for american space rock band Bardo Pond. Created for Room237 promotions using pen and ink, coloured using Photoshop. modalImage: modal-002.jpg @@ -26,7 +23,6 @@ - id: 3 name: patterned butterfly src: thumbs-015.jpg - size: large shop: true desc: Butterfly illustration created using pen and ink, coloured on illustrator. Screenprints available to buy 5 colours on heavy duty paper. modalImage: modal-007.jpg @@ -34,47 +30,34 @@ - id: 4 name: angled pike src: thumbs-004.jpg - size: small shop: false desc: An angular pike drawn for Wharf Chambers gig Man Forever. Pen and ink coloured using Photoshop. modalImage: modal-003.jpg - - id: 4 + - id: 5 name: mission of burma src: thumbs-005.jpg - size: small shop: false desc: Gig poster for legendary post punk band Mission Burma gig. created for Room237 and Brudenell Social Club. Created using pen and ink and coloured on Photoshop and Illustrator. modalImage: modal-004.jpg - - id: 5 + - id: 6 name: mushroomjack src: thumbs-021.jpg - size: tall shop: true desc: Mushroom lumberjack detailed illustration. I used pigment pens, a quill, a brush and platinum carbon ink, on heavy duty art paper. This is a available to buy in screenprint form. modalImage: modal-005.jpg - - id: 6 + - id: 7 name: folläkzoid src: thumbs-007.jpg - size: tall shop: false desc: Gig poster for Chilean space rock band Föllakzoid produced for Third Eye and Karma promotions. Created using pen and ink, coloured pencil and Photoshop. modalImage: modal-006.jpg - - id: 7 - name: patterned butterfly - src: thumbs-015.jpg - size: large - shop: true - desc: Butterfly illustration created using pen and ink, coloured on illustrator. Screenprints available to buy 5 colours on heavy duty paper. - modalImage: modal-007.jpg - - id: 8 name: angler fish src: thumbs-009.jpg - size: wide shop: false desc: Computer illustrated picture of an deep sea Angler Fish. Created using Adobe Illustrator and Photoshop. modalImage: modal-008.jpg @@ -82,7 +65,6 @@ - id: 9 name: patterned bug src: thumbs-010.jpg - size: wide shop: true desc: Beetle illustration created using pen and ink, coloured on illustrator. Screenprints available to buy 5 colours on heavy duty paper. modalImage: modal-009.jpg @@ -90,7 +72,6 @@ - id: 10 name: you mug src: thumbs-011.jpg - size: small shop: false desc: Comedy mug illustration computer drawn. This was made using Adobe Illustrator and Photoshop. modalImage: modal-010.jpg @@ -98,7 +79,6 @@ - id: 11 name: mutant bmx src: thumbs-012.jpg - size: small shop: false desc: A crazy hand drawn illustration of a mutant riding a BMX. Created using water colour and ink modalImage: modal-011.jpg @@ -106,7 +86,6 @@ - id: 12 name: collapse src: thumbs-018.jpg - size: large shop: false desc: Hand drawn illustration of head collapsing together in a circle with varying degrees of torment. Created using pen and ink modalImage: modal-017.jpg @@ -114,39 +93,27 @@ - id: 13 name: nf fly src: thumbs-013.jpg - size: tall shop: false desc: Debut gig poster for Leeds based gig promoters Northern Flowerhouse. Hand drawn illustration texture and colour done with Photoshop. modalImage: modal-012.jpg - - id: 13 + - id: 14 name: desert smoker src: thumbs-014.jpg - size: tall shop: true desc: Part of my desert tryptich illustration. Pen and ink drawings coloured using mixed media and finished on Photoshop. modalImage: modal-013.jpg - - id: 14 - name: robot workshop - src: thumbs-008.jpg - size: large - shop: true - desc: Hand drawn illustration of a robot being built. This was exhibited at North Bar for an exhibition titled 'Under Construction'. Created using pigment pens and water colour. Giclee prints on art paper available to buy. - modalImage: modal-014.jpg - - id: 15 name: leaf insect src: thumbs-001.jpg - size: large shop: false desc: Another gig poster for Leeds based gig promoters Northern Flowerhouse. This time featuring a leaf insect. Created using Illustrator and Photoshop. modalImage: modal-021.jpg - - id: 15 + - id: 16 name: dylan carlson src: thumbs-016.jpg - size: wide shop: false desc: Gig poster for drone legend Dylan Carlson, created for Room237. Created using pen and ink and coloured on Photoshop and Illustrator. modalImage: modal-015.jpg @@ -154,7 +121,6 @@ - id: 17 name: robot workshop src: thumbs-008.jpg - size: tall shop: true desc: Hand drawn illustration of a robot being built. This was exhibited at North Bar for an exhibition titled 'Under Construction'. Created using pigment pens and water colour. Giclee prints on art paper available to buy. modalImage: modal-014.jpg @@ -162,55 +128,34 @@ - id: 18 name: octopsss src: thumbs-017.jpg - size: wide shop: false desc: Computer illustrated picture of an Octopussssss. Created using Adobe Illustrator and Photoshop. modalImage: modal-016.jpg - - id: 17 - name: collapse - src: thumbs-018.jpg - size: small - shop: false - desc: Hand drawn illustration of head collapsing together in a circle with varying degrees of torment. Created using pen and ink - modalImage: modal-017.jpg - - - id: 18 + - id: 19 name: rat race src: thumbs-019.jpg - size: small shop: false desc: Computer illustrated picture of a rat working in the rat race. Created using Adobe Illustrator and Photoshop. modalImage: modal-018.jpg - - id: 19 + - id: 20 name: papa m house src: thumbs-020.jpg - size: tall shop: false desc: Gig poster for Slint legend Papa M, created for Room237. Created using Photoshop and Illustrator. I have massive screen printed posters of this for sale modalImage: modal-019.jpg - - id: 20 + - id: 21 name: bass overload src: thumbs-006.jpg - size: tall shop: false desc: Computer illustrated picture of what happens with too much bass. Created using Adobe Illustrator and Photoshop. modalImage: modal-020.jpg - - id: 21 - name: leaf insect - src: thumbs-001.jpg - size: large - shop: false - desc: Another gig poster for Leeds based gig promoters Northern Flowerhouse. This time featuring a leaf insect. Created using Illustrator and Photoshop. - modalImage: modal-021.jpg - - id: 22 name: crab man src: thumbs-023.jpg - size: wide shop: false desc: Crazy crab military bird nest something or other man illustration. I used pigment pens, a quill, a brush and platinum carbon ink, on heavy duty art paper. modalImage: modal-022.jpg @@ -218,7 +163,6 @@ - id: 23 name: tree man src: thumbs-024.jpg - size: wide shop: false desc: Hand drawn illustration of a colourful tree man. Created using pigment pens and water colour. modalImage: modal-023.jpg @@ -226,7 +170,6 @@ - id: 24 name: cosmic tree src: thumbs-025.jpg - size: small shop: false desc: Hand drawn detailed illustration of cosmic creature living a tree stump. I used pigment pens, a quill, a brush and platinum carbon ink, on heavy duty art paper. modalImage: modal-024.jpg @@ -234,7 +177,6 @@ - id: 25 name: stump creep src: thumbs-026.jpg - size: small shop: false desc: Hand drawn illustration of a creepy dude living in a tree stump. Created using pen, ink and watercolours. modalImage: modal-025.jpg @@ -242,7 +184,6 @@ - id: 26 name: tree head src: thumbs-027.jpg - size: wide shop: false desc: Hand drawn illustration of a guy with a tree stump growing from his head. Created using pen, ink and colouring pencils. modalImage: modal-026.jpg diff --git a/src/helpers/imageObjectFromArray.ts b/src/helpers/imageObjectFromArray.ts index f04bd299..8d6bc08e 100644 --- a/src/helpers/imageObjectFromArray.ts +++ b/src/helpers/imageObjectFromArray.ts @@ -11,13 +11,13 @@ interface GatsbyFixedReturn extends FixedObject { originalName: string; } -interface GatsbyFluidImageNode { +export interface GatsbyFluidImageNode { childImageSharp: { fluid: GatsbyFluidReturn; }; } -interface GatsbyFixedImageNode { +export interface GatsbyFixedImageNode { childImageSharp: { fixed: GatsbyFixedReturn; }; diff --git a/src/pages/gallery.tsx b/src/pages/gallery.tsx index f2cc15b9..04309ee4 100644 --- a/src/pages/gallery.tsx +++ b/src/pages/gallery.tsx @@ -1,23 +1,51 @@ import React, { useState } from 'react'; import { useStaticQuery, graphql } from 'gatsby'; - +import { FluidObject } from 'gatsby-image'; import CallToAction from '../components/call-to-action'; import GalleryItem from '../components/gallery-item'; import Modal from '../components/gallery-modal-content'; import Layout from '../components/layout'; -import { fixedImageObjectFromArray, fluidImageObjectFromArray } from '../helpers/imageObjectFromArray'; +import { fixedImageObjectFromArray, fluidImageObjectFromArray, GatsbyFluidImageNode } from '../helpers/imageObjectFromArray'; import SEO from '../components/seo'; export interface GalleryItemData { id: number; name: string; src: string; - size: string; + isLarge: boolean; shop: boolean; desc: string; + image: FluidObject; modalImage: string; } +const LARGE_ITEMS_PATTERN = [3, 9, 3, 5]; +const LARGE_ITEMS_PATTERN_LENGTH = LARGE_ITEMS_PATTERN.length; + +const indexesForLargeGridItems = (gridLength: number): number[] => { + const limitForLargeItems = gridLength - (gridLength % 10); // prevent orphaned small items + const largeItemsIndexes = []; + let currentGridIndex = 0; + + while (currentGridIndex < limitForLargeItems) { + largeItemsIndexes.push(currentGridIndex); + const patternIndex = (largeItemsIndexes.length - 1) % LARGE_ITEMS_PATTERN_LENGTH; + currentGridIndex += LARGE_ITEMS_PATTERN[patternIndex]; + } + + return largeItemsIndexes; +} + +const combineDataAndImages = (images: GatsbyFluidImageNode[], data: GalleryItemData[]) => { + const largeItemsIndexes = indexesForLargeGridItems(images.length); + const flattendImageData = fluidImageObjectFromArray(images); + return data.map((item, index) => ({ + ...item, + image: flattendImageData[item.src], + isLarge: largeItemsIndexes.includes(index), + })); +} + const Gallery = () => { const [selectedGalleryItemId, setSelectedGalleryItemId] = useState(0); const [isModalShowing, setIsModalShowing] = useState(false); @@ -29,7 +57,6 @@ const Gallery = () => { id name shop - size src desc modalImage @@ -59,7 +86,7 @@ const Gallery = () => { `); const modalLimit = data.gallery.length - 1; - const flattendImageData = fluidImageObjectFromArray(images.nodes); + const galleryData = combineDataAndImages(images.nodes, data.gallery); const flattendModalImageData = fixedImageObjectFromArray(modalImages.nodes); const selectGalleryItem = (id: number): void => { @@ -81,6 +108,8 @@ const Gallery = () => { } } + const { modalImage, ...selectedGalleryItem } = data.gallery[selectedGalleryItemId]; + const modalComponent = () => (
- {data.gallery.map((item: GalleryItemData) => (
+ {galleryData.map((item: GalleryItemData) => (
diff --git a/src/pages/shop.tsx b/src/pages/shop.tsx
index ce5f6346..09e041ba 100644
--- a/src/pages/shop.tsx
+++ b/src/pages/shop.tsx
@@ -2,9 +2,17 @@ import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import ShopItem, { ShopItemData } from '../components/shop-item';
import Layout from '../components/layout';
-import { fluidImageObjectFromArray } from '../helpers/imageObjectFromArray';
+import { fluidImageObjectFromArray, GatsbyFluidImageNode } from '../helpers/imageObjectFromArray';
import SEO from '../components/seo';
+const combineDataAndImages = (images: GatsbyFluidImageNode[], data: ShopItemData[]) => {
+ const flattendImageData = fluidImageObjectFromArray(images);
+ return data.map((item) => ({
+ ...item,
+ image: flattendImageData[item.url],
+ }));
+}
+
const Shop = (): JSX.Element => {
const { images, data } = useStaticQuery(graphql`
query {
@@ -32,19 +40,14 @@ const Shop = (): JSX.Element => {
}
`);
- const flattendImageData = fluidImageObjectFromArray(images.nodes);
+ const shopItems = combineDataAndImages(images.nodes, data.shop);
return (
- {data.shop.map((shopItem: ShopItemData) => (
-