Skip to content

Fields

1. Text Field

Настройка:

textfield

Вывод:

textfield output

В чанке:

html
{$title}

2. Textarea Field

Settings:

textarea

Result:

textarea output

Output:

html
{$description}

3. RichText Field

Component support:

  • TinyMCE Rich Text Editor

Settings:

richtext

Result:

richtext output

Output:

html
{$content}

4. Ace Field

The field appears if the ACE component is installed.

Settings:

ace

Result:

ace output

Output:

html
{$code}

5. Select Field

Settings:

listbox

Result:

listbox output

Output:

html
{$color}

But that's not all!

You can use:

SELECT Binding

listbox@select

FILE Binding

php
@FILE assets/news/headline_news.txt

ClientConfig

Configuration:

ClientConfig color

Settings:

listbox config

Result:

listbox config output

6. MultiSelect Field

The same as the Select Field, but allows you to select multiple options.

MultiSelect output

Output:

html
{foreach $colors as $color}
    {$color}
{/foreach}

7. Resource List

A list of resources is displayed. You can change the sort order and add conditions.

Settings:

resourcelist

Result:

listbox

In the chunk, the resource ID is displayed:

html
{$resource}

8. Ready blocks

We get a list of ready blocks, which can be filtered and the sorting direction can be changed.

Settings:

resourcelist

Result:

textfield

In the chunk, the ID of the predefined block is displayed:

html
{$block}

9. List Yes/No

Settings:

resourcelist

Result:

listbox output

The chunk outputs 1 or 0:

html
{$check}

10. Number Field

Settings:

numberfield

Additional settings:

  • negative numbers
  • minimum number
  • maximum number

Result:

numberfield output

Output:

html
{$number}

11. Checkbox

Settings:

xcheckbox

Result:

xcheckbox output

The chunk outputs 1 or 0:

html
{$check}

12. Checkbox group

Settings:

checkboxgroup

Additional settings:

  • Number of columns

You can use the following values:

Result:

checkboxgroup output

Output:

html
{foreach $colors as $color}
    {$color}
{/foreach}

13. Radio Options

Settings:

radiogroup

Additional settings:

  • Number of columns

As values, you can use:

Result:

radiogroup output

Output:

html
{$color}

14. File Field

file

Additional settings:

  • Source (file source)
  • File path (path to files from the root of the selected source)
    • [[+resource_id]] - is replaced by the resource id
    • [[+id]] - block id

When adding the parameters [[+resource_id]] or [[+id]], the path will be replaced with the corresponding value.

Result:

file output

Output:

php
{$file}

15. Image Field

The Image field extends the File Field and accepts the same settings. Unlike the File field, a thumbnail of the main image will be displayed:

image info

Output:

php
{$image|print}

[image] => Array
(
    [url] => assets/images/1/29/8851807-4002676.jpg
    [width] => 800
    [height] => 533
    [size] => 664412
    [title] => 8851807-4002676.jpg
)

Example:

html
<img src="{$image.url}" width="{$image.width}" height="{$image.height}" alt="{$image.title}">

Images

It has the same settings as the File Field, with the additional setting for file groups.

gallery

Result:

gallery output

Each image is edited separately:

gallery info

Output:

php
{$images|print}

