diff --git a/gatsby/src/pages/gallery.js b/gatsby/src/pages/gallery.js index 3452852..8ce7195 100644 --- a/gatsby/src/pages/gallery.js +++ b/gatsby/src/pages/gallery.js @@ -32,6 +32,8 @@ const GalleryPage = ({ data }) => {

Gallery

+ {/* TODO swap masonry plugin, this one makes really unbalanced columns */} + {/* ...implement manually :sadge: */} diff --git a/gatsby/src/templates/gallery-image.js b/gatsby/src/templates/gallery-image.js index b304f47..a33405e 100644 --- a/gatsby/src/templates/gallery-image.js +++ b/gatsby/src/templates/gallery-image.js @@ -1,6 +1,6 @@ import React from 'react' import { graphql } from 'gatsby' -import { getMeta, getName } from '../utils'; +import { getMeta, getName, hasName } from '../utils'; import { GatsbyImage, getImage } from 'gatsby-plugin-image' import { Helmet } from 'react-helmet'; import classnames from 'classnames' @@ -28,7 +28,6 @@ const GalleryImage = ({ data }) => { {/* TODO: change layout by amount of empty space on side of page, not aspect ratio? */}
1 ? 'flex-col' : 'flex-row-reverse')}>
-

{name}

{ alt={name} />
+ {hasName(image) &&

{name}

}

{getMeta(image).iptc.caption}

some other meta

@@ -67,7 +67,7 @@ export const query = graphql` layout: CONSTRAINED # placeholder: BLURRED # placeholder: DOMINANT_COLOR - # placeholder: TRACED_SVG + placeholder: TRACED_SVG height: 2048 ) fields { diff --git a/gatsby/src/utils.js b/gatsby/src/utils.js index 103676c..9a9cae9 100644 --- a/gatsby/src/utils.js +++ b/gatsby/src/utils.js @@ -1,3 +1,5 @@ export const getMeta = (image) => image.childImageSharp.fields.imageMeta -export const getName = (image) => getMeta(image)?.iptc.object_name || image.base \ No newline at end of file +export const getName = (image) => getMeta(image)?.iptc.object_name || image.base + +export const hasName = (image) => Boolean(getMeta(image)?.iptc.object_name) \ No newline at end of file