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

fix metaitem and improve gallery dangling rows

Browse Source
This commit is contained in:
Chuck Dries 2021-07-10 09:51:55 -07:00
parent 2d89e3ff4c
commit c4e91d14d8
3 changed files with 9 additions and 10 deletions

4
src/components/GalleryImage/GalleryImage.js

@ -129,10 +129,10 @@ const GalleryImage = ({ data, pageContext }) => {
<p className="landscape:mr-2">{meta.iptc.caption}</p>
</div>
{<div className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1" style={{width: 30}}></div>}
<MetadataItem aspectRatio={ar} data={dateTaken} icon="calendar-sharp" title="date taken"/>
<MetadataItem aspectRatio={ar} data={dateTaken.toLocaleDateString()} icon="calendar-sharp" title="date taken"/>
<MetadataItem aspectRatio={ar} data={locationString} icon="location-sharp" title="location"/>
<MetadataItem aspectRatio={ar} data={shutterSpeed} icon="stopwatch-sharp" title="shutter speed" />
<MetadataItem aspectRatio={ar} data={meta.exif.FNumber} icon="aperture-sharp" title="aperture" />
<MetadataItem aspectRatio={ar} data={`f/${meta.exif.FNumber}`} icon="aperture-sharp" title="aperture" />
<MetadataItem aspectRatio={ar} data={meta.exif.ISO} icon="film-outline" title="ISO" />
</div>
</div>

2
src/components/GalleryImage/MetadataItem.js

@ -14,7 +14,7 @@ const MetadataItem = ({
<span className="icon-offset mr-1">
<ion-icon name={icon}></ion-icon>
</span>
<span className="mr-1">f/{data}</span>
<span className="mr-1">{data}</span>
</div>
) : null;

13
src/components/MasonryGallery.js

@ -37,14 +37,13 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
const rowAspectRatioSum = rowAspectRatioSumsForCurrentBP[rowIndex];
// const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10);
const ar = getAspectRatio(image);
const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(5);
const widthNumber = rowAspectRatioSum === ar
// image is only one in row
? 100 / itemsPerRow
// image is one of several in row
: ((ar / rowAspectRatioSum) * 100).toFixed(5);
const width = `${widthNumber}%`;
// const width = `${widthNumber}%`;
// console.log('ars', rowAspectRatioSum);
if (i === 0) {
// console.log(rowIndex, rowAspectRatioSum);
// console.log(getName(image), width);
}
return (
<Link
className="inline-block"