weseek__growi/packages/growi-plugin-attachment-refs

growi-plugin-attachment-refs

Install

1. install plugin

   yarn add growi-plugin-attachment-refs
   

2. build client app (see official documents)

Usage

ref tag

Syntax

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

Output

Options

• file : File name 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$/)

Output

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)

Output

<img src="/attachment/xxxxx" width="50%" alt="Pic">

Options

• file : File name 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)

Output

<ul>
  <li><img src="/attachment/xxxxx" style="max-width: 200"></li>
  <li><img src="/attachment/yyyyy" style="max-width: 200"></li>
  <li><img src="/attachment/zzzzz" style="max-width: 200"></li>
</ul>

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 100px tracks
  • autofill-2x : Grid layout with auto filling with 200px tracks
  • autofill-3x : Grid layout with auto filling with 300px tracks
  • autofill-4x : Grid layout with auto filling with 400px 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

TODO

• format option
• use react-images