WIP put arrows on either side of gallery image
This commit is contained in:
parent
91c3de5544
commit
d1d14f1b8f
@ -166,7 +166,7 @@ const GalleryImage = ({
|
||||
>
|
||||
gallery <span className="bg-gray-300 text-black">esc</span>
|
||||
</Link>
|
||||
{prevImage && (
|
||||
{/* {prevImage && (
|
||||
<Link
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
||||
state={{
|
||||
@ -179,8 +179,8 @@ const GalleryImage = ({
|
||||
>
|
||||
previous <span className="bg-gray-300 text-black">⭠</span>
|
||||
</Link>
|
||||
)}
|
||||
{nextImage && (
|
||||
)} */}
|
||||
{/* {nextImage && (
|
||||
<Link
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
||||
state={{
|
||||
@ -193,127 +193,156 @@ const GalleryImage = ({
|
||||
>
|
||||
next <span className="bg-gray-300 text-black">⭢</span>
|
||||
</Link>
|
||||
)}
|
||||
)} */}
|
||||
</nav>
|
||||
<div className={classnames("flex", orientationClasses)}>
|
||||
<div
|
||||
className={classnames(
|
||||
zoom ? "cursor-zoom-out" : "cursor-zoom-in",
|
||||
"mb-2"
|
||||
)}
|
||||
onClick={() => setZoom((_zoom) => !_zoom)}
|
||||
style={{
|
||||
maxWidth: `calc(max(calc(100vh - ${verticalPad}), 500px) * ${ar})`,
|
||||
}}
|
||||
>
|
||||
{zoom ? (
|
||||
<img
|
||||
alt={name}
|
||||
src={image.publicURL}
|
||||
style={{
|
||||
width: canonicalSize.width / window.devicePixelRatio,
|
||||
maxWidth: "unset",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<GatsbyImage
|
||||
alt={name}
|
||||
className="border-4 border-vibrant"
|
||||
image={getImage(image)}
|
||||
key={image.base}
|
||||
loading="eager"
|
||||
objectFit="contain"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={classnames(
|
||||
"px-2 flex flex-row portrait:items-end mx-auto",
|
||||
ar <= 1
|
||||
? "pt-5 flex-col flex-auto text-right"
|
||||
: "landscape:container portrait:pt-5 portrait:flex-col portrait:text-right"
|
||||
)}
|
||||
>
|
||||
<div className="flex-auto mr-2">
|
||||
<p className="text-muted-light font-mono text-sm m-0 mt-1">
|
||||
{image.base}
|
||||
</p>
|
||||
{hasName(image) && (
|
||||
<h1 className="text-4xl mt-0 font-serif">{name}</h1>
|
||||
<div className="flex justify-between flex-auto items-center">
|
||||
{prevImage && (
|
||||
<Link
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1 self-stretch flex items-center bg-opacity-5 hover:bg-black"
|
||||
state={{
|
||||
currentIndex: currentIndex - 1,
|
||||
sortedImageList,
|
||||
filterKeyword,
|
||||
sortKey,
|
||||
}}
|
||||
to={`/photogallery/${prevImage}/`}
|
||||
>
|
||||
previous <span className="bg-gray-300 text-black">⭠</span>
|
||||
</Link>
|
||||
)}
|
||||
<div className={classnames("pb-2 flex", orientationClasses)}>
|
||||
<div
|
||||
className={classnames(
|
||||
zoom ? "cursor-zoom-out" : "cursor-zoom-in",
|
||||
"mb-2 self-center"
|
||||
)}
|
||||
<p className="landscape:mr-2">{meta.Caption}</p>
|
||||
<a
|
||||
className="cursor-pointer inline-block bg-muted-light text-vibrant-dark font-serif p-1 my-1 rounded"
|
||||
download
|
||||
href={image.publicURL}
|
||||
onClick={() => {
|
||||
try {
|
||||
window.plausible("Download Wallpaper", {
|
||||
props: { image: image.base },
|
||||
});
|
||||
} catch {
|
||||
// do nothing
|
||||
}
|
||||
}}
|
||||
>
|
||||
Download wallpaper
|
||||
</a>
|
||||
</div>
|
||||
{
|
||||
<div
|
||||
className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1"
|
||||
style={{ width: 30 }}
|
||||
></div>
|
||||
}
|
||||
<div className="flex flex-col items-end">
|
||||
<MetadataItem
|
||||
data={dateTaken.toLocaleDateString()}
|
||||
icon={<Calendar />}
|
||||
title="date taken"
|
||||
/>
|
||||
<div className="flex justify-end gap-2 border border-vibrant-light pl-2 rounded">
|
||||
<MetadataItem
|
||||
data={shutterSpeed}
|
||||
icon={<Stopwatch />}
|
||||
title="shutter speed"
|
||||
onClick={() => setZoom((_zoom) => !_zoom)}
|
||||
style={{
|
||||
maxWidth: `calc(max(calc(100vh - ${verticalPad}), 500px) * ${ar})`,
|
||||
}}
|
||||
>
|
||||
{zoom ? (
|
||||
<img
|
||||
alt={name}
|
||||
src={image.publicURL}
|
||||
style={{
|
||||
width: canonicalSize.width / window.devicePixelRatio,
|
||||
maxWidth: "unset",
|
||||
}}
|
||||
/>
|
||||
{meta.FNumber && (
|
||||
) : (
|
||||
<GatsbyImage
|
||||
alt={name}
|
||||
className="border-4 border-vibrant"
|
||||
image={getImage(image)}
|
||||
key={image.base}
|
||||
loading="eager"
|
||||
objectFit="contain"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={classnames(
|
||||
"px-2 flex flex-row portrait:items-end mx-auto",
|
||||
ar <= 1
|
||||
? "pt-5 flex-col flex-auto text-right"
|
||||
: "landscape:container portrait:pt-5 portrait:flex-col portrait:text-right"
|
||||
)}
|
||||
>
|
||||
<div className="flex-auto mr-2">
|
||||
<p className="text-muted-light font-mono text-sm m-0 mt-1">
|
||||
{image.base}
|
||||
</p>
|
||||
{hasName(image) && (
|
||||
<h1 className="text-4xl mt-0 font-serif">{name}</h1>
|
||||
)}
|
||||
<p className="landscape:mr-2">{meta.Caption}</p>
|
||||
<a
|
||||
className="cursor-pointer inline-block bg-muted-light text-vibrant-dark font-serif p-1 my-1 rounded"
|
||||
download
|
||||
href={image.publicURL}
|
||||
onClick={() => {
|
||||
try {
|
||||
window.plausible("Download Wallpaper", {
|
||||
props: { image: image.base },
|
||||
});
|
||||
} catch {
|
||||
// do nothing
|
||||
}
|
||||
}}
|
||||
>
|
||||
Download wallpaper
|
||||
</a>
|
||||
</div>
|
||||
{
|
||||
<div
|
||||
className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1"
|
||||
style={{ width: 30 }}
|
||||
></div>
|
||||
}
|
||||
<div className="flex flex-col items-end">
|
||||
<MetadataItem
|
||||
data={dateTaken.toLocaleDateString()}
|
||||
icon={<Calendar />}
|
||||
title="date taken"
|
||||
/>
|
||||
<div className="flex justify-end gap-2 border border-vibrant-light pl-2 rounded">
|
||||
<MetadataItem
|
||||
data={`f/${meta.FNumber}`}
|
||||
icon={<Exposure />}
|
||||
title="aperture"
|
||||
data={shutterSpeed}
|
||||
icon={<Stopwatch />}
|
||||
title="shutter speed"
|
||||
/>
|
||||
{meta.FNumber && (
|
||||
<MetadataItem
|
||||
data={`f/${meta.FNumber}`}
|
||||
icon={<Exposure />}
|
||||
title="aperture"
|
||||
/>
|
||||
)}
|
||||
<MetadataItem data={meta.ISO} icon={<Filmroll />} title="ISO" />
|
||||
</div>
|
||||
<MetadataItem
|
||||
data={locationString}
|
||||
icon={<Location />}
|
||||
title="location"
|
||||
/>
|
||||
{(meta.Make || meta.Model) && (
|
||||
<MetadataItem
|
||||
data={[meta.Make, meta.Model].join(" ")}
|
||||
icon={<Camera />}
|
||||
title="camera"
|
||||
/>
|
||||
)}
|
||||
{(meta.LensModel || meta.FocalLength) && (
|
||||
<MetadataItem
|
||||
data={[
|
||||
meta.LensModel === "----" ? null : meta.LensModel,
|
||||
meta.FocalLength && `${meta.FocalLength}mm`,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" @")}
|
||||
icon={<Circle />}
|
||||
title="lens"
|
||||
/>
|
||||
)}
|
||||
<MetadataItem data={meta.ISO} icon={<Filmroll />} title="ISO" />
|
||||
</div>
|
||||
<MetadataItem
|
||||
data={locationString}
|
||||
icon={<Location />}
|
||||
title="location"
|
||||
/>
|
||||
{(meta.Make || meta.Model) && (
|
||||
<MetadataItem
|
||||
data={[meta.Make, meta.Model].join(" ")}
|
||||
icon={<Camera />}
|
||||
title="camera"
|
||||
/>
|
||||
)}
|
||||
{(meta.LensModel || meta.FocalLength) && (
|
||||
<MetadataItem
|
||||
data={[
|
||||
meta.LensModel === "----" ? null : meta.LensModel,
|
||||
meta.FocalLength && `${meta.FocalLength}mm`,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" @")}
|
||||
icon={<Circle />}
|
||||
title="lens"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{nextImage && (
|
||||
<Link
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1 self-stretch flex items-center bg-opacity-5 hover:bg-black"
|
||||
state={{
|
||||
currentIndex: currentIndex + 1,
|
||||
sortedImageList,
|
||||
filterKeyword,
|
||||
sortKey,
|
||||
}}
|
||||
to={`/photogallery/${nextImage}/`}
|
||||
>
|
||||
next <span className="bg-gray-300 text-black">⭢</span>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user