-
-
Notifications
You must be signed in to change notification settings - Fork 57
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4aa502e
commit 2094d1b
Showing
21 changed files
with
333 additions
and
122 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| --- | ||
| import { Image } from '@astrojs/image/components' | ||
| import exifr from 'exifr' | ||
| import 'photoswipe/style.css' | ||
| import 'photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css' | ||
| export interface Props { | ||
| images: string[] | ||
| } | ||
| const { images } = Astro.props | ||
| const imageFiles = import.meta.glob<ImageMetadata>('../images/**/*.{png,webp,jpg,jpeg}', { import: 'default', eager: true }) | ||
| const folderFiles = Object.keys(imageFiles).filter(image => images.includes(image)) | ||
| const imageSrc = images.map(image => imageFiles[image]) | ||
| const imagetitles = folderFiles.map(image => image.slice(0, image.lastIndexOf('.')).slice(image.lastIndexOf('/') + 1)) | ||
| // console.log(images) | ||
| const exifs = [] as Record<string, any>[] | ||
| for (let i in folderFiles) { | ||
| const exif = await exifr.parse(folderFiles[i].replace('../', './src/')) | ||
| exifs.push(exif) | ||
| } | ||
| // console.log(exifs) | ||
| --- | ||
| <style> | ||
| .pswp--custom-icon-colors { | ||
| --pswp-icon-color: #eee; | ||
| --pswp-icon-color-secondary: #663399; | ||
| } | ||
|
|
||
| .pswp__dynamic-caption--aside { | ||
| max-width: 300px; | ||
| padding: 20px 15px 20px 20px; | ||
| margin-top: 70px; | ||
| } | ||
|
|
||
| .pswp__dynamic-caption--below { | ||
| max-width: 700px; | ||
| padding: 15px 0 0; | ||
| } | ||
|
|
||
| .pswp__dynamic-caption--mobile { | ||
| background: rgba(0, 0, 0, 0.5); | ||
| padding: 10px 15px; | ||
| } | ||
| </style> | ||
| <p class="text-sm text-gray-500 italic">Please click on any photo to view in a lightbox. Use arrow keys or swipe to navigate.</p> | ||
| <div id="gallery" class="w-full block not-prose" itemscope itemtype="http://schema.org/ImageGallery"> | ||
| {imageSrc.map((image, i) => ( | ||
| <figure itemscope itemtype="http://schema.org/ImageObject" class="inline-block text-gray-800 dark:text-gray-300 bg-gray-300 dark:bg-gray-800 text-sm text-center italic rounded"> | ||
| <a href={image.src} itemprop="contentUrl" data-pswp-width={image.width} data-pswp-height={image.height}> | ||
| <Image src={image} alt={imagetitles[i]} format="webp" class="rounded" /> | ||
| <span class="pswp-caption-content"> | ||
| {imagetitles[i]} | ||
| {exifs[i] && exifs[i].Make && <span>{' (' + exifs[i].Make + ' ' + exifs[i].Model + ')'}</span>} | ||
| </span> | ||
| </a> | ||
| <figcaption itemprop="caption description" class="rounded"> | ||
| {imagetitles[i]} | ||
| </figcaption> | ||
| </figure> | ||
|
|
||
| ))} | ||
| </div> | ||
| <script> | ||
| import PhotoSwipeLightbox from 'photoswipe/lightbox' | ||
| import PhotoSwipeDynamicCaption from 'photoswipe-dynamic-caption-plugin' | ||
|
|
||
| const lightbox = new PhotoSwipeLightbox({ | ||
| mainClass: 'pswp--custom-icon-colors', | ||
| gallerySelector: '#gallery', | ||
| childSelector: 'a', | ||
| pswpModule: () => import('photoswipe'), | ||
| paddingFn: (viewportSize) => { | ||
| return { | ||
| top: 0, bottom: 30, left: 0, right: 0 | ||
| } | ||
| } | ||
| }) | ||
|
|
||
| const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, { | ||
| captionContent: '.pswp-caption-content', | ||
| type: 'below', | ||
| }); | ||
|
|
||
| lightbox.init() | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| --- | ||
| import type { CollectionEntry } from 'astro:content' | ||
| export interface Props { | ||
| base: string | ||
| prev: CollectionEntry<'blog'> | ||
| next: CollectionEntry<'blog'> | ||
| } | ||
| const { base, prev, next } = Astro.props | ||
| --- | ||
|
|
||
| <dl class="mt-12 flex border-t border-purple-300 pt-6 dark:border-purple-700" > | ||
| { | ||
| prev && ( | ||
| <div class="mr-auto text-left"> | ||
| <dt class="font-display text-sm font-medium text-gray-800 dark:text-gray-200"> | ||
| Prev | ||
| </dt> | ||
| <dd class="mt-1"> | ||
| <a | ||
| class="text-base font-semibold text-purple-600 hover:text-pink-600 hover:bg-purple-200 dark:text-purple-300" | ||
| href={base + prev.slug} | ||
| > | ||
| <span aria-hidden="true">←</span> | ||
| {prev.data.title} | ||
| </a> | ||
| </dd> | ||
| </div> | ||
| ) | ||
| } | ||
| { | ||
| next && ( | ||
| <div class="ml-auto text-right"> | ||
| <dt class="font-display text-sm font-medium text-gray-800 dark:text-gray-200"> | ||
| Next | ||
| </dt> | ||
| <dd class="mt-1"> | ||
| <a | ||
| class="text-base font-semibold text-purple-600 hover:text-pink-600 hover:bg-purple-200 dark:text-purple-300" | ||
| href={base + next.slug} | ||
| > | ||
| {next.data.title} | ||
| <span aria-hidden="true">→</span> | ||
| </a> | ||
| </dd> | ||
| </div> | ||
| ) | ||
| } | ||
| </dl> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 25 additions & 0 deletions
25
src/content/blog/2022-08-22-sample-gallery-post-markdown.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| --- | ||
| layout: ../../layouts/blog.astro | ||
| title: Sample Gallery post (Markdown!) | ||
| description: Test post with a photo gallery and lightbox (using PhotoSwipe) | ||
| author: Chris Tham | ||
| publishDate: 2022-08-22T00:00:00.000Z | ||
| coverSVG: ../svg/undraw/undraw_portfolio.svg | ||
| socialImage: ../images/undraw/undraw_portfolio.png | ||
| gallery: apollo11 | ||
| categories: | ||
| - information | ||
| tags: | ||
| - mdx | ||
| - sample | ||
| --- | ||
|
|
||
| ## Gallery with Lightbox | ||
|
|
||
| The following is a gallery of photos taken from the event Apollo 11 at Barangaroo, displayed in conjunction with the Sydney Festival 2019. | ||
|
|
||
| The collective adventure that is space travel has many more heroes than the two men who walked on the moon in 1969. | ||
|
|
||
| Apollo 11 at Barangaroo pays tribute to the diverse and under-appreciated heroes of space travel, from astronauts to mathematicians and beyond. | ||
|
|
||
| Sydney Festival has commissioned artworks and participatory experiences, free for the public to explore around Barangaroo, as part of a city-wide commemoration of Apollo 11, the 1969 space flight that first landed people on the moon. |
Oops, something went wrong.