WIP put arrows on either side of gallery image
This commit is contained in:
@@ -166,7 +166,7 @@ const GalleryImage = ({
|
|||||||
>
|
>
|
||||||
gallery <span className="bg-gray-300 text-black">esc</span>
|
gallery <span className="bg-gray-300 text-black">esc</span>
|
||||||
</Link>
|
</Link>
|
||||||
{prevImage && (
|
{/* {prevImage && (
|
||||||
<Link
|
<Link
|
||||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
||||||
state={{
|
state={{
|
||||||
@@ -179,8 +179,8 @@ const GalleryImage = ({
|
|||||||
>
|
>
|
||||||
previous <span className="bg-gray-300 text-black">⭠</span>
|
previous <span className="bg-gray-300 text-black">⭠</span>
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)} */}
|
||||||
{nextImage && (
|
{/* {nextImage && (
|
||||||
<Link
|
<Link
|
||||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
||||||
state={{
|
state={{
|
||||||
@@ -193,127 +193,156 @@ const GalleryImage = ({
|
|||||||
>
|
>
|
||||||
next <span className="bg-gray-300 text-black">⭢</span>
|
next <span className="bg-gray-300 text-black">⭢</span>
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)} */}
|
||||||
</nav>
|
</nav>
|
||||||
<div className={classnames("flex", orientationClasses)}>
|
<div className="flex justify-between flex-auto items-center">
|
||||||
<div
|
{prevImage && (
|
||||||
className={classnames(
|
<Link
|
||||||
zoom ? "cursor-zoom-out" : "cursor-zoom-in",
|
className="hover:underline text-vibrant-light hover:text-muted-light mx-1 self-stretch flex items-center bg-opacity-5 hover:bg-black"
|
||||||
"mb-2"
|
state={{
|
||||||
)}
|
currentIndex: currentIndex - 1,
|
||||||
onClick={() => setZoom((_zoom) => !_zoom)}
|
sortedImageList,
|
||||||
style={{
|
filterKeyword,
|
||||||
maxWidth: `calc(max(calc(100vh - ${verticalPad}), 500px) * ${ar})`,
|
sortKey,
|
||||||
}}
|
}}
|
||||||
>
|
to={`/photogallery/${prevImage}/`}
|
||||||
{zoom ? (
|
>
|
||||||
<img
|
previous <span className="bg-gray-300 text-black">⭠</span>
|
||||||
alt={name}
|
</Link>
|
||||||
src={image.publicURL}
|
)}
|
||||||
style={{
|
<div className={classnames("pb-2 flex", orientationClasses)}>
|
||||||
width: canonicalSize.width / window.devicePixelRatio,
|
<div
|
||||||
maxWidth: "unset",
|
className={classnames(
|
||||||
}}
|
zoom ? "cursor-zoom-out" : "cursor-zoom-in",
|
||||||
/>
|
"mb-2 self-center"
|
||||||
) : (
|
|
||||||
<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>
|
onClick={() => setZoom((_zoom) => !_zoom)}
|
||||||
<a
|
style={{
|
||||||
className="cursor-pointer inline-block bg-muted-light text-vibrant-dark font-serif p-1 my-1 rounded"
|
maxWidth: `calc(max(calc(100vh - ${verticalPad}), 500px) * ${ar})`,
|
||||||
download
|
}}
|
||||||
href={image.publicURL}
|
>
|
||||||
onClick={() => {
|
{zoom ? (
|
||||||
try {
|
<img
|
||||||
window.plausible("Download Wallpaper", {
|
alt={name}
|
||||||
props: { image: image.base },
|
src={image.publicURL}
|
||||||
});
|
style={{
|
||||||
} catch {
|
width: canonicalSize.width / window.devicePixelRatio,
|
||||||
// do nothing
|
maxWidth: "unset",
|
||||||
}
|
}}
|
||||||
}}
|
|
||||||
>
|
|
||||||
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"
|
|
||||||
/>
|
/>
|
||||||
{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
|
<MetadataItem
|
||||||
data={`f/${meta.FNumber}`}
|
data={shutterSpeed}
|
||||||
icon={<Exposure />}
|
icon={<Stopwatch />}
|
||||||
title="aperture"
|
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>
|
</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>
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user