@mindful-web/marko-web-photoswipe

Mindful Web Marko Wrapper for Photoswipe

Installation

• Include @mindful-web/marko-web-photoswipe as a project/website dependency.

• Include the Browser plugin.

// your-site/browser/index.js
import PhotoSwipe from '@mindful-web/marko-web-photoswipe/browser';

PhotoSwipe(Browser);

export default Browser;

• Include the styles.

// your-site/server/styles/index.scss
@import "@mindful-web/marko-web-photoswipe/scss/main";

• If you're using the default theme (or something similar) you'll need to adjust the photoswipe z-index:

$pswp__root-z-index: $theme-site-header-z-index + 1 !default;
@import "@mindful-web/marko-web-photoswipe/scss/main";

Usage

Create a Content Image Gallery

You must specify a body gallery ID as well as an image selector.

• On the page contents, append a unique gallery ID and display some images, e.g.:

<default-theme-page-contents attrs={ "data-gallery-id": content.id }>
  <marko-web-page-image width=720 obj=content.primaryImage />
  <marko-web-content-body obj=content />
</default-theme-page-contents>

• Immediately after this block, load the gallery component:

import { getAsArray } from "@mindful-web/object-path";

$ const images = resolved.getEdgeNodesFor("images");

<marko-web-photoswipe-images images=images>
  <@props thumbnail-click-selectors=`[data-gallery-id="${id}"] [data-image-id]` />
</marko-web-photoswipe-images>

• Make sure you're returning the images from GraphQL

const gql = require('graphql-tag');

module.exports = gql`
fragment ContentPageFragment on Content {
  id
  name
  images(input:{ pagination: { limit: 100 }, sort: { order: values } }) {
    edges {
      node {
        id
        src
        alt
        displayName
        caption
        credit
      }
    }
  }
}
`;