Images section (#813)

* Add new configuration options
* Refactor scan/clean
* Schema changes
* Add details to galleries
* Remove redundant code
* Refine thumbnail generation
* Gallery overhaul
* Don't allow modifying zip gallery images
* Show gallery card overlays
* Hide zoom slider when not in grid mode
This commit is contained in:
WithoutPants
2020-10-13 10:12:46 +11:00
committed by GitHub
parent df3252e24f
commit aca2c7c5f4
147 changed files with 12483 additions and 946 deletions

View File

@@ -4,7 +4,7 @@ import FsLightbox from "fslightbox-react";
import "flexbin/flexbin.css";
interface IProps {
gallery: GQL.GalleryDataFragment;
gallery: Partial<GQL.GalleryDataFragment>;
}
export const GalleryViewer: React.FC<IProps> = ({ gallery }) => {
@@ -16,23 +16,27 @@ export const GalleryViewer: React.FC<IProps> = ({ gallery }) => {
setLightboxToggle(!lightboxToggle);
};
const photos = gallery.files.map((file) => file.path ?? "");
const thumbs = gallery.files.map((file, index) => (
<div
role="link"
tabIndex={index}
key={file.index}
onClick={() => openImage(index)}
onKeyPress={() => openImage(index)}
>
<img
src={`${file.path}?thumb=600` || ""}
loading="lazy"
className="gallery-image"
alt={file.name ?? index.toString()}
/>
</div>
));
const photos = !gallery.images
? []
: gallery.images.map((file) => file.paths.image ?? "");
const thumbs = !gallery.images
? []
: gallery.images.map((file, index) => (
<div
role="link"
tabIndex={index}
key={file.checksum ?? index}
onClick={() => openImage(index)}
onKeyPress={() => openImage(index)}
>
<img
src={file.paths.thumbnail ?? ""}
loading="lazy"
className="gallery-image"
alt={file.title ?? index.toString()}
/>
</div>
));
return (
<div className="gallery">
@@ -41,6 +45,7 @@ export const GalleryViewer: React.FC<IProps> = ({ gallery }) => {
sourceIndex={currentIndex}
toggler={lightboxToggle}
sources={photos}
key={gallery.id!}
/>
</div>
);