chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add "download wallpaper" button

Browse Source
This commit is contained in:
Chuck Dries 2022-03-22 08:47:31 -07:00
parent 0870a38520
commit 21a541005e
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
1 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/GalleryImage/GalleryImage.js
View File

@ -28,6 +28,7 @@ const logKeyShortcut = (keyCode) => {
const GalleryImage = ({ data, pageContext }) => { const GalleryImage = ({ data, pageContext }) => {
const image = data.allFile.edges[0].node; const image = data.allFile.edges[0].node;
const ar = getAspectRatio(image); const ar = getAspectRatio(image);
console.log(image);
React.useEffect(() => { React.useEffect(() => {
const keyListener = (e) => { const keyListener = (e) => {
@ -60,13 +61,11 @@ const GalleryImage = ({ data, pageContext }) => {
}, [pageContext]); }, [pageContext]);
const name = getName(image); const name = getName(image);
const {meta, dateTaken: dt} = getMeta(image); const { meta, dateTaken: dt } = getMeta(image);
// const locationString = meta.City; // const locationString = meta.City;
let locationString; let locationString;
if (meta.City || meta.State || meta.Location) { if (meta.City || meta.State || meta.Location) {
const location = [meta.Location, meta.City, meta.State].filter( const location = [meta.Location, meta.City, meta.State].filter(Boolean);
Boolean
);
locationString = location.join(", "); locationString = location.join(", ");
} }
const vibrant = getVibrant(image, true); const vibrant = getVibrant(image, true);
@ -159,6 +158,13 @@ const GalleryImage = ({ data, pageContext }) => {
<h1 className="text-4xl mt-0 font-serif">{name}</h1> <h1 className="text-4xl mt-0 font-serif">{name}</h1>
)} )}
<p className="landscape:mr-2">{meta.Caption}</p> <p className="landscape:mr-2">{meta.Caption}</p>
<a
className="inline-block bg-muted-light text-vibrant-dark underline font-serif p-1 my-1 rounded"
download
href={image.publicURL}
>
Download wallpaper
</a>
</div> </div>
{ {
<div <div
@ -166,7 +172,7 @@ const GalleryImage = ({ data, pageContext }) => {
style={{ width: 30 }} style={{ width: 30 }}
></div> ></div>
} }
<div className='flex flex-col'> <div className="flex flex-col">
<MetadataItem <MetadataItem
data={dateTaken.toLocaleDateString()} data={dateTaken.toLocaleDateString()}
icon="calendar-outline" icon="calendar-outline"
@ -208,11 +214,7 @@ const GalleryImage = ({ data, pageContext }) => {
title="aperture" title="aperture"
/> />
)} )}
<MetadataItem <MetadataItem data={meta.ISO} icon="film-outline" title="ISO" />
data={meta.ISO}
icon="film-outline"
title="ISO"
/>
</div> </div>
</div> </div>
</div> </div>
@ -233,6 +235,7 @@ export const query = graphql`
edges { edges {
node { node {
base base
publicURL
childImageSharp { childImageSharp {
fluid { fluid {
aspectRatio aspectRatio