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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -129,10 +129,10 @@ const GalleryImage = ({ data, pageContext }) => {
<p className="landscape:mr-2">{meta.iptc.caption}</p> <p className="landscape:mr-2">{meta.iptc.caption}</p>
</div> </div>
{<div className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1" style={{width: 30}}></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={locationString} icon="location-sharp" title="location"/>
<MetadataItem aspectRatio={ar} data={shutterSpeed} icon="stopwatch-sharp" title="shutter speed" /> <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" /> <MetadataItem aspectRatio={ar} data={meta.exif.ISO} icon="film-outline" title="ISO" />
</div> </div>
</div> </div>

2
src/components/GalleryImage/MetadataItem.js
View File

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

13
src/components/MasonryGallery.js
View File

@ -37,14 +37,13 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
const rowAspectRatioSum = rowAspectRatioSumsForCurrentBP[rowIndex]; const rowAspectRatioSum = rowAspectRatioSumsForCurrentBP[rowIndex];
// const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10); // const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10);
const ar = getAspectRatio(image); 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}%`;
// const width = `${widthNumber}%`;
// console.log('ars', rowAspectRatioSum);
if (i === 0) {
// console.log(rowIndex, rowAspectRatioSum);
// console.log(getName(image), width);
}
return ( return (
<Link <Link
className="inline-block" className="inline-block"