Skip to content
This repository has been archived by the owner on Oct 7, 2022. It is now read-only.

GROWI Plugin to list attachments and show image gallery

License

Notifications You must be signed in to change notification settings

growilabs/growi-plugin-attachment-refs

Repository files navigation

DEPRECATED: This package was moved to @growi/plugin-attachment-refs

growi-plugin-attachment-refs

MIT License

Install

  1. install plugin

    yarn add growi-plugin-attachment-refs
    yarn add -D react-images@1.0.0 react-motion
  2. build client app (see official documents)

Examples

List attachments

refs

Extract image attachments

refsimg

Image Carousel

lightbox

Usage

$ref tag

Syntax

$ref(file.txt)
$ref(file.txt, page=/somewhere/page)
$ref(5f17286fd7fbb1104fdbd111, page=/somewhere/page)

Options

  • file : File name of reference file (default: the first argument)
  • id : Attachment ID of reference file (default: the first argument)
  • page : Target page path of reference file (default: current page)

$refs tag

Syntax

$refs(/somewhere/page, regexp=/^file.*\.txt$/)

Options

  • page : Target page path to search attachments (default: the first argument || current page)
  • prefix : Page prefix to search attachments
  • depth : page depth to search attachments
  • regexp : Regular Expression to retrieve
  • (TBD) format : File format filtering

$refimg tag

Syntax

$refimg(pict.png, width=50%, alt=Pic)
$refimg(5f17286fd7fbb1104fdbd111, width=50%, alt=Pic)

Options

  • file : File name of reference file (default: the first argument)
  • id : Attachment ID of reference file (default: the first argument)
  • width : width
  • height : height
  • max-width : max-width
  • max-height : max-height
  • alt : alt text

$refsimg tag

Syntax

$refsimg(/somewhere/page, regexp=/^.*\.png$/, max-width=200)
$refsimg(prefix=/somewhere, grid=autofill, grid-gap=1px)

Options

  • page : Target page path to search attachments (default: the first argument || current page)
  • prefix : Page prefix to search attachments
  • depth : page depth to search attachments
  • regexp : Regular Expression to retrieve
  • (TBD) format : File format filtering
  • width : width
    • e.g. width=200px, width=50%
  • height : height
    • e.g. height=100px
  • max-width : max-width
    • e.g. max-width=200px, max-width=50%
  • max-height : max-height
    • e.g. max-height=100px
  • display : display property for image (use display: block when undefined)
    • This option is disabled when grid option is set.
  • grid : Grid layout settings
    • autofill : Grid layout with auto filling with 64px tracks
    • autofill-xs : Grid layout with auto filling with 32px tracks
    • autofill-sm : Grid layout with auto filling with 48px tracks
    • autofill-md : Grid layout with auto filling with 64px tracks
    • autofill-lg : Grid layout with auto filling with 128px tracks
    • autofill-xl : Grid layout with auto filling with 192px tracks
    • col-2 : Grid layout with 2 columns
    • col-3 : Grid layout with 3 columns
    • col-4 : Grid layout with 4 columns
    • col-5 : Grid layout with 5 columns
    • col-6 : Grid layout with 6 columns
  • grid-gap : Grid gap
    • e.g. grid-gap=1px
  • no-carousel : Omit carousel function and just show images

$gallery tag

gallery

Short-hand for $refsimg(grid=col4, grid-gap=1px).

Syntax

$gallery(prefix=/somewhere/page)

Options

See the options of refsimg

TODO

  • format option