growi-plugin-attachment-refs

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

Extract image attachments

Image Carousel

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

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

Syntax

$gallery(prefix=/somewhere/page)

Options

See the options of refsimg

TODO

• [ ] format option