[images] => Array
(
    [0] => Array
        (
            [id] => 29
            [path] => assets/images/1/34/
            [filename] => z2ovxw9d7dk.jpg
            [extension] => jpg
            [provider] => 
            [name] => z2ovxw9d7dk
            [title] => 
            [description] => 
            [width] => 600
            [height] => 405
            [size] => 27414
            [url] => assets/images/1/34/z2ovxw9d7dk.jpg
            [preview] => 
            [type] => image
            [groups] => ["1","2"]
        )

    [1] => Array
        (
            [id] => 30
            [path] => assets/images/1/34/
            [filename] => 8417304-bones-brigade-brigade-by-cuypi-t60cd82c6.jpg
            [extension] => jpg
            [provider] => 
            [name] => 8417304-bones-brigade-brigade-by-cuypi-t60cd82c6
            [title] => 
            [description] => 
            [width] => 600
            [height] => 684
            [size] => 87373
            [url] => assets/images/1/34/8417304-bones-brigade-brigade-by-cuypi-t60cd82c6.jpg
            [preview] => 
            [type] => image
            [groups] => 0
        )
...

Example:

html
<div class="gallery">
  {foreach $images as $image}
    <img src="{$image.url}" width="{$image.width}" height="{$image.height}" alt="{$image.title?:$image.name}">
  {/foreach}
</div>

Other files

The gallery can hold not only images but also any other files:

gallery output other

For each file, its type will be set (see the type parameter).

php
[images] => Array
(
    [0] => Array
        (
            [id] => 49
            [path] => assets/images/1/36/
            [filename] => img-0915.mp4
            [extension] => mp4
            [provider] => 
            [name] => img-0915
            [title] => 
            [description] => 
            [width] => 0
            [height] => 0
            [size] => 2322184
            [url] => assets/images/1/36/img-0915.mp4
            [preview] => assets/images/1/33/z2ovxw9d7dk.jpg
            [type] => video
            [groups] => 0
        )

    [1] => Array
        (
            [id] => 50
            [path] => assets/images/1/36/
            [filename] => nqooxxb4li.jpg
            [extension] => jpg
            [provider] => 
            [name] => nqooxxb4li
            [title] => 
            [description] => 
            [width] => 600
            [height] => 727
            [size] => 100893
            [url] => assets/images/1/36/nqooxxb4li.jpg
            [preview] => 
            [type] => image
            [groups] => 0
        )

    [2] => Array
        (
            [id] => 52
            [path] => assets/images/1/36/
            [filename] => phpbook.pdf
            [extension] => pdf
            [provider] => 
            [name] => phpbook
            [title] => 
            [description] => 
            [width] => 0
            [height] => 0
            [size] => 950015
            [url] => assets/images/1/36/phpbook.pdf
            [preview] => 
            [type] => pdf
            [groups] => 0
        )

)

Example:

html
{foreach $images as $item}

  {if $item.type === 'image'}
    <img src="{$item.url}" width="{$item.width}" height="{$item.height}" alt="{$item.title?:$item.name}">
  {/if}

  {if $item.type === 'video'}
    <video width="{$item.width}" height="{$item.height}" poster="{$item.preview}" controls>
      <source src="{$item.url}" type="video/{$item.extension}">
    </video>
  {/if}

  {if $item.type === 'pdf'}
      <a href="{$item.url}" download="{$item.name}" target="_blank"></a>
  {/if}

{/foreach}

Video

If you've uploaded a video, you can change its preview.

gallery output video

php
Array
  (
      [id] => 53
      [path] => assets/images/1/36/
      [filename] => img-0915.mp4
      [extension] => mp4
      [provider] => 
      [name] => Video file
      [title] => 
      [description] => 
      [width] => 0
      [height] => 0
      [size] => 2322184
      [url] => assets/images/1/36/img-0915.mp4
      [preview] => assets/images/1/33/z2ovxw9d7dk.jpg
      [type] => video
      [groups] => 0
  )

17. Video Field

The Video field extends the File Field and accepts the same settings.

video output

Provider Support

  • YouTube
  • Vimeo

video youtube

Preview:

video preview

Output:

php
{$video|print}

Array
(
    [provider] => youtube
    [title] => DEAD STRINGS VOL 3 | Epic Dramatic Violin Epic Music Mix | Best Dramatic Strings Orchestral
    [description] => 
    [thumbnail] => Array
        (
            [default] => Array
                (
                    [url] => https://i.ytimg.com/vi/u0_itJO_8Jw/default.jpg
                    [width] => 120
                    [height] => 90
                )

            [medium] => Array
                (
                    [url] => https://i.ytimg.com/vi/u0_itJO_8Jw/mqdefault.jpg
                    [width] => 320
                    [height] => 180
                )

            [high] => Array
                (
                    [url] => https://i.ytimg.com/vi/u0_itJO_8Jw/hqdefault.jpg
                    [width] => 480
                    [height] => 360
                )

            [standard] => Array
                (
                    [url] => https://i.ytimg.com/vi/u0_itJO_8Jw/sddefault.jpg
                    [width] => 640
                    [height] => 480
                )

            [maxres] => Array
                (
                    [url] => https://i.ytimg.com/vi/u0_itJO_8Jw/maxresdefault.jpg
                    [width] => 1280
                    [height] => 720
                )

        )

    [preview] => https://i.ytimg.com/vi/u0_itJO_8Jw/hqdefault.jpg
    [url] => https://www.youtube.com/watch?v=u0_itJO_8Jw
    [embed_video] => https://www.youtube.com/embed/u0_itJO_8Jw
    [video_id] => u0_itJO_8Jw
    [width] => 600
    [height] => 400
)

Examples

Youtube

html
<iframe src="{$video.embed_video}" frameborder="0" width="{$video.width}" height="{$video.height}"></iframe>

A regular video

html
<video width="{$video.width}" height="{$video.height}" poster="{$video.preview}" controls>
  <source src="{$video.url}" type="video/{$video.extension}">
</video>

18. Button Field

Settings:

button

Result:

button output

Output:

php
{$button|print}

Array
(
    [caption] => Text
    [type] => button
    [file] => 
    [href] => 
    [name] => name
    [attr] => data-popup-open="form"
    [resource] => 2
    [value] => value
    [classes] => btn-primary
    [published] => 1
    [disabled] => 0
    [target_blank] => 1
)

Example:

html
{if $button.published}
  <a 
      href="{$button.href?:($button.resource|resource:'uri')}"
      class="btn {$button.classes}"
      {$button.attr} 
      {if $button.target_blank} target="_blank"{/if}
  >
    {$button.text}
  </a>
{/if}

19. Date Field

Settings:

  • Disabled Dates: makes specified dates inactive. The date format depends on the system setting manager_date_format.
  • Disabled Days: makes specified days of the week inactive. 0 is Sunday, 6 is Saturday.
  • Hide Time Option: shows or hides the time field.
  • Min. time: minimum time
  • Max. time: maximum time
  • Time increment: The number of minutes between each time value in the list.

date

Result:

date output

Output:

php
{$date}
// 2024-02-17 01:15:00

20. Time Field

Settings:

time

Result:

time output

Output:

php
{$time}
// 01:30

21. Table Field

In the Tables field, select the required table from the list of all tables.

table

Result:

table output

Output:

php
{$items|print}
Array
(
    [0] => Array
        (
            [title] => Slide 1
        )

    [1] => Array
        (
            [title] => Slide 2
        )

    [2] => Array
        (
            [title] => Slide 3
        )

)

Example:

html
<ul>
  {foreach $items as $item}
    <li>{$item.title}</li>
  {/foreach}
</ul>

22. Сolor palette

Settings:

colorpalette

Result:

colorpalette output

Output:

html
{foreach $colors as $color}
    <span style="background-color: #{$color}"></span>
{/foreach}

23. Only reading

It accepts the same settings as the Text Field, but this field cannot be edited.

24. Hidden Field

It accepts the same settings as the Text Field, but is not displayed in the form.

25. Xtype field

It can accept any xtype field. A list of standard fields can be found here.

Example, modx-description

xtype-modx-description

Output:

xtype modx description output

© PageBlocks 2019-